ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-27 00:44:54 +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

17
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,6 +68,14 @@ export const CalendarHeader = memo(() => {
</Picker>
</View>
<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"}]}
@ -80,7 +91,9 @@ export const CalendarHeader = memo(() => {
/>
</View>
</View>
);
</View>
)
;
});
const styles = StyleSheet.create({

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

@ -1,8 +1,8 @@
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {Calendar} from "react-native-big-calendar";
import { StyleSheet, View, ActivityIndicator } from "react-native";
import {ActivityIndicator, StyleSheet, View} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import {useAtom, useSetAtom} from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
@ -21,7 +21,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
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);
}
},