ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added today button

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-20 13:39:39 +02:00
parent f715a77661
commit 3424f06816
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,10 +1,11 @@
import React, {memo} from 'react';
import {Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from './constants';
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {isSameDay} from "date-fns";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@ -28,6 +29,8 @@ export const CalendarHeader = memo(() => {
setSelectedDate(updatedDate);
};
const isSelectedDateToday = isSameDay(selectedDate, new Date())
return (
<View
style={{
@ -65,22 +68,32 @@ export const CalendarHeader = memo(() => {
</Picker>
</View>
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
<View row>
{!isSelectedDateToday && (
<Button size={"small"} marginR-5 label={"Today"} onPress={() => {
setSelectedDate(new Date())
setMode("day")
}}/>
)}
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
</View>
</View>
);
)
;
});
const styles = StyleSheet.create({

27
components/pages/calendar/EventCalendar.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import { Calendar } from "react-native-big-calendar";
import { StyleSheet, View, ActivityIndicator } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
@ -10,18 +10,18 @@ import {
selectedDateAtom,
selectedNewEventDateAtom
} from "@/components/pages/calendar/atoms";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
interface EventCalendarProps {
calendarHeight: number;
}
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const mode = useAtomValue(modeAtom);
const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@ -48,6 +48,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
if (mode === "day") {
setSelectedNewEndDate(date);
} else {
setMode("day")
setSelectedDate(date);
}
},
@ -59,7 +60,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
}, [setSelectedDate]);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[]
);
@ -78,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
if (isLoading || isRendering) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
}