react-native-resource-calendar 1.0.8 → 1.0.10

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import * as React18 from 'react';
-import React18__default, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback } from 'react';
+import * as React19 from 'react';
+import React19__default, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated2, { useAnimatedRef, useSharedValue, runOnJS, withSpring, useFrameCallback, scrollTo, useAnimatedScrollHandler, useAnimatedStyle, useAnimatedProps } from 'react-native-reanimated';
 import { InteractionManager, View, StyleSheet, Text, TouchableOpacity, TextInput, useWindowDimensions, Platform, Dimensions, Image } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
 import * as Haptics from 'expo-haptics';
 import { toZonedTime } from 'date-fns-tz';
-import { isSameDay, format, getHours, getMinutes, set, setSeconds, setMinutes, setHours } from 'date-fns';
+import { isSameDay, format, getHours, getMinutes, set, addDays, setSeconds, setMinutes, setHours } from 'date-fns';
 import { isUndefined } from 'lodash';
 import { createStore } from 'zustand';
 import { shallow } from 'zustand/shallow';
@@ -270,8 +270,16 @@ function computeEventFrames(events, containerWidthPx, mode, options) {
     });
   }
 }
+var findResourceIndexFor = (rid, resourceIds) => Math.max(0, Math.min(
+  resourceIds.length - 1,
+  resourceIds.findIndex((id) => id === rid)
+));
+var findDayIndexFor = (date, days) => Math.max(0, Math.min(
+  days.length - 1,
+  days.findIndex((d) => date === format(d, "yyyy-MM-dd"))
+));
 var Col = ({ children, divider, space, style }) => {
-  return /* @__PURE__ */ React18__default.createElement(View, { style: [{ flexDirection: "column" }, style] }, React18__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, { key: index }, child, index !== React18__default.Children.toArray(children).length - 1 && divider, index !== React18__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__default.createElement(View, { style: { height: space, width: "100%" } }))));
+  return /* @__PURE__ */ React19__default.createElement(View, { style: [{ flexDirection: "column" }, style] }, React19__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, { key: index }, child, index !== React19__default.Children.toArray(children).length - 1 && divider, index !== React19__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React19__default.createElement(View, { style: { height: space, width: "100%" } }))));
 };
 var Col_default = Col;
 
@@ -315,11 +323,11 @@ var CalendarThemeProvider = ({ theme, children }) => {
     ...theme,
     typography: { ...defaultTheme.typography, ...theme?.typography }
   };
-  return /* @__PURE__ */ React18__default.createElement(ThemeCtx.Provider, { value: mergedTheme }, children);
+  return /* @__PURE__ */ React19__default.createElement(ThemeCtx.Provider, { value: mergedTheme }, children);
 };
 
 // src/components/TimeLabels.tsx
-var TimeLabels = React18.forwardRef(({
+var TimeLabels = React19.forwardRef(({
   timezone,
   hourHeight = 120,
   startMinutes = 0,
@@ -359,7 +367,7 @@ var TimeLabels = React18.forwardRef(({
       }
     });
   }, [date, isToday, APPOINTMENT_BLOCK_HEIGHT, startMinutes, hourHeight]);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Col_default, null, Array.from({ length: 24 }).map((_, index) => /* @__PURE__ */ React18.createElement(View, { key: index, style: [styles.timeLabel, { height: hourHeight }] }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Col_default, null, Array.from({ length: 24 }).map((_, index) => /* @__PURE__ */ React19.createElement(View, { key: index, style: [styles.timeLabel, { height: hourHeight }] }, /* @__PURE__ */ React19.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -371,7 +379,7 @@ var TimeLabels = React18.forwardRef(({
       }
     },
     indexToDate(index).split(" ")[0]
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -383,10 +391,10 @@ var TimeLabels = React18.forwardRef(({
       }
     },
     indexToDate(index).split(" ")[1]
-  ))), isToday && /* @__PURE__ */ React18.createElement(View, { style: [styles.currentTime, {
+  ))), isToday && /* @__PURE__ */ React19.createElement(View, { style: [styles.currentTime, {
     top: currentTimeYPosition - 13,
     width: TIME_LABEL_WIDTH
-  }] }, /* @__PURE__ */ React18.createElement(
+  }] }, /* @__PURE__ */ React19.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -399,7 +407,7 @@ var TimeLabels = React18.forwardRef(({
       }
     },
     currentTime
-  ))), isToday && /* @__PURE__ */ React18.createElement(View, { style: [styles.currentTimeLine, {
+  ))), isToday && /* @__PURE__ */ React19.createElement(View, { style: [styles.currentTimeLine, {
     pointerEvents: "none",
     top: currentTimeYPosition,
     width: totalTimelineWidth,
@@ -435,11 +443,11 @@ var Hidden = ({ isHidden, children }) => {
   if (isHidden) {
     return null;
   }
-  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, children);
+  return /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, null, children);
 };
 var Hidden_default = Hidden;
 var Center = ({ children, style }) => {
-  return /* @__PURE__ */ React18__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(
     View,
     {
       style: [{
@@ -460,7 +468,7 @@ var Badge = ({
   textColor = "white"
 }) => {
   const titleFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__default.createElement(View, { style: [styles2.badge, { backgroundColor: color }, style] }, children ? children : /* @__PURE__ */ React18__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(View, { style: [styles2.badge, { backgroundColor: color }, style] }, children ? children : /* @__PURE__ */ React19__default.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -484,13 +492,16 @@ var styles2 = StyleSheet.create({
 });
 var Badge_default = Badge;
 var createCalendarStore = () => createStore((set2) => ({
+  date: /* @__PURE__ */ new Date(),
   resourcesById: {},
-  eventsByResource: {},
-  disabledBlocksByResource: {},
-  disabledIntervalsByResource: {},
+  // NEW multi-day
+  eventsByDay: {},
+  disabledBlocksByDay: {},
+  disabledIntervalsByDay: {},
   selectedEvent: null,
   draggedEventDraft: null,
   setSelectedEvent: (evt) => set2({ selectedEvent: evt }),
+  setDate: (date) => set2({ date }),
   upsertResources: (rs) => set2((s) => {
     const next = { ...s.resourcesById };
     let changed = false;
@@ -503,23 +514,19 @@ var createCalendarStore = () => createStore((set2) => ({
     }
     return changed ? { resourcesById: next } : {};
   }),
-  setDayData: ({ events, disabledBlocks, disableIntervals }) => set2((s) => ({
-    eventsByResource: events ?? s.eventsByResource,
-    disabledBlocksByResource: disabledBlocks ?? s.disabledBlocksByResource,
-    disabledIntervalsByResource: disableIntervals ?? s.disabledIntervalsByResource
+  // NEW: multi-day write
+  setDayDataFor: (dayKey, { events, disabledBlocks, disableIntervals }) => set2((s) => ({
+    eventsByDay: events ? { ...s.eventsByDay, [dayKey]: events } : s.eventsByDay,
+    disabledBlocksByDay: disabledBlocks ? { ...s.disabledBlocksByDay, [dayKey]: disabledBlocks } : s.disabledBlocksByDay,
+    disabledIntervalsByDay: disableIntervals ? { ...s.disabledIntervalsByDay, [dayKey]: disableIntervals } : s.disabledIntervalsByDay
   })),
-  setDraggedEventDraft: (draft) => set2({ draggedEventDraft: draft }),
-  clearDay: () => set2({
-    eventsByResource: {},
-    disabledBlocksByResource: {},
-    disabledIntervalsByResource: {}
-  })
+  setDraggedEventDraft: (draft) => set2({ draggedEventDraft: draft })
 }));
 var StoreContext = createContext(null);
 var Provider = ({ children }) => {
   const ref = useRef(void 0);
   if (!ref.current) ref.current = createCalendarStore();
-  return /* @__PURE__ */ React18__default.createElement(StoreContext.Provider, { value: ref.current }, children);
+  return /* @__PURE__ */ React19__default.createElement(StoreContext.Provider, { value: ref.current }, children);
 };
 var useBound = (selector, eq) => {
   const store = useContext(StoreContext);
@@ -529,13 +536,24 @@ var useBound = (selector, eq) => {
 var useResourceById = (id) => useBound((s) => s.resourcesById[id]);
 var useGetSelectedEvent = () => useBound((s) => s.selectedEvent);
 var useSetSelectedEvent = () => useBound((s) => s.setSelectedEvent);
-var useEventsFor = (resourceId) => useBound((s) => s.eventsByResource[resourceId] ?? [], shallow);
+var useEventsFor = (resourceId, dayDate) => useBound((s) => {
+  const key = format(dayDate, "yyyy-MM-dd");
+  return s.eventsByDay?.[key]?.[resourceId] ?? [];
+}, shallow);
 var useGetDraggedEventDraft = () => useBound((s) => s.draggedEventDraft);
-var useDisabledBlocksFor = (resourceId) => useBound((s) => s.disabledBlocksByResource[resourceId] ?? [], shallow);
-var useDisabledIntervalsFor = (resourceId) => useBound((s) => s.disabledIntervalsByResource[resourceId] ?? [], shallow);
+var useDisabledBlocksFor = (resourceId, dayDate) => useBound((s) => {
+  const key = format(dayDate, "yyyy-MM-dd");
+  return s.disabledBlocksByDay?.[key]?.[resourceId] ?? [];
+}, shallow);
+var useDisabledIntervalsFor = (resourceId, dayDate) => useBound((s) => {
+  const key = format(dayDate, "yyyy-MM-dd");
+  return s.disabledIntervalsByDay?.[key]?.[resourceId] ?? [];
+}, shallow);
 var useUpsertResources = () => useBound((s) => s.upsertResources);
-var useSetDayData = () => useBound((s) => s.setDayData);
+var useSetDayDataFor = () => useBound((s) => s.setDayDataFor);
 var useSetDraggedEventDraft = () => useBound((s) => s.setDraggedEventDraft);
+var useSetDate = () => useBound((s) => s.setDate);
+var useGetDate = () => useBound((s) => s.date);
 var zustandBinding = {
   Provider,
   useResourceById,
@@ -543,7 +561,9 @@ var zustandBinding = {
   useDisabledBlocksFor,
   useDisabledIntervalsFor,
   useUpsertResources,
-  useSetDayData,
+  useSetDate,
+  useGetDate,
+  useSetDayDataFor,
   useGetSelectedEvent,
   useSetSelectedEvent,
   useGetDraggedEventDraft,
@@ -560,19 +580,19 @@ var useCalendarBinding = () => {
 var CalendarBindingProvider = ({ binding, children }) => {
   const active = binding ?? zustandBinding;
   const StoreProvider = active.Provider;
-  return /* @__PURE__ */ React18__default.createElement(BindingCtx.Provider, { value: active }, /* @__PURE__ */ React18__default.createElement(StoreProvider, null, children));
+  return /* @__PURE__ */ React19__default.createElement(BindingCtx.Provider, { value: active }, /* @__PURE__ */ React19__default.createElement(StoreProvider, null, children));
 };
 
 // src/components/ResourcesComponent.tsx
-var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
+var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH, date }) => {
   const { useResourceById: useResourceById2, useEventsFor: useEventsFor2 } = useCalendarBinding();
   const resource = useResourceById2(id);
-  const events = useEventsFor2(id);
+  const events = useEventsFor2(id, date);
   const titleFace = useResolvedFont({ fontWeight: "700" });
-  return /* @__PURE__ */ React18.createElement(Col_default, { style: [{
+  return /* @__PURE__ */ React19.createElement(Col_default, { style: [{
     alignItems: "center",
     width: APPOINTMENT_BLOCK_WIDTH
-  }] }, /* @__PURE__ */ React18.createElement(View, { style: { position: "relative" } }, /* @__PURE__ */ React18.createElement(
+  }] }, /* @__PURE__ */ React19.createElement(View, { style: { position: "relative" } }, /* @__PURE__ */ React19.createElement(
     StaffAvatar,
     {
       onPress: () => {
@@ -580,12 +600,12 @@ var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
           onResourcePress(resource);
       },
       name: resource?.name,
-      circleSize: 40,
+      circleSize: Math.min(40, APPOINTMENT_BLOCK_WIDTH - 12),
       fontSize: 16,
       badge: events?.length,
       image: resource?.avatar
     }
-  )), /* @__PURE__ */ React18.createElement(
+  )), /* @__PURE__ */ React19.createElement(
     Text,
     {
       style: {
@@ -599,11 +619,12 @@ var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
     resource?.name
   ));
 };
-var ResourcesComponent = ({ resourceIds, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, resourceIds?.map((id) => {
-    return /* @__PURE__ */ React18.createElement(
+var ResourcesComponent = ({ resourceIds, onResourcePress, APPOINTMENT_BLOCK_WIDTH, date }) => {
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, resourceIds?.map((id) => {
+    return /* @__PURE__ */ React19.createElement(
       ResourceComponent,
       {
+        date,
         key: id,
         id,
         APPOINTMENT_BLOCK_WIDTH,
@@ -626,17 +647,17 @@ function StaffAvatar({
   textColor
 }) {
   const titleFace = useResolvedFont({ fontWeight: "700" });
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     TouchableOpacity,
     {
       disabled: isUndefined(onPress),
       onPress,
       style: containerStyle
     },
-    /* @__PURE__ */ React18.createElement(Center_default, { style: {
+    /* @__PURE__ */ React19.createElement(Center_default, { style: {
       borderRadius: 9999,
       backgroundColor: ringColor
-    } }, /* @__PURE__ */ React18.createElement(Hidden_default, { isHidden: isUndefined(badge) || Number(badge) == 0 }, /* @__PURE__ */ React18.createElement(
+    } }, /* @__PURE__ */ React19.createElement(Hidden_default, { isHidden: isUndefined(badge) || Number(badge) == 0 }, /* @__PURE__ */ React19.createElement(
       View,
       {
         style: [{
@@ -649,7 +670,7 @@ function StaffAvatar({
           padding: 2
         }, badgeStyle]
       },
-      /* @__PURE__ */ React18.createElement(
+      /* @__PURE__ */ React19.createElement(
         Badge_default,
         {
           fontSize: 12,
@@ -657,18 +678,18 @@ function StaffAvatar({
           color: "#4d959c"
         }
       )
-    )), /* @__PURE__ */ React18.createElement(Center_default, { style: {
+    )), /* @__PURE__ */ React19.createElement(Center_default, { style: {
       margin: 2,
       borderRadius: 9999,
       backgroundColor: "white"
-    } }, /* @__PURE__ */ React18.createElement(Center_default, { style: {
+    } }, /* @__PURE__ */ React19.createElement(Center_default, { style: {
       margin: 2,
       borderRadius: 9999,
       height: circleSize,
       width: circleSize,
       backgroundColor: avatarColor || "#C9E5E8",
       overflow: "hidden"
-    } }, image ? /* @__PURE__ */ React18.createElement(
+    } }, image ? /* @__PURE__ */ React19.createElement(
       Image,
       {
         resizeMode: "cover",
@@ -679,7 +700,7 @@ function StaffAvatar({
           ...StyleSheet.absoluteFillObject
         }
       }
-    ) : /* @__PURE__ */ React18.createElement(
+    ) : /* @__PURE__ */ React19.createElement(
       Text,
       {
         allowFontScaling: false,
@@ -695,13 +716,12 @@ function StaffAvatar({
   );
 }
 var EventGridBlocksSkia = ({
-  dateRef,
   handleBlockPress,
   hourHeight,
   APPOINTMENT_BLOCK_WIDTH
 }) => {
   const rowHeight = hourHeight / 4;
-  const [pressedRow, setPressedRow] = React18.useState(null);
+  const [pressedRow, setPressedRow] = React19.useState(null);
   const timeLabels = useMemo(() => {
     const out = [];
     for (let h = 0; h < 24; h++) {
@@ -728,21 +748,20 @@ var EventGridBlocksSkia = ({
   const firstRects = rects.slice(0, midIndex);
   const secondRects = rects.slice(midIndex);
   const segmentHeight = rowHeight * firstRects.length;
-  const onSlotPress = React18.useCallback(
+  const onSlotPress = React19.useCallback(
     (row) => {
       setPressedRow(null);
       const slot = timeLabels[row];
       if (slot) {
-        const timestamp = combineDateAndTime(dateRef.current, slot);
-        handleBlockPress(timestamp);
+        handleBlockPress(slot);
       }
     },
-    [dateRef, handleBlockPress, timeLabels]
+    [handleBlockPress, timeLabels]
   );
-  const onPressBegin = React18.useCallback((row) => {
+  const onPressBegin = React19.useCallback((row) => {
     setPressedRow(row);
   }, []);
-  const onTouchesUp = React18.useCallback(() => {
+  const onTouchesUp = React19.useCallback(() => {
     setPressedRow(null);
   }, []);
   const longPressGesture = Gesture.LongPress().onBegin((e) => {
@@ -755,7 +774,7 @@ var EventGridBlocksSkia = ({
     "worklet";
     runOnJS(onTouchesUp)();
   });
-  return /* @__PURE__ */ React18.createElement(GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React18.createElement(View, null, /* @__PURE__ */ React18.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: idx }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React19.createElement(View, null, /* @__PURE__ */ React19.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: idx }, /* @__PURE__ */ React19.createElement(
     Rect$1,
     {
       x,
@@ -765,7 +784,7 @@ var EventGridBlocksSkia = ({
       color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
       style: "fill"
     }
-  ), /* @__PURE__ */ React18.createElement(Line$1, { p1: { x, y: y + h }, p2: { x: x + w, y: y + h }, color: "#ddd", strokeWidth: 1 })))), /* @__PURE__ */ React18.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, secondRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18.createElement(React18.Fragment, { key: idx }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(Line$1, { p1: { x, y: y + h }, p2: { x: x + w, y: y + h }, color: "#ddd", strokeWidth: 1 })))), /* @__PURE__ */ React19.createElement(Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, secondRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: idx }, /* @__PURE__ */ React19.createElement(
     Rect$1,
     {
       x,
@@ -775,7 +794,7 @@ var EventGridBlocksSkia = ({
       color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
       style: "fill"
     }
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Line$1,
     {
       p1: { x, y: y - segmentHeight + h },
@@ -785,36 +804,50 @@ var EventGridBlocksSkia = ({
     }
   ))))));
 };
-var StoreFeeder = ({ store, resources }) => {
+var StoreFeeder = ({ store, resources, baseDate }) => {
   const upsertResources = store.useUpsertResources();
-  const setDayData = store.useSetDayData();
+  const setDayDataFor = store.useSetDayDataFor();
+  const setDate = store.useSetDate();
+  const baseDateKey = useMemo(() => format(baseDate, "yyyy-MM-dd"), [baseDate]);
   useEffect(() => {
+    setDate(baseDate);
     upsertResources(resources.map((r) => ({ id: r.id, name: r.name, avatar: r.avatar })));
-    const eventsByResource = {};
-    const blocksByResource = {};
-    const intervalsByResource = {};
+    const dayBuckets = /* @__PURE__ */ new Map();
     for (const r of resources) {
-      if (r.events?.length) eventsByResource[r.id] = r.events;
-      if (r.disabledBlocks?.length) blocksByResource[r.id] = r.disabledBlocks;
-      if (r.disableIntervals?.length) intervalsByResource[r.id] = r.disableIntervals;
+      const push = (items, field) => {
+        if (!items?.length) return;
+        for (const it of items) {
+          const key = it.date ?? baseDateKey;
+          const bucket = dayBuckets.get(key) ?? dayBuckets.set(key, { events: {}, disabledBlocks: {}, disableIntervals: {} }).get(key);
+          const m = bucket[field];
+          (m[r.id] ||= []).push(it);
+        }
+      };
+      push(r.events, "events");
+      push(r.disabledBlocks, "disabledBlocks");
+      push(r.disableIntervals, "disableIntervals");
     }
-    setDayData({
-      events: eventsByResource,
-      disabledBlocks: blocksByResource,
-      disableIntervals: intervalsByResource
-    });
-  }, [resources, upsertResources, setDayData]);
+    for (const [dayKey, payload] of dayBuckets) {
+      setDayDataFor(dayKey, payload);
+    }
+  }, [resources, upsertResources, setDayDataFor, baseDateKey]);
   return null;
 };
 var DisabledInterval = ({ width, top, height }) => {
-  return /* @__PURE__ */ React18__default.createElement(View, { style: [styles3.disabledBlock, { width, top, height }] }, /* @__PURE__ */ React18__default.createElement(Svg, { width, height: "100%" }, /* @__PURE__ */ React18__default.createElement(Defs, null, /* @__PURE__ */ React18__default.createElement(Pattern, { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "10", height: "10" }, /* @__PURE__ */ React18__default.createElement(Line, { x1: "0", y1: "0", x2: "10", y2: "10", stroke: "rgba(150, 150, 150, 0.8)", strokeWidth: "1" }))), /* @__PURE__ */ React18__default.createElement(Rect, { width, height: "100%", fill: "url(#diagonalHatch)" })));
+  return /* @__PURE__ */ React19__default.createElement(View, { style: [styles3.disabledBlock, { width, top, height }] }, /* @__PURE__ */ React19__default.createElement(Svg, { width, height: "100%" }, /* @__PURE__ */ React19__default.createElement(Defs, null, /* @__PURE__ */ React19__default.createElement(Pattern, { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "10", height: "10" }, /* @__PURE__ */ React19__default.createElement(Line, { x1: "0", y1: "0", x2: "10", y2: "10", stroke: "rgba(150, 150, 150, 0.8)", strokeWidth: "1" }))), /* @__PURE__ */ React19__default.createElement(Rect, { width, height: "100%", fill: "url(#diagonalHatch)" })));
 };
-var DisabledIntervals = React18__default.memo(({ id, APPOINTMENT_BLOCK_WIDTH, hourHeight }) => {
-  const { useDisabledIntervalsFor: useDisabledIntervalsFor2 } = useCalendarBinding();
-  const disabledIntervals = useDisabledIntervalsFor2(id);
-  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, disabledIntervals.map(
+var DisabledIntervals = React19__default.memo(({
+  id,
+  APPOINTMENT_BLOCK_WIDTH,
+  hourHeight,
+  date: dateProp
+}) => {
+  const { useDisabledIntervalsFor: useDisabledIntervalsFor2, useGetDate: useGetDate2 } = useCalendarBinding();
+  const date = useGetDate2();
+  const disabledIntervals = useDisabledIntervalsFor2(id, dateProp ?? date);
+  return /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, null, disabledIntervals.map(
     (disabledInterval, index) => {
-      return /* @__PURE__ */ React18__default.createElement(
+      return /* @__PURE__ */ React19__default.createElement(
         DisabledInterval,
         {
           key: `${index}-${disabledInterval.from}-${disabledInterval.to}`,
@@ -834,7 +867,7 @@ var styles3 = StyleSheet.create({
 });
 var DisabledIntervals_default = DisabledIntervals;
 var Row = ({ children, divider, space, style, ...props }) => {
-  return /* @__PURE__ */ React18__default.createElement(View, { style: [{ flexDirection: "row" }, style], ...props }, React18__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, { key: index }, child, index !== React18__default.Children.toArray(children).length - 1 && divider, index !== React18__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__default.createElement(View, { style: { width: space, height: "100%" } }))));
+  return /* @__PURE__ */ React19__default.createElement(View, { style: [{ flexDirection: "row" }, style], ...props }, React19__default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, { key: index }, child, index !== React19__default.Children.toArray(children).length - 1 && divider, index !== React19__default.Children.toArray(children).length - 1 && /* @__PURE__ */ React19__default.createElement(View, { style: { width: space, height: "100%" } }))));
 };
 var Row_default = Row;
 var DisabledBlockComponent = ({
@@ -855,7 +888,7 @@ var DisabledBlockComponent = ({
     borderColor: "rgba(0,0,0,0.12)"
   };
   const titleFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(
     TouchableOpacity,
     {
       style: [styles4.event, dynamicStyle],
@@ -863,7 +896,7 @@ var DisabledBlockComponent = ({
         onDisabledBlockPress && onDisabledBlockPress(disabledBlock);
       }
     },
-    /* @__PURE__ */ React18__default.createElement(Col_default, { style: { position: "relative" } }, /* @__PURE__ */ React18__default.createElement(Row_default, { style: { height: 18 } }, /* @__PURE__ */ React18__default.createElement(
+    /* @__PURE__ */ React19__default.createElement(Col_default, { style: { position: "relative" } }, /* @__PURE__ */ React19__default.createElement(Row_default, { style: { height: 18 } }, /* @__PURE__ */ React19__default.createElement(
       Text,
       {
         allowFontScaling: false,
@@ -876,7 +909,7 @@ var DisabledBlockComponent = ({
       minutesToTime(disabledBlock?.from),
       " - ",
       minutesToTime(disabledBlock?.to)
-    )), /* @__PURE__ */ React18__default.createElement(
+    )), /* @__PURE__ */ React19__default.createElement(
       Text,
       {
         allowFontScaling: false,
@@ -890,21 +923,23 @@ var DisabledBlockComponent = ({
     ))
   );
 };
-var DisabledBlocks = React18__default.memo(({
+var DisabledBlocks = React19__default.memo(({
   id,
   APPOINTMENT_BLOCK_WIDTH,
   hourHeight,
-  onDisabledBlockPress
+  onDisabledBlockPress,
+  date: dateProp
 }) => {
-  const { useDisabledBlocksFor: useDisabledBlocksFor2 } = useCalendarBinding();
-  const disabledBlocks = useDisabledBlocksFor2(id);
+  const { useDisabledBlocksFor: useDisabledBlocksFor2, useGetDate: useGetDate2 } = useCalendarBinding();
+  const date = useGetDate2();
+  const disabledBlocks = useDisabledBlocksFor2(id, dateProp ?? date);
   const layoutMap = useMemo(() => {
     return columnsToPixels(computeDisabledBlockColumns(disabledBlocks), APPOINTMENT_BLOCK_WIDTH);
   }, [disabledBlocks]);
-  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, disabledBlocks.map(
+  return /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, null, disabledBlocks.map(
     (disabledBlock, index) => {
       const key = disabledBlock.id;
-      return /* @__PURE__ */ React18__default.createElement(
+      return /* @__PURE__ */ React19__default.createElement(
         DisabledBlockComponent,
         {
           hourHeight,
@@ -930,7 +965,7 @@ var styles4 = StyleSheet.create({
   }
 });
 var DisabledBlocks_default = DisabledBlocks;
-var EventBlock = React18__default.memo(({
+var EventBlock = React19__default.memo(({
   event,
   onLongPress,
   onPress,
@@ -964,7 +999,7 @@ var EventBlock = React18__default.memo(({
   const Body = slots?.Body;
   const titleFace = useResolvedFont({ fontWeight: "700" });
   const timeFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(
     TouchableOpacity,
     {
       style: [styles5.event, resolved?.container, dynamicStyle],
@@ -976,7 +1011,7 @@ var EventBlock = React18__default.memo(({
         onLongPress && onLongPress(event);
       }
     },
-    /* @__PURE__ */ React18__default.createElement(Hidden_default, { isHidden: !disabled }, /* @__PURE__ */ React18__default.createElement(View, { style: {
+    /* @__PURE__ */ React19__default.createElement(Hidden_default, { isHidden: !disabled }, /* @__PURE__ */ React19__default.createElement(View, { style: {
       position: "absolute",
       top: 0,
       width: "150%",
@@ -984,7 +1019,7 @@ var EventBlock = React18__default.memo(({
       zIndex: 1,
       backgroundColor: "rgba(255, 255, 255, 0.5)"
     } })),
-    /* @__PURE__ */ React18__default.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18__default.createElement(
+    /* @__PURE__ */ React19__default.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React19__default.createElement(
       TextInput,
       {
         editable: false,
@@ -1000,7 +1035,7 @@ var EventBlock = React18__default.memo(({
         },
         defaultValue: `${start} - ${end}`
       }
-    ), Body ? /* @__PURE__ */ React18__default.createElement(Body, { event, ctx: { hourHeight } }) : /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, /* @__PURE__ */ React18__default.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18__default.createElement(
+    ), Body ? /* @__PURE__ */ React19__default.createElement(Body, { event, ctx: { hourHeight } }) : /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, null, /* @__PURE__ */ React19__default.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React19__default.createElement(
       Text,
       {
         allowFontScaling: false,
@@ -1011,7 +1046,7 @@ var EventBlock = React18__default.memo(({
         }, resolved?.title]
       },
       event?.title
-    )), /* @__PURE__ */ React18__default.createElement(
+    )), /* @__PURE__ */ React19__default.createElement(
       Text,
       {
         allowFontScaling: false,
@@ -1022,10 +1057,10 @@ var EventBlock = React18__default.memo(({
         }, resolved?.desc]
       },
       event?.description
-    )), /* @__PURE__ */ React18__default.createElement(Row_default, { style: {
+    )), /* @__PURE__ */ React19__default.createElement(Row_default, { style: {
       position: "absolute",
       right: 2
-    } }, TopRight ? /* @__PURE__ */ React18__default.createElement(TopRight, { event, ctx: { hourHeight } }) : null))
+    } }, TopRight ? /* @__PURE__ */ React19__default.createElement(TopRight, { event, ctx: { hourHeight } }) : null))
   );
 });
 var styles5 = StyleSheet.create({
@@ -1085,25 +1120,25 @@ var DraggableEvent = ({
         }
       ]
     };
-  }, [selectedEvent, eventHeight, APPOINTMENT_BLOCK_WIDTH]);
+  }, [selectedEvent, APPOINTMENT_BLOCK_WIDTH]);
   const initialDisplayTime = useMemo(() => {
     const start = minutesToTime(positionToMinutes(eventStartedTop.value, hourHeight));
     const end = minutesToTime(positionToMinutes(eventStartedTop.value + eventHeight.value, hourHeight));
     return `${start} - ${end}`;
-  }, [eventHeight.value, hourHeight, eventStartedTop.value]);
+  }, [hourHeight]);
   const animatedTimeProps = useAnimatedProps(() => {
     const start = minutesToTime(positionToMinutes(eventStartedTop.value, hourHeight));
     const end = minutesToTime(positionToMinutes(eventStartedTop.value + eventHeight.value, hourHeight));
     return {
       text: `${start} - ${end}`
     };
-  }, []);
+  }, [hourHeight]);
   const resolved = typeof styleOverrides === "function" ? styleOverrides(selectedEvent) ?? {} : styleOverrides ?? {};
   const TopRight = slots?.TopRight;
   const Body = slots?.Body;
   const titleFace = useResolvedFont({ fontWeight: "700" });
   const timeFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18.createElement(Animated2.View, { style: [styles6.event, dynamicStyle, draggingAnimatedStyle, resolved?.container] }, /* @__PURE__ */ React18.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(Animated2.View, { style: [styles6.event, dynamicStyle, draggingAnimatedStyle, resolved?.container] }, /* @__PURE__ */ React19.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React19.createElement(
     AnimatedTextInput,
     {
       editable: false,
@@ -1120,7 +1155,7 @@ var DraggableEvent = ({
       defaultValue: initialDisplayTime,
       animatedProps: animatedTimeProps
     }
-  ), Body ? /* @__PURE__ */ React18.createElement(Body, { event: selectedEvent, ctx: { hourHeight } }) : /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18.createElement(
+  ), Body ? /* @__PURE__ */ React19.createElement(Body, { event: selectedEvent, ctx: { hourHeight } }) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React19.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -1131,7 +1166,7 @@ var DraggableEvent = ({
       }, resolved?.title]
     },
     selectedEvent?.title
-  )), /* @__PURE__ */ React18.createElement(
+  )), /* @__PURE__ */ React19.createElement(
     Text,
     {
       allowFontScaling: false,
@@ -1142,14 +1177,14 @@ var DraggableEvent = ({
       }, resolved?.desc]
     },
     selectedEvent?.description
-  )), /* @__PURE__ */ React18.createElement(Row_default, { style: {
+  )), /* @__PURE__ */ React19.createElement(Row_default, { style: {
     position: "absolute",
     right: 2
-  }, space: 2 }, TopRight ? /* @__PURE__ */ React18.createElement(TopRight, { event: selectedEvent, ctx: { hourHeight } }) : null)), /* @__PURE__ */ React18.createElement(Row_default, { style: {
+  }, space: 2 }, TopRight ? /* @__PURE__ */ React19.createElement(TopRight, { event: selectedEvent, ctx: { hourHeight } }) : null)), /* @__PURE__ */ React19.createElement(Row_default, { style: {
     position: "absolute",
     alignSelf: "center",
     bottom: 0
-  } }, /* @__PURE__ */ React18.createElement(MaterialIcons, { name: "drag-handle", size: 12, color: "black" })));
+  } }, /* @__PURE__ */ React19.createElement(MaterialIcons, { name: "drag-handle", size: 12, color: "black" })));
 };
 var styles6 = StyleSheet.create({
   event: {
@@ -1162,7 +1197,7 @@ var styles6 = StyleSheet.create({
     // Ensure events stay above the background blocks
   }
 });
-var EventBlocks = React18__default.memo(({
+var EventBlocks = React19__default.memo(({
   id,
   onLongPress,
   onPress,
@@ -1171,10 +1206,12 @@ var EventBlocks = React18__default.memo(({
   eventRenderer,
   isEventDisabled,
   isEventSelected,
-  mode
+  mode,
+  date: dateProp
 }) => {
-  const { useEventsFor: useEventsFor2 } = useCalendarBinding();
-  const events = useEventsFor2(id);
+  const { useEventsFor: useEventsFor2, useGetDate: useGetDate2 } = useCalendarBinding();
+  const date = useGetDate2();
+  const events = useEventsFor2(id, dateProp ?? date);
   const frameMap = useMemo(
     () => computeEventFrames(events, EVENT_BLOCK_WIDTH, mode),
     [events, mode, EVENT_BLOCK_WIDTH]
@@ -1184,7 +1221,7 @@ var EventBlocks = React18__default.memo(({
     (evt, index) => {
       const selected = isEventSelected?.(evt) ?? false;
       const disabled = isEventDisabled?.(evt) ?? false;
-      return /* @__PURE__ */ React18__default.createElement(
+      return /* @__PURE__ */ React19__default.createElement(
         Renderer,
         {
           key: `${evt.from}-${evt.to}-${index}`,
@@ -1201,8 +1238,89 @@ var EventBlocks = React18__default.memo(({
   );
 });
 var EventBlocks_default = EventBlocks;
-
-// src/components/Calendar.tsx
+var DaysComponent = ({ onResourcePress, activeResourceId, mode, date, APPOINTMENT_BLOCK_WIDTH }) => {
+  const { useResourceById: useResourceById2 } = useCalendarBinding();
+  const resource = useResourceById2(activeResourceId);
+  const titleFace = useResolvedFont({ fontWeight: "700" });
+  const subTitleFace = useResolvedFont({ fontWeight: "600" });
+  const isMultiDay = mode !== "day";
+  const visibleDayCount = isMultiDay ? mode === "week" ? 7 : 3 : 1;
+  const days = useMemo(
+    () => Array.from({ length: visibleDayCount }, (_, i) => addDays(date, i)),
+    [date, visibleDayCount]
+  );
+  return /* @__PURE__ */ React19.createElement(Row_default, null, /* @__PURE__ */ React19.createElement(Col_default, { style: { width: TIME_LABEL_WIDTH, alignItems: "center", paddingVertical: 4 } }, /* @__PURE__ */ React19.createElement(
+    StaffAvatar,
+    {
+      onPress: () => {
+        if (onResourcePress)
+          onResourcePress(resource);
+      },
+      name: resource?.name,
+      circleSize: TIME_LABEL_WIDTH - 12,
+      fontSize: 16,
+      image: resource?.avatar
+    }
+  ), /* @__PURE__ */ React19.createElement(
+    Text,
+    {
+      style: {
+        fontSize: 14,
+        fontFamily: titleFace,
+        fontWeight: "700"
+      },
+      numberOfLines: 1,
+      allowFontScaling: false
+    },
+    resource?.name
+  )), /* @__PURE__ */ React19.createElement(Row_default, { style: { flex: 1 } }, days.map((d, i) => {
+    const selected = isSameDay(d, /* @__PURE__ */ new Date());
+    return /* @__PURE__ */ React19.createElement(
+      Col_default,
+      {
+        style: {
+          alignItems: "center",
+          justifyContent: "center",
+          width: APPOINTMENT_BLOCK_WIDTH
+        },
+        space: 4,
+        key: i
+      },
+      /* @__PURE__ */ React19.createElement(Center_default, { style: {
+        backgroundColor: selected ? "#4d959c" : void 0,
+        width: 30,
+        height: 30,
+        borderRadius: 999
+      } }, /* @__PURE__ */ React19.createElement(
+        Text,
+        {
+          style: {
+            fontSize: 16,
+            fontFamily: subTitleFace,
+            fontWeight: "600",
+            color: selected ? "#fff" : void 0
+          },
+          numberOfLines: 1,
+          allowFontScaling: false
+        },
+        format(d, "d")
+      )),
+      /* @__PURE__ */ React19.createElement(
+        Text,
+        {
+          style: {
+            fontSize: 14,
+            fontFamily: subTitleFace,
+            fontWeight: "600"
+          },
+          numberOfLines: 1,
+          allowFontScaling: false
+        },
+        format(d, "EEE")
+      )
+    );
+  })));
+};
 var AnimatedFlashList = Animated2.createAnimatedComponent(FlashList);
 var CalendarInner = (props) => {
   const { width } = useWindowDimensions();
@@ -1210,7 +1328,7 @@ var CalendarInner = (props) => {
   const binding = useCalendarBinding();
   const {
     date,
-    numberOfColumns = 3,
+    numberOfColumns: numberOfColumnsProp = 3,
     startMinutes,
     hourHeight = 120,
     snapIntervalInMinutes = 5,
@@ -1223,17 +1341,26 @@ var CalendarInner = (props) => {
     onDisabledBlockPress,
     eventSlots,
     eventStyleOverrides,
-    overLappingLayoutMode = "stacked"
+    overLappingLayoutMode = "stacked",
+    mode = "day",
+    activeResourceId
   } = props;
+  const numberOfColumns = mode === "day" ? numberOfColumnsProp : mode === "week" ? 7 : 3;
+  const isMultiDay = mode !== "day";
+  const visibleDayCount = isMultiDay ? mode === "week" ? 7 : 3 : 1;
+  const days = useMemo(
+    () => Array.from({ length: visibleDayCount }, (_, i) => addDays(date, i)),
+    [date, visibleDayCount]
+  );
   const snapInterval = hourHeight / 60 * snapIntervalInMinutes;
-  const onPressRef = React18__default.useRef(onEventPress);
-  const onLongPressRef = React18__default.useRef(onEventLongPress);
+  const onPressRef = React19__default.useRef(onEventPress);
+  const onLongPressRef = React19__default.useRef(onEventLongPress);
   const internalOnLongPress = useRef(null);
-  const onDisabledBlockPressRef = React18__default.useRef(onDisabledBlockPress);
+  const onDisabledBlockPressRef = React19__default.useRef(onDisabledBlockPress);
   const selectedRef = useRef(props.isEventSelected);
   const disabledRef = useRef(props.isEventDisabled);
   const effectiveRenderer = useMemo(() => {
-    return (p) => /* @__PURE__ */ React18__default.createElement(
+    return (p) => /* @__PURE__ */ React19__default.createElement(
       EventBlock_default,
       {
         ...p,
@@ -1270,8 +1397,8 @@ var CalendarInner = (props) => {
   }, [props.isEventDisabled]);
   const rendererRef = useRef(effectiveRenderer);
   const stableRenderer = useCallback((p) => rendererRef.current(p), []);
-  const stableOnPress = React18__default.useCallback((e) => onPressRef.current?.(e), []);
-  const stableOnDisabledBlockPress = React18__default.useCallback((b) => onDisabledBlockPressRef.current?.(b), []);
+  const stableOnPress = React19__default.useCallback((e) => onPressRef.current?.(e), []);
+  const stableOnDisabledBlockPress = React19__default.useCallback((b) => onDisabledBlockPressRef.current?.(b), []);
   const { useGetSelectedEvent: useGetSelectedEvent2, useSetSelectedEvent: useSetSelectedEvent2, useSetDraggedEventDraft: useSetDraggedEventDraft2, useGetDraggedEventDraft: useGetDraggedEventDraft2 } = useCalendarBinding();
   const selectedEvent = useGetSelectedEvent2();
   const setSelectedEvent = useSetSelectedEvent2();
@@ -1280,6 +1407,8 @@ var CalendarInner = (props) => {
   const hourHeightRef = useRef(hourHeight);
   const resourcesRef = useRef(resources);
   const apptWidthRef = useRef(APPOINTMENT_BLOCK_WIDTH);
+  const isMultiDayRef = useRef(isMultiDay);
+  const daysRef = useRef(days);
   useEffect(() => {
     hourHeightRef.current = hourHeight;
   }, [hourHeight]);
@@ -1289,6 +1418,12 @@ var CalendarInner = (props) => {
   useEffect(() => {
     apptWidthRef.current = APPOINTMENT_BLOCK_WIDTH;
   }, [APPOINTMENT_BLOCK_WIDTH]);
+  useEffect(() => {
+    isMultiDayRef.current = isMultiDay;
+  }, [isMultiDay]);
+  useEffect(() => {
+    daysRef.current = days;
+  }, [days]);
   useEffect(() => {
     if (!selectedEvent) {
       setDraggedEventDraft(null);
@@ -1318,6 +1453,32 @@ var CalendarInner = (props) => {
   const triggerHaptic = useCallback(() => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
   }, []);
+  const resourceIds = useMemo(() => {
+    const ids = resources?.map((item) => item?.id) || [];
+    if (JSON.stringify(prevResourceIdsRef.current) !== JSON.stringify(ids)) {
+      prevResourceIdsRef.current = ids;
+    }
+    return prevResourceIdsRef.current;
+  }, [resources]);
+  const finalizeDrag = React19__default.useCallback((colIndex, adjustedTop, height) => {
+    const isMultiDay2 = mode !== "day";
+    const landedResourceId = !isMultiDay2 ? resourceIds[colIndex] : activeResourceId ?? resourceIds[0];
+    const landedDate = format(!isMultiDay2 ? date : days[colIndex], "yyyy-MM-dd");
+    setDraggedEventDraft({
+      event: selectedEvent,
+      // ensure this is not stale (store/ref)
+      from: positionToMinutes(adjustedTop, hourHeight),
+      to: positionToMinutes(adjustedTop + height, hourHeight),
+      resourceId: landedResourceId,
+      date: landedDate
+    });
+  }, [mode, resourceIds, activeResourceId, selectedEvent, hourHeight, setDraggedEventDraft, days]);
+  const columns = useMemo(() => {
+    if (!isMultiDay) {
+      return resourceIds.map((resourceId) => ({ kind: "resource", resourceId }));
+    }
+    return days.map((dayDate, dayIndex) => ({ kind: "day", dayIndex, dayDate }));
+  }, [isMultiDay, resourceIds, days]);
   const panGesture = Gesture.Pan().manualActivation(!isIOS).enabled(layout !== null).shouldCancelWhenOutside(false).onTouchesMove((_evt, stateManager) => {
     "worklet";
     if (isIOS) return;
@@ -1425,9 +1586,8 @@ var CalendarInner = (props) => {
     const finalXOnScreen = panXAbs.value;
     const absoluteX = finalXOnScreen + scrollX.value;
     const newStaffIndex = Math.floor((absoluteX - TIME_LABEL_WIDTH) / APPOINTMENT_BLOCK_WIDTH);
-    const clampedStaffIndex = Math.max(0, Math.min(newStaffIndex, resources.length - 1));
-    const endedResource = resources[clampedStaffIndex];
-    const finalPanXValue = TIME_LABEL_WIDTH + clampedStaffIndex * APPOINTMENT_BLOCK_WIDTH - scrollX.value + APPOINTMENT_BLOCK_WIDTH / 2;
+    const colIndex = Math.max(0, Math.min(newStaffIndex, columns.length - 1));
+    const finalPanXValue = TIME_LABEL_WIDTH + colIndex * APPOINTMENT_BLOCK_WIDTH - scrollX.value + APPOINTMENT_BLOCK_WIDTH / 2;
     panYAbs.value = withSpring(finalPanYValue);
     panXAbs.value = withSpring(finalPanXValue);
     if (!isPulling.value) {
@@ -1437,12 +1597,7 @@ var CalendarInner = (props) => {
     startedX.value = finalPanXValue;
     isPulling.value = false;
     isDragging.value = false;
-    runOnJS(setDraggedEventDraft)({
-      event: selectedEvent,
-      from: positionToMinutes(adjustedFinalEventTop, hourHeight),
-      to: positionToMinutes(adjustedFinalEventTop + eventHeight.value, hourHeight),
-      resourceId: endedResource?.id
-    });
+    runOnJS(finalizeDrag)(colIndex, adjustedFinalEventTop, eventHeight.value);
   });
   const scrollListTo = (x) => {
     flashListRef.current?.scrollToOffset({ offset: x, animated: false });
@@ -1507,10 +1662,17 @@ var CalendarInner = (props) => {
       startedY.value = panAbsValue;
       eventStartedTop.value = eventTop;
       const resources2 = resourcesRef.current;
+      const days2 = daysRef.current;
       const APPOINTMENT_BLOCK_WIDTH2 = apptWidthRef.current;
-      const staffIndex = resources2.findIndex((r) => r.id === event.resourceId);
+      const isMultiDay2 = isMultiDayRef.current;
       const leftmostColumnIndex = Math.round(scrollX.value / APPOINTMENT_BLOCK_WIDTH2);
-      const screenColumn = staffIndex - leftmostColumnIndex;
+      let absoluteColIndex;
+      if (!isMultiDay2) {
+        absoluteColIndex = findResourceIndexFor(event.resourceId, resources2?.map((r) => r.id));
+      } else {
+        absoluteColIndex = findDayIndexFor(event.date, days2);
+      }
+      const screenColumn = absoluteColIndex - leftmostColumnIndex;
       const selectedAppointmentStartedX = TIME_LABEL_WIDTH + APPOINTMENT_BLOCK_WIDTH2 / 2 + APPOINTMENT_BLOCK_WIDTH2 * screenColumn;
       panXAbs.value = selectedAppointmentStartedX;
       startedX.value = selectedAppointmentStartedX;
@@ -1533,18 +1695,13 @@ var CalendarInner = (props) => {
   });
   const flashListScrollHandler = useAnimatedScrollHandler({
     onScroll: (event) => {
-      const offsetX = event?.contentOffset?.x;
-      scrollTo(headerScrollViewRef, offsetX, 0, false);
-      scrollX.value = offsetX;
+      if (!isMultiDay) {
+        const offsetX = event?.contentOffset?.x;
+        scrollTo(headerScrollViewRef, offsetX, 0, false);
+        scrollX.value = offsetX;
+      }
     }
   });
-  const resourceIds = useMemo(() => {
-    const ids = resources?.map((item) => item?.id) || [];
-    if (JSON.stringify(prevResourceIdsRef.current) !== JSON.stringify(ids)) {
-      prevResourceIdsRef.current = ids;
-    }
-    return prevResourceIdsRef.current;
-  }, [resources]);
   const handleBlockPress = useCallback((resourceId, time) => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
     const resource = resources.find((r) => r.id === resourceId);
@@ -1564,34 +1721,38 @@ var CalendarInner = (props) => {
   useEffect(() => {
     dateRef.current = date;
   }, [date]);
-  const renderItem = useCallback(({ item }) => {
-    return /* @__PURE__ */ React18__default.createElement(View, { key: item, style: { width: APPOINTMENT_BLOCK_WIDTH } }, /* @__PURE__ */ React18__default.createElement(View, { style: styles7.timelineContainer }, /* @__PURE__ */ React18__default.createElement(
+  const renderItem = useCallback(({ item, index }) => {
+    const rid = !isMultiDay ? item : activeResourceId ?? resourceIds[0];
+    const dayDate = !isMultiDay ? void 0 : item.dayDate;
+    return /* @__PURE__ */ React19__default.createElement(View, { key: index, style: { width: APPOINTMENT_BLOCK_WIDTH } }, /* @__PURE__ */ React19__default.createElement(View, { style: styles7.timelineContainer }, /* @__PURE__ */ React19__default.createElement(
       EventGridBlocksSkia,
       {
-        dateRef,
         hourHeight,
         APPOINTMENT_BLOCK_WIDTH,
-        handleBlockPress: (date2) => handleBlockPress(item, date2)
+        handleBlockPress: (time) => handleBlockPress(rid, combineDateAndTime(dayDate ?? dateRef.current, time))
       }
-    ), /* @__PURE__ */ React18__default.createElement(
+    ), /* @__PURE__ */ React19__default.createElement(
       DisabledIntervals_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         APPOINTMENT_BLOCK_WIDTH,
         hourHeight
       }
-    ), /* @__PURE__ */ React18__default.createElement(
+    ), /* @__PURE__ */ React19__default.createElement(
       DisabledBlocks_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         APPOINTMENT_BLOCK_WIDTH,
         hourHeight,
         onDisabledBlockPress: stableOnDisabledBlockPress
       }
-    ), /* @__PURE__ */ React18__default.createElement(
+    ), /* @__PURE__ */ React19__default.createElement(
       EventBlocks_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         EVENT_BLOCK_WIDTH: APPOINTMENT_BLOCK_WIDTH,
         hourHeight,
         onPress: stableOnPress,
@@ -1603,6 +1764,8 @@ var CalendarInner = (props) => {
       }
     )));
   }, [
+    isMultiDay,
+    activeResourceId,
     resourceIds,
     APPOINTMENT_BLOCK_WIDTH,
     hourHeight,
@@ -1615,7 +1778,7 @@ var CalendarInner = (props) => {
     stableOnDisabledBlockPress,
     dateRef
   ]);
-  return /* @__PURE__ */ React18__default.createElement(React18__default.Fragment, null, /* @__PURE__ */ React18__default.createElement(StoreFeeder, { resources, store: binding }), /* @__PURE__ */ React18__default.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React18__default.createElement(View, null, /* @__PURE__ */ React18__default.createElement(
+  return /* @__PURE__ */ React19__default.createElement(React19__default.Fragment, null, /* @__PURE__ */ React19__default.createElement(StoreFeeder, { resources, store: binding, baseDate: date }), /* @__PURE__ */ React19__default.createElement(View, { style: { flex: 1 } }, !isMultiDay ? /* @__PURE__ */ React19__default.createElement(View, null, /* @__PURE__ */ React19__default.createElement(
     Animated2.ScrollView,
     {
       style: { backgroundColor: "white" },
@@ -1631,15 +1794,25 @@ var CalendarInner = (props) => {
       ref: headerScrollViewRef,
       scrollEnabled: false
     },
-    /* @__PURE__ */ React18__default.createElement(
+    /* @__PURE__ */ React19__default.createElement(
       ResourcesComponent,
       {
+        date: dateRef.current,
         resourceIds,
         APPOINTMENT_BLOCK_WIDTH,
         onResourcePress
       }
     )
-  )), /* @__PURE__ */ React18__default.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React18__default.createElement(
+  )) : /* @__PURE__ */ React19__default.createElement(
+    DaysComponent,
+    {
+      APPOINTMENT_BLOCK_WIDTH,
+      date,
+      mode,
+      activeResourceId: activeResourceId ?? resourceIds[0],
+      onResourcePress
+    }
+  ), /* @__PURE__ */ React19__default.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React19__default.createElement(
     Animated2.View,
     {
       key: numberOfColumns + width + hourHeight,
@@ -1649,7 +1822,7 @@ var CalendarInner = (props) => {
         overflow: "hidden"
       }
     },
-    selectedEvent && /* @__PURE__ */ React18__default.createElement(View, { style: {
+    selectedEvent && /* @__PURE__ */ React19__default.createElement(View, { style: {
       position: "absolute",
       top: 0,
       left: TIME_LABEL_WIDTH,
@@ -1659,7 +1832,7 @@ var CalendarInner = (props) => {
       backgroundColor: "rgba(0, 0, 0, 0.1)",
       zIndex: 1
     } }),
-    /* @__PURE__ */ React18__default.createElement(
+    /* @__PURE__ */ React19__default.createElement(
       Animated2.ScrollView,
       {
         scrollEnabled: !selectedEvent,
@@ -1672,7 +1845,7 @@ var CalendarInner = (props) => {
         style: styles7.container,
         contentContainerStyle: { flexDirection: "row", paddingRight: TIME_LABEL_WIDTH }
       },
-      /* @__PURE__ */ React18__default.createElement(
+      /* @__PURE__ */ React19__default.createElement(
         TimeLabels,
         {
           startMinutes,
@@ -1684,7 +1857,7 @@ var CalendarInner = (props) => {
           ref: verticalScrollViewRef
         }
       ),
-      /* @__PURE__ */ React18__default.createElement(
+      /* @__PURE__ */ React19__default.createElement(
         AnimatedFlashList,
         {
           extraData: numberOfColumns + width + hourHeight + (overLappingLayoutMode === "stacked" ? 1 : 0),
@@ -1693,7 +1866,7 @@ var CalendarInner = (props) => {
           onScroll: flashListScrollHandler,
           estimatedItemSize: APPOINTMENT_BLOCK_WIDTH,
           removeClippedSubviews: true,
-          data: resourceIds,
+          data: !isMultiDay ? resourceIds : columns,
           horizontal: true,
           renderItem,
           keyExtractor: (item, index) => index + "",
@@ -1703,7 +1876,7 @@ var CalendarInner = (props) => {
         }
       )
     ),
-    selectedEvent && /* @__PURE__ */ React18__default.createElement(
+    selectedEvent && /* @__PURE__ */ React19__default.createElement(
       DraggableEvent,
       {
         selectedEvent,
@@ -1720,7 +1893,7 @@ var CalendarInner = (props) => {
   ))));
 };
 var Calendar = ({ theme, ...rest }) => {
-  return /* @__PURE__ */ React18__default.createElement(CalendarThemeProvider, { theme }, /* @__PURE__ */ React18__default.createElement(CalendarInner, { ...rest }));
+  return /* @__PURE__ */ React19__default.createElement(CalendarThemeProvider, { theme }, /* @__PURE__ */ React19__default.createElement(CalendarInner, { ...rest }));
 };
 var styles7 = StyleSheet.create({
   container: {