All day event package

components/pages/calendar/CalendarHeader.tsx

@@ -14,6 +14,7 @@ import { useAtom } from "jotai";
 import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
 import { format, isSameDay } from "date-fns";
 import { useAuthContext } from "@/contexts/AuthContext";
+import {useIsMutating} from "react-query";
 
 export const CalendarHeader = memo(() => {
   const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);

components/pages/calendar/CalendarPage.tsx

@@ -11,7 +11,7 @@ export default function CalendarPage() {
             paddingT-0
         >
             <HeaderTemplate
-                message={"Let's get your week started!"}
+                message={"Let's get your week started !"}
                 isWelcome
                 isCalendar={true}
             />

components/pages/calendar/EventCalendar.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {Calendar} from "react-native-big-calendar";
-import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
+import {ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle} from "react-native";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
 import {useAtom, useSetAtom} from "jotai";
 import {
@@ -14,6 +14,9 @@ import {useAuthContext} from "@/contexts/AuthContext";
 import {CalendarEvent} from "@/components/pages/calendar/interfaces";
 import {Text} from "react-native-ui-lib";
 import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns";
+import {useCalSync} from "@/hooks/useCalSync";
+import { useIsMutating } from "react-query";
+import {useSyncEvents} from "@/hooks/useSyncOnScroll";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -37,6 +40,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const setEventForEdit = useSetAtom(eventForEditAtom);
         const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
+        const {isSyncing} = useSyncEvents()
         const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
         const todaysDate = new Date();
@@ -75,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         );
 
         const memoizedEventCellStyle = useCallback(
-            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
+            (event: CalendarEvent) => ({backgroundColor: event.eventColor, fontSize: 14}),
             []
         );
 
@@ -211,6 +215,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         if (isLoading) {
             return (
                 <View style={styles.loadingContainer}>
+                    {isSyncing && <Text>Syncing...</Text>}
                     <ActivityIndicator size="large" color="#0000ff"/>
                 </View>
             );
@@ -219,52 +224,65 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         // console.log(enrichedEvents, filteredEvents)
 
         return (
-            <Calendar
-                bodyContainerStyle={styles.calHeader}
-                swipeEnabled
-                mode={mode}
-                // enableEnrichedEvents={true}
-                sortedMonthView
-                // enrichedEventsByDate={enrichedEvents}
-                events={filteredEvents}
-                // eventCellStyle={memoizedEventCellStyle}
-                onPressEvent={handlePressEvent}
-                weekStartsOn={memoizedWeekStartsOn}
-                height={calendarHeight}
-                activeDate={todaysDate}
-                date={selectedDate}
-                onPressCell={handlePressCell}
-                headerContentStyle={memoizedHeaderContentStyle}
-                onSwipeEnd={handleSwipeEnd}
-                scrollOffsetMinutes={offsetMinutes}
-                theme={{
-                    palette: {
-                        nowIndicator: profileData?.eventColor || "#fd1575",
-                        gray: {
-                            "100": "#e8eaed",
-                            "200": "#e8eaed",
-                            "500": "#b7b7b7",
-                            "800": "#919191",
+            <>
+                {isSyncing && (
+                    <View style={styles.loadingContainer}>
+                        {isSyncing && <Text>Syncing...</Text>}
+                        <ActivityIndicator size="large" color="#0000ff"/>
+                    </View>
+                )}
+                <Calendar
+                    bodyContainerStyle={styles.calHeader}
+                    swipeEnabled
+                    mode={mode}
+                    // enableEnrichedEvents={true}
+                    sortedMonthView
+                    // enrichedEventsByDate={enrichedEvents}
+                    events={filteredEvents}
+                    eventCellStyle={memoizedEventCellStyle}
+                    onPressEvent={handlePressEvent}
+                    weekStartsOn={memoizedWeekStartsOn}
+                    height={calendarHeight}
+                    activeDate={todaysDate}
+                    date={selectedDate}
+                    onPressCell={handlePressCell}
+                    headerContentStyle={memoizedHeaderContentStyle}
+                    onSwipeEnd={handleSwipeEnd}
+                    scrollOffsetMinutes={offsetMinutes}
+                    theme={{
+                        palette: {
+                            nowIndicator: profileData?.eventColor || "#fd1575",
+                            gray: {
+                                "100": "#e8eaed",
+                                "200": "#e8eaed",
+                                "500": "#b7b7b7",
+                                "800": "#919191",
+                            },
                         },
-                    },
-                    typography: {
-                        fontFamily: "PlusJakartaSans_500Medium",
-                        sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
-                        xl: {
+                        typography: {
                             fontFamily: "PlusJakartaSans_500Medium",
-                            fontSize: 16,
+                            sm: {fontFamily: "Manrope_600SemiBold", fontSize: 8},
+                            xl: {
+                                fontFamily: "PlusJakartaSans_500Medium",
+                                fontSize: 14,
+                            },
+                            moreLabel: {},
+                            xs: {fontSize: 10},
                         },
-                        moreLabel: {},
-                        xs: {fontSize: 10},
-                    },
-                }}
-                dayHeaderStyle={dateStyle}
-                dayHeaderHighlightColor={"white"}
-                showAdjacentMonths
-                hourStyle={styles.hourStyle}
-                ampm
-                // renderCustomDateForMonth={renderCustomDateForMonth}
-            />
+                    }}
+                    dayHeaderStyle={dateStyle}
+                    dayHeaderHighlightColor={"white"}
+                    showAdjacentMonths
+                    // headerContainerStyle={mode !== "month" ? {
+                    //     overflow:"hidden",
+                    //     height: 12,
+                    // } : {}}
+                    hourStyle={styles.hourStyle}
+                    ampm
+                    // renderCustomDateForMonth={renderCustomDateForMonth}
+                />
+            </>
+
         );
     }
 );
@@ -291,6 +309,11 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        zIndex: 100,
+        backgroundColor: "rgba(255, 255, 255, 0.9)",
     },
     dayHeader: {
         backgroundColor: "#4184f2",