react-native-resource-calendar 1.0.7 → 1.0.9

package/README.md

@@ -18,7 +18,7 @@ Expo compatibility.
 ---
 
 ## 🎬 Demo
-https://github.com/user-attachments/assets/48841509-c801-4d77-948b-f108ff57ad34
+https://github.com/user-attachments/assets/68fe0283-73ce-4689-8241-6587b817ecbd
 
 ---
 
@@ -71,141 +71,14 @@ Follow these steps to get started quickly with **React Native Resource Calendar*
 
 ```tsx
 import React from 'react';
-import {Button, StyleSheet, View} from 'react-native';
-import {Calendar, DraggedEventDraft, useCalendarBinding} from "react-native-resource-calendar";
-
-const resourceData = [
-    {
-        id: 1,
-        name: "Alice Johnson",
-        avatar: "https://randomuser.me/api/portraits/women/11.jpg",
-        events: [
-            {
-                id: 101,
-                resourceId: 1,
-                from: 8 * 60,   // 8:00 AM
-                to: 9 * 60,     // 9:00 AM
-                title: "Physical Therapy",
-                description: "Post-surgery recovery session",
-                meta: {client: "John Doe"},
-            },
-            {
-                id: 102,
-                resourceId: 1,
-                from: 10 * 60,
-                to: 11 * 60,
-                title: "Mobility Assessment",
-                description: "Initial consultation",
-            },
-        ],
-        disabledBlocks: [
-            {
-                id: 1001,
-                resourceId: 1,
-                from: 12 * 60, // 12:00 PM
-                to: 13 * 60,   // 1:00 PM
-                title: "Lunch Break",
-            },
-        ],
-        disableIntervals: [
-            {
-                resourceId: 1,
-                from: 17 * 60, // 5:00 PM
-                to: 24 * 60,   // 12:00 AM
-            },
-        ],
-    },
-    {
-        id: 2,
-        name: "Bob Martinez",
-        avatar: "https://randomuser.me/api/portraits/men/22.jpg",
-        events: [
-            {
-                id: 201,
-                resourceId: 2,
-                from: 9 * 60 + 30, // 9:30 AM
-                to: 10 * 60 + 30,  // 10:30 AM
-                title: "Personal Training",
-                meta: {client: "Alex Kim"},
-            },
-            {
-                id: 202,
-                resourceId: 2,
-                from: 15 * 60,
-                to: 16 * 60,
-                title: "Endurance Coaching",
-            },
-        ],
-        disabledBlocks: [
-            {
-                id: 2001,
-                resourceId: 2,
-                from: 13 * 60,
-                to: 14 * 60,
-                title: "Staff Meeting",
-            },
-        ],
-        disableIntervals: [
-            {
-                resourceId: 2,
-                from: 7 * 60,
-                to: 8 * 60,
-            },
-        ],
-    },
-    {
-        id: 3,
-        name: "Charlie Kim",
-        avatar: "https://randomuser.me/api/portraits/men/33.jpg",
-        events: [
-            {
-                id: 301,
-                resourceId: 3,
-                from: 11 * 60,
-                to: 12 * 60,
-                title: "Sports Massage",
-            },
-            {
-                id: 302,
-                resourceId: 3,
-                from: 14 * 60 + 15,
-                to: 15 * 60,
-                title: "Deep Tissue Massage",
-            },
-        ],
-        disabledBlocks: [
-            {
-                id: 3001,
-                resourceId: 3,
-                from: 12 * 60,
-                to: 13 * 60,
-                title: "Lunch",
-            },
-        ],
-    },
-    {
-        id: 4,
-        name: "Diana Ross",
-        avatar: "https://randomuser.me/api/portraits/women/44.jpg",
-        events: [
-            {
-                id: 401,
-                resourceId: 4,
-                from: 13 * 60,
-                to: 14 * 60,
-                title: "Nutrition Plan Review",
-                description: "Discuss dietary adjustments",
-            },
-        ],
-        disableIntervals: [
-            {
-                resourceId: 4,
-                from: 18 * 60,
-                to: 24 * 60,
-            },
-        ],
-    },
-];
+import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Calendar, DraggedEventDraft, Event, LayoutMode, useCalendarBinding} from "react-native-resource-calendar";
+import {SafeAreaView} from "react-native-safe-area-context";
+import {ThemedText} from "@/components/ThemedText";
+import {resourceData} from "@/app/(tabs)/fakeData";
+import EventTopRight from "@/components/EventTopRight";
+import {FontAwesome} from "@expo/vector-icons";
+import {statusColor} from "@/utilities/helpers";
 
 export default function App() {
     const {
@@ -217,7 +90,10 @@ export default function App() {
     const setSelectedEvent = useSetSelectedEvent();
     const draggedEventDraft = useGetDraggedEventDraft();
     const [date, setDate] = React.useState(new Date());
-    const [resources, setResources] = React.useState(resourceData)
+    const [resources, setResources] = React.useState(resourceData);
+    const [hourHeight, setHourHeight] = React.useState(120);
+    const [numberOfColumns, setNumberOfColumns] = React.useState(3);
+    const [layoutMode, setLayoutMode] = React.useState<LayoutMode>('stacked');
 
     const updateResourcesOnDrag = React.useCallback(
         (draft: DraggedEventDraft) => {
@@ -257,39 +133,101 @@ export default function App() {
         [setResources]
     );
 
+    const eventStyleOverrides = (event: Event) => {
+        const bg = statusColor(event.meta?.status)
+        return {container: {backgroundColor: bg}};
+    };
+
+    const randomPropsGenerator = () => {
+        const randomHourHeight = Math.floor(Math.random() * (120 - 60 + 1)) + 60;
+        const randomNumberOfColumns = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
+        setHourHeight(randomHourHeight);
+        setNumberOfColumns(randomNumberOfColumns);
+        setLayoutMode(layoutMode === 'stacked' ? 'columns' : 'stacked');
+    }
+    
     return (
-        <CalendarBindingProvider>
-            <View style={{flex: 1}}>
-                <Calendar
-                    resources={resources}
-                    date={date}
-                    startMinutes={8 * 60}
-                    numberOfColumns={3}
-                />
-                {
-                    selectedEvent && <View style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between'
-                    }}>
-                        <Button
-                            title="Cancel"
-                            onPress={() => {
-                                setSelectedEvent(null);
-                            }}
-                        />
-                        <Button
-                            title="Save"
-                            onPress={() => {
-                                if (draggedEventDraft) {
-                                    updateResourcesOnDrag(draggedEventDraft!);
-                                }
-                                setSelectedEvent(null);
-                            }}
-                        />
-                    </View>
-                }
+        <SafeAreaView style={{backgroundColor: "#fff", flex: 1}} edges={["top"]}>
+            <Calendar
+                theme={{
+                    typography: {
+                        fontFamily: 'NunitoSans',
+                    },
+                }}
+                resources={resources}
+                date={date}
+                startMinutes={8 * 60}
+                numberOfColumns={numberOfColumns}
+                hourHeight={hourHeight}
+                eventSlots={{
+                    // Body: ({event, ctx}) => <EventBody event={event} ctx={ctx}/>,
+                    TopRight: ({event, ctx}) => <EventTopRight event={event} ctx={ctx}/>,
+                }}
+                eventStyleOverrides={eventStyleOverrides}
+                overLappingLayoutMode={layoutMode}
+            />
+            {
+                selectedEvent && <View style={styles.bar}>
+                    <TouchableOpacity
+                        style={styles.button}
+                        onPress={() => {
+                            setSelectedEvent(null);
+                        }}
+                    >
+                        <ThemedText type={'defaultSemiBold'} style={{
+                            color: "#4d959c"
+                        }}>
+                            Cancel
+                        </ThemedText>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                        style={[styles.button, {backgroundColor: "#4d959c"}]}
+                        onPress={() => {
+                            if (draggedEventDraft) {
+                                updateResourcesOnDrag(draggedEventDraft!);
+                            }
+                            setSelectedEvent(null);
+                        }}
+                    >
+                        <ThemedText type={'defaultSemiBold'}
+                                    style={{
+                                        color: "#fff"
+                                    }}
+                        >
+                            Save
+                        </ThemedText>
+                    </TouchableOpacity>
+                </View>
+            }
+            <View style={{
+                right: 20,
+                bottom: 40,
+                position: "absolute",
+                gap: 12
+            }}>
+                <TouchableOpacity
+                    style={styles.floatingButton}
+                    onPress={() => {
+                        setDate(new Date());
+                    }}
+                >
+                    <View
+                        style={{
+                            width: 16,
+                            height: 16,
+                            backgroundColor: "#4d959c",
+                            borderRadius: 99
+                        }}
+                    />
+                </TouchableOpacity>
+                <TouchableOpacity
+                    style={styles.floatingButton}
+                    onPress={randomPropsGenerator}
+                >
+                    <FontAwesome name="random" size={16} color="#4d959c"/>
+                </TouchableOpacity>
             </View>
-        </CalendarBindingProvider>
+        </SafeAreaView>
     );
 }
 ```
@@ -373,3 +311,9 @@ type CalendarTheme = {
     };
 };
 ```
+
+---
+
+## 💫 Support the Project
+
+If you find this project helpful or interesting, please consider giving it a **⭐️** on GitHub!

package/dist/index.d.mts

@@ -5,6 +5,7 @@ type ResourceId = number;
 type Event = {
     id: number;
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
     title?: string;
@@ -16,12 +17,14 @@ type Event = {
 type DisabledBlock = {
     id: number;
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
     title?: string;
 };
 type DisabledInterval = {
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
 };
@@ -33,6 +36,7 @@ type Resource = {
 type DraggedEventDraft = {
     event: Event;
     from: number;
+    date: string;
     to: number;
     resourceId: ResourceId;
 };
@@ -46,6 +50,7 @@ type LayoutMode = "columns" | "stacked";
 type EventRenderContext = {
     hourHeight: number;
 };
+type CalendarMode = 'day' | '3days' | 'week';
 
 type EventSlots = {
     TopRight?: React$1.ComponentType<{
@@ -88,9 +93,12 @@ interface CalendarProps {
     isEventDisabled?: FlagFn;
     theme?: CalendarTheme;
     overLappingLayoutMode?: LayoutMode;
+    mode?: CalendarMode;
+    activeResourceId?: number;
 }
 declare const Calendar: React$1.FC<CalendarProps>;
 
+type DayKey = string;
 type SetDayDataPayload = {
     events?: Record<ResourceId, Event[]>;
     disabledBlocks?: Record<ResourceId, DisabledBlock[]>;
@@ -102,13 +110,15 @@ type CalendarStoreBinding = {
         children: React.ReactNode;
     }>;
     useResourceById: (id: ResourceId) => Resource;
-    useEventsFor: (resourceId: ResourceId) => ReadonlyArray<Event>;
-    useDisabledBlocksFor: (resourceId: ResourceId) => ReadonlyArray<DisabledBlock>;
-    useDisabledIntervalsFor: (resourceId: ResourceId) => ReadonlyArray<DisabledInterval>;
+    useEventsFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<Event>;
+    useDisabledBlocksFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<DisabledBlock>;
+    useDisabledIntervalsFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<DisabledInterval>;
     useUpsertResources: () => (rs: Array<Pick<Resource, 'id' | 'name' | 'avatar'>>) => void;
-    useSetDayData: () => (payload: SetDayDataPayload) => void;
+    useSetDayDataFor: () => (dayKey: DayKey, payload: SetDayDataPayload) => void;
     useGetSelectedEvent: () => Event | null;
     useSetSelectedEvent: () => (ev: Event | null) => void;
+    useSetDate: () => (date: Date) => void;
+    useGetDate: () => Date;
     useGetDraggedEventDraft: () => DraggedEventDraft | null;
     useSetDraggedEventDraft: () => (draft: DraggedEventDraft | null) => void;
 };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ type ResourceId = number;
 type Event = {
     id: number;
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
     title?: string;
@@ -16,12 +17,14 @@ type Event = {
 type DisabledBlock = {
     id: number;
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
     title?: string;
 };
 type DisabledInterval = {
     resourceId: ResourceId;
+    date: string;
     from: number;
     to: number;
 };
@@ -33,6 +36,7 @@ type Resource = {
 type DraggedEventDraft = {
     event: Event;
     from: number;
+    date: string;
     to: number;
     resourceId: ResourceId;
 };
@@ -46,6 +50,7 @@ type LayoutMode = "columns" | "stacked";
 type EventRenderContext = {
     hourHeight: number;
 };
+type CalendarMode = 'day' | '3days' | 'week';
 
 type EventSlots = {
     TopRight?: React$1.ComponentType<{
@@ -88,9 +93,12 @@ interface CalendarProps {
     isEventDisabled?: FlagFn;
     theme?: CalendarTheme;
     overLappingLayoutMode?: LayoutMode;
+    mode?: CalendarMode;
+    activeResourceId?: number;
 }
 declare const Calendar: React$1.FC<CalendarProps>;
 
+type DayKey = string;
 type SetDayDataPayload = {
     events?: Record<ResourceId, Event[]>;
     disabledBlocks?: Record<ResourceId, DisabledBlock[]>;
@@ -102,13 +110,15 @@ type CalendarStoreBinding = {
         children: React.ReactNode;
     }>;
     useResourceById: (id: ResourceId) => Resource;
-    useEventsFor: (resourceId: ResourceId) => ReadonlyArray<Event>;
-    useDisabledBlocksFor: (resourceId: ResourceId) => ReadonlyArray<DisabledBlock>;
-    useDisabledIntervalsFor: (resourceId: ResourceId) => ReadonlyArray<DisabledInterval>;
+    useEventsFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<Event>;
+    useDisabledBlocksFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<DisabledBlock>;
+    useDisabledIntervalsFor: (resourceId: ResourceId, dayDate: Date) => ReadonlyArray<DisabledInterval>;
     useUpsertResources: () => (rs: Array<Pick<Resource, 'id' | 'name' | 'avatar'>>) => void;
-    useSetDayData: () => (payload: SetDayDataPayload) => void;
+    useSetDayDataFor: () => (dayKey: DayKey, payload: SetDayDataPayload) => void;
     useGetSelectedEvent: () => Event | null;
     useSetSelectedEvent: () => (ev: Event | null) => void;
+    useSetDate: () => (date: Date) => void;
+    useGetDate: () => Date;
     useGetDraggedEventDraft: () => DraggedEventDraft | null;
     useSetDraggedEventDraft: () => (draft: DraggedEventDraft | null) => void;
 };