react-native-resource-calendar 1.0.7 → 1.0.9

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React18 = require('react');
+var React19 = require('react');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var Animated2 = require('react-native-reanimated');
 var reactNative = require('react-native');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
+var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
 var Animated2__default = /*#__PURE__*/_interopDefault(Animated2);
 var Haptics__namespace = /*#__PURE__*/_interopNamespace(Haptics);
 var Svg__default = /*#__PURE__*/_interopDefault(Svg);
@@ -296,8 +296,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 === dateFns.format(d, "yyyy-MM-dd"))
+));
 var Col = ({ children, divider, space, style }) => {
-  return /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: [{ flexDirection: "column" }, style] }, React18__namespace.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, { key: index }, child, index !== React18__namespace.default.Children.toArray(children).length - 1 && divider, index !== React18__namespace.default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: { height: space, width: "100%" } }))));
+  return /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: [{ flexDirection: "column" }, style] }, React19__namespace.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, { key: index }, child, index !== React19__namespace.default.Children.toArray(children).length - 1 && divider, index !== React19__namespace.default.Children.toArray(children).length - 1 && /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: { height: space, width: "100%" } }))));
 };
 var Col_default = Col;
 
@@ -326,8 +334,8 @@ var defaultTheme = {
     fontFamily: "System"
   }
 };
-var ThemeCtx = React18.createContext(defaultTheme);
-var useCalendarTheme = () => React18.useContext(ThemeCtx);
+var ThemeCtx = React19.createContext(defaultTheme);
+var useCalendarTheme = () => React19.useContext(ThemeCtx);
 var useResolvedFont = (overrides) => {
   const { typography } = useCalendarTheme();
   const family = overrides?.fontFamily ?? typography?.fontFamily ?? "System";
@@ -341,11 +349,11 @@ var CalendarThemeProvider = ({ theme, children }) => {
     ...theme,
     typography: { ...defaultTheme.typography, ...theme?.typography }
   };
-  return /* @__PURE__ */ React18__namespace.default.createElement(ThemeCtx.Provider, { value: mergedTheme }, children);
+  return /* @__PURE__ */ React19__namespace.default.createElement(ThemeCtx.Provider, { value: mergedTheme }, children);
 };
 
 // src/components/TimeLabels.tsx
-var TimeLabels = React18__namespace.forwardRef(({
+var TimeLabels = React19__namespace.forwardRef(({
   timezone,
   hourHeight = 120,
   startMinutes = 0,
@@ -354,8 +362,8 @@ var TimeLabels = React18__namespace.forwardRef(({
   layout
 }, ref) => {
   const isToday = dateFns.isSameDay(/* @__PURE__ */ new Date(), date);
-  const [currentTimeYPosition, setCurrentTimeYPosition] = React18.useState(timeToYPosition(getCurrentTimeInMinutes(timezone), hourHeight));
-  const [currentTime, setCurrentTime] = React18.useState(dateFns.format(dateFnsTz.toZonedTime(/* @__PURE__ */ new Date(), timezone), "h:mm"));
+  const [currentTimeYPosition, setCurrentTimeYPosition] = React19.useState(timeToYPosition(getCurrentTimeInMinutes(timezone), hourHeight));
+  const [currentTime, setCurrentTime] = React19.useState(dateFns.format(dateFnsTz.toZonedTime(/* @__PURE__ */ new Date(), timezone), "h:mm"));
   const APPOINTMENT_BLOCK_HEIGHT = hourHeight / 4;
   const updateCurrentTimeYPosition = () => {
     setCurrentTimeYPosition(timeToYPosition(getCurrentTimeInMinutes(timezone), hourHeight));
@@ -364,7 +372,7 @@ var TimeLabels = React18__namespace.forwardRef(({
     setCurrentTime(dateFns.format(dateFnsTz.toZonedTime(/* @__PURE__ */ new Date(), timezone), "h:mm"));
   };
   const titleFace = useResolvedFont({ fontWeight: "700" });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     const update = () => {
       updateCurrentTime();
       updateCurrentTimeYPosition();
@@ -373,7 +381,7 @@ var TimeLabels = React18__namespace.forwardRef(({
     const intervalId = setInterval(update, 300);
     return () => clearInterval(intervalId);
   }, [timezone]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     reactNative.InteractionManager.runAfterInteractions(() => {
       let pos = isToday ? currentTimeYPosition - 240 : timeToYPosition(startMinutes, hourHeight);
       if (ref.current) {
@@ -385,7 +393,7 @@ var TimeLabels = React18__namespace.forwardRef(({
       }
     });
   }, [date, isToday, APPOINTMENT_BLOCK_HEIGHT, startMinutes, hourHeight]);
-  return /* @__PURE__ */ React18__namespace.createElement(React18__namespace.Fragment, null, /* @__PURE__ */ React18__namespace.createElement(Col_default, null, Array.from({ length: 24 }).map((_, index) => /* @__PURE__ */ React18__namespace.createElement(reactNative.View, { key: index, style: [styles.timeLabel, { height: hourHeight }] }, /* @__PURE__ */ React18__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, null, /* @__PURE__ */ React19__namespace.createElement(Col_default, null, Array.from({ length: 24 }).map((_, index) => /* @__PURE__ */ React19__namespace.createElement(reactNative.View, { key: index, style: [styles.timeLabel, { height: hourHeight }] }, /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -397,7 +405,7 @@ var TimeLabels = React18__namespace.forwardRef(({
       }
     },
     indexToDate(index).split(" ")[0]
-  ), /* @__PURE__ */ React18__namespace.createElement(
+  ), /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -409,10 +417,10 @@ var TimeLabels = React18__namespace.forwardRef(({
       }
     },
     indexToDate(index).split(" ")[1]
-  ))), isToday && /* @__PURE__ */ React18__namespace.createElement(reactNative.View, { style: [styles.currentTime, {
+  ))), isToday && /* @__PURE__ */ React19__namespace.createElement(reactNative.View, { style: [styles.currentTime, {
     top: currentTimeYPosition - 13,
     width: TIME_LABEL_WIDTH
-  }] }, /* @__PURE__ */ React18__namespace.createElement(
+  }] }, /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -425,7 +433,7 @@ var TimeLabels = React18__namespace.forwardRef(({
       }
     },
     currentTime
-  ))), isToday && /* @__PURE__ */ React18__namespace.createElement(reactNative.View, { style: [styles.currentTimeLine, {
+  ))), isToday && /* @__PURE__ */ React19__namespace.createElement(reactNative.View, { style: [styles.currentTimeLine, {
     pointerEvents: "none",
     top: currentTimeYPosition,
     width: totalTimelineWidth,
@@ -461,11 +469,11 @@ var Hidden = ({ isHidden, children }) => {
   if (isHidden) {
     return null;
   }
-  return /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, null, children);
+  return /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, null, children);
 };
 var Hidden_default = Hidden;
 var Center = ({ children, style }) => {
-  return /* @__PURE__ */ React18__namespace.default.createElement(
+  return /* @__PURE__ */ React19__namespace.default.createElement(
     reactNative.View,
     {
       style: [{
@@ -486,7 +494,7 @@ var Badge = ({
   textColor = "white"
 }) => {
   const titleFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: [styles2.badge, { backgroundColor: color }, style] }, children ? children : /* @__PURE__ */ React18__namespace.default.createElement(
+  return /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: [styles2.badge, { backgroundColor: color }, style] }, children ? children : /* @__PURE__ */ React19__namespace.default.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -510,13 +518,16 @@ var styles2 = reactNative.StyleSheet.create({
 });
 var Badge_default = Badge;
 var createCalendarStore = () => zustand.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;
@@ -529,39 +540,46 @@ var createCalendarStore = () => zustand.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 = React18.createContext(null);
+var StoreContext = React19.createContext(null);
 var Provider = ({ children }) => {
-  const ref = React18.useRef(void 0);
+  const ref = React19.useRef(void 0);
   if (!ref.current) ref.current = createCalendarStore();
-  return /* @__PURE__ */ React18__namespace.default.createElement(StoreContext.Provider, { value: ref.current }, children);
+  return /* @__PURE__ */ React19__namespace.default.createElement(StoreContext.Provider, { value: ref.current }, children);
 };
 var useBound = (selector, eq) => {
-  const store = React18.useContext(StoreContext);
+  const store = React19.useContext(StoreContext);
   if (!store) throw new Error("Calendar store used outside of Provider");
   return traditional.useStoreWithEqualityFn(store, 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.shallow);
+var useEventsFor = (resourceId, dayDate) => useBound((s) => {
+  const key = dateFns.format(dayDate, "yyyy-MM-dd");
+  return s.eventsByDay?.[key]?.[resourceId] ?? [];
+}, shallow.shallow);
 var useGetDraggedEventDraft = () => useBound((s) => s.draggedEventDraft);
-var useDisabledBlocksFor = (resourceId) => useBound((s) => s.disabledBlocksByResource[resourceId] ?? [], shallow.shallow);
-var useDisabledIntervalsFor = (resourceId) => useBound((s) => s.disabledIntervalsByResource[resourceId] ?? [], shallow.shallow);
+var useDisabledBlocksFor = (resourceId, dayDate) => useBound((s) => {
+  const key = dateFns.format(dayDate, "yyyy-MM-dd");
+  return s.disabledBlocksByDay?.[key]?.[resourceId] ?? [];
+}, shallow.shallow);
+var useDisabledIntervalsFor = (resourceId, dayDate) => useBound((s) => {
+  const key = dateFns.format(dayDate, "yyyy-MM-dd");
+  return s.disabledIntervalsByDay?.[key]?.[resourceId] ?? [];
+}, shallow.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,
@@ -569,7 +587,9 @@ var zustandBinding = {
   useDisabledBlocksFor,
   useDisabledIntervalsFor,
   useUpsertResources,
-  useSetDayData,
+  useSetDate,
+  useGetDate,
+  useSetDayDataFor,
   useGetSelectedEvent,
   useSetSelectedEvent,
   useGetDraggedEventDraft,
@@ -577,28 +597,28 @@ var zustandBinding = {
 };
 
 // src/store/bindings/BindingProvider.tsx
-var BindingCtx = React18.createContext(null);
+var BindingCtx = React19.createContext(null);
 var useCalendarBinding = () => {
-  const ctx = React18.useContext(BindingCtx);
+  const ctx = React19.useContext(BindingCtx);
   if (!ctx) throw new Error("useCalendarBinding must be used within <CalendarBindingProvider>");
   return ctx;
 };
 var CalendarBindingProvider = ({ binding, children }) => {
   const active = binding ?? zustandBinding;
   const StoreProvider = active.Provider;
-  return /* @__PURE__ */ React18__namespace.default.createElement(BindingCtx.Provider, { value: active }, /* @__PURE__ */ React18__namespace.default.createElement(StoreProvider, null, children));
+  return /* @__PURE__ */ React19__namespace.default.createElement(BindingCtx.Provider, { value: active }, /* @__PURE__ */ React19__namespace.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__namespace.createElement(Col_default, { style: [{
+  return /* @__PURE__ */ React19__namespace.createElement(Col_default, { style: [{
     alignItems: "center",
     width: APPOINTMENT_BLOCK_WIDTH
-  }] }, /* @__PURE__ */ React18__namespace.createElement(reactNative.View, { style: { position: "relative" } }, /* @__PURE__ */ React18__namespace.createElement(
+  }] }, /* @__PURE__ */ React19__namespace.createElement(reactNative.View, { style: { position: "relative" } }, /* @__PURE__ */ React19__namespace.createElement(
     StaffAvatar,
     {
       onPress: () => {
@@ -606,12 +626,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__namespace.createElement(
+  )), /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       style: {
@@ -625,11 +645,12 @@ var ResourceComponent = ({ id, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
     resource?.name
   ));
 };
-var ResourcesComponent = ({ resourceIds, onResourcePress, APPOINTMENT_BLOCK_WIDTH }) => {
-  return /* @__PURE__ */ React18__namespace.createElement(React18__namespace.Fragment, null, resourceIds?.map((id) => {
-    return /* @__PURE__ */ React18__namespace.createElement(
+var ResourcesComponent = ({ resourceIds, onResourcePress, APPOINTMENT_BLOCK_WIDTH, date }) => {
+  return /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, null, resourceIds?.map((id) => {
+    return /* @__PURE__ */ React19__namespace.createElement(
       ResourceComponent,
       {
+        date,
         key: id,
         id,
         APPOINTMENT_BLOCK_WIDTH,
@@ -652,17 +673,17 @@ function StaffAvatar({
   textColor
 }) {
   const titleFace = useResolvedFont({ fontWeight: "700" });
-  return /* @__PURE__ */ React18__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement(
     reactNative.TouchableOpacity,
     {
       disabled: lodash.isUndefined(onPress),
       onPress,
       style: containerStyle
     },
-    /* @__PURE__ */ React18__namespace.createElement(Center_default, { style: {
+    /* @__PURE__ */ React19__namespace.createElement(Center_default, { style: {
       borderRadius: 9999,
       backgroundColor: ringColor
-    } }, /* @__PURE__ */ React18__namespace.createElement(Hidden_default, { isHidden: lodash.isUndefined(badge) || Number(badge) == 0 }, /* @__PURE__ */ React18__namespace.createElement(
+    } }, /* @__PURE__ */ React19__namespace.createElement(Hidden_default, { isHidden: lodash.isUndefined(badge) || Number(badge) == 0 }, /* @__PURE__ */ React19__namespace.createElement(
       reactNative.View,
       {
         style: [{
@@ -675,7 +696,7 @@ function StaffAvatar({
           padding: 2
         }, badgeStyle]
       },
-      /* @__PURE__ */ React18__namespace.createElement(
+      /* @__PURE__ */ React19__namespace.createElement(
         Badge_default,
         {
           fontSize: 12,
@@ -683,18 +704,18 @@ function StaffAvatar({
           color: "#4d959c"
         }
       )
-    )), /* @__PURE__ */ React18__namespace.createElement(Center_default, { style: {
+    )), /* @__PURE__ */ React19__namespace.createElement(Center_default, { style: {
       margin: 2,
       borderRadius: 9999,
       backgroundColor: "white"
-    } }, /* @__PURE__ */ React18__namespace.createElement(Center_default, { style: {
+    } }, /* @__PURE__ */ React19__namespace.createElement(Center_default, { style: {
       margin: 2,
       borderRadius: 9999,
       height: circleSize,
       width: circleSize,
       backgroundColor: avatarColor || "#C9E5E8",
       overflow: "hidden"
-    } }, image ? /* @__PURE__ */ React18__namespace.createElement(
+    } }, image ? /* @__PURE__ */ React19__namespace.createElement(
       reactNative.Image,
       {
         resizeMode: "cover",
@@ -705,7 +726,7 @@ function StaffAvatar({
           ...reactNative.StyleSheet.absoluteFillObject
         }
       }
-    ) : /* @__PURE__ */ React18__namespace.createElement(
+    ) : /* @__PURE__ */ React19__namespace.createElement(
       reactNative.Text,
       {
         allowFontScaling: false,
@@ -721,14 +742,13 @@ function StaffAvatar({
   );
 }
 var EventGridBlocksSkia = ({
-  dateRef,
   handleBlockPress,
   hourHeight,
   APPOINTMENT_BLOCK_WIDTH
 }) => {
   const rowHeight = hourHeight / 4;
-  const [pressedRow, setPressedRow] = React18__namespace.useState(null);
-  const timeLabels = React18.useMemo(() => {
+  const [pressedRow, setPressedRow] = React19__namespace.useState(null);
+  const timeLabels = React19.useMemo(() => {
     const out = [];
     for (let h = 0; h < 24; h++) {
       for (let q = 0; q < 4; q++) {
@@ -740,7 +760,7 @@ var EventGridBlocksSkia = ({
     }
     return out;
   }, []);
-  const rects = React18.useMemo(
+  const rects = React19.useMemo(
     () => timeLabels.map((_, row) => ({
       x: 0,
       y: row * rowHeight,
@@ -754,21 +774,20 @@ var EventGridBlocksSkia = ({
   const firstRects = rects.slice(0, midIndex);
   const secondRects = rects.slice(midIndex);
   const segmentHeight = rowHeight * firstRects.length;
-  const onSlotPress = React18__namespace.useCallback(
+  const onSlotPress = React19__namespace.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__namespace.useCallback((row) => {
+  const onPressBegin = React19__namespace.useCallback((row) => {
     setPressedRow(row);
   }, []);
-  const onTouchesUp = React18__namespace.useCallback(() => {
+  const onTouchesUp = React19__namespace.useCallback(() => {
     setPressedRow(null);
   }, []);
   const longPressGesture = reactNativeGestureHandler.Gesture.LongPress().onBegin((e) => {
@@ -781,7 +800,7 @@ var EventGridBlocksSkia = ({
     "worklet";
     Animated2.runOnJS(onTouchesUp)();
   });
-  return /* @__PURE__ */ React18__namespace.createElement(reactNativeGestureHandler.GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React18__namespace.createElement(reactNative.View, null, /* @__PURE__ */ React18__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18__namespace.createElement(React18__namespace.Fragment, { key: idx }, /* @__PURE__ */ React18__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement(reactNativeGestureHandler.GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React19__namespace.createElement(reactNative.View, null, /* @__PURE__ */ React19__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, { key: idx }, /* @__PURE__ */ React19__namespace.createElement(
     reactNativeSkia.Rect,
     {
       x,
@@ -791,7 +810,7 @@ var EventGridBlocksSkia = ({
       color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
       style: "fill"
     }
-  ), /* @__PURE__ */ React18__namespace.createElement(reactNativeSkia.Line, { p1: { x, y: y + h }, p2: { x: x + w, y: y + h }, color: "#ddd", strokeWidth: 1 })))), /* @__PURE__ */ React18__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, secondRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React18__namespace.createElement(React18__namespace.Fragment, { key: idx }, /* @__PURE__ */ React18__namespace.createElement(
+  ), /* @__PURE__ */ React19__namespace.createElement(reactNativeSkia.Line, { p1: { x, y: y + h }, p2: { x: x + w, y: y + h }, color: "#ddd", strokeWidth: 1 })))), /* @__PURE__ */ React19__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, secondRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, { key: idx }, /* @__PURE__ */ React19__namespace.createElement(
     reactNativeSkia.Rect,
     {
       x,
@@ -801,7 +820,7 @@ var EventGridBlocksSkia = ({
       color: pressedRow === row ? "rgba(240,240,240,0.3)" : "rgba(240,240,240,0.6)",
       style: "fill"
     }
-  ), /* @__PURE__ */ React18__namespace.createElement(
+  ), /* @__PURE__ */ React19__namespace.createElement(
     reactNativeSkia.Line,
     {
       p1: { x, y: y - segmentHeight + h },
@@ -811,36 +830,50 @@ var EventGridBlocksSkia = ({
     }
   ))))));
 };
-var StoreFeeder = ({ store, resources }) => {
+var StoreFeeder = ({ store, resources, baseDate }) => {
   const upsertResources = store.useUpsertResources();
-  const setDayData = store.useSetDayData();
-  React18.useEffect(() => {
+  const setDayDataFor = store.useSetDayDataFor();
+  const setDate = store.useSetDate();
+  const baseDateKey = React19.useMemo(() => dateFns.format(baseDate, "yyyy-MM-dd"), [baseDate]);
+  React19.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__namespace.default.createElement(reactNative.View, { style: [styles3.disabledBlock, { width, top, height }] }, /* @__PURE__ */ React18__namespace.default.createElement(Svg__default.default, { width, height: "100%" }, /* @__PURE__ */ React18__namespace.default.createElement(Svg.Defs, null, /* @__PURE__ */ React18__namespace.default.createElement(Svg.Pattern, { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "10", height: "10" }, /* @__PURE__ */ React18__namespace.default.createElement(Svg.Line, { x1: "0", y1: "0", x2: "10", y2: "10", stroke: "rgba(150, 150, 150, 0.8)", strokeWidth: "1" }))), /* @__PURE__ */ React18__namespace.default.createElement(native.Rect, { width, height: "100%", fill: "url(#diagonalHatch)" })));
+  return /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: [styles3.disabledBlock, { width, top, height }] }, /* @__PURE__ */ React19__namespace.default.createElement(Svg__default.default, { width, height: "100%" }, /* @__PURE__ */ React19__namespace.default.createElement(Svg.Defs, null, /* @__PURE__ */ React19__namespace.default.createElement(Svg.Pattern, { id: "diagonalHatch", patternUnits: "userSpaceOnUse", width: "10", height: "10" }, /* @__PURE__ */ React19__namespace.default.createElement(Svg.Line, { x1: "0", y1: "0", x2: "10", y2: "10", stroke: "rgba(150, 150, 150, 0.8)", strokeWidth: "1" }))), /* @__PURE__ */ React19__namespace.default.createElement(native.Rect, { width, height: "100%", fill: "url(#diagonalHatch)" })));
 };
-var DisabledIntervals = React18__namespace.default.memo(({ id, APPOINTMENT_BLOCK_WIDTH, hourHeight }) => {
-  const { useDisabledIntervalsFor: useDisabledIntervalsFor2 } = useCalendarBinding();
-  const disabledIntervals = useDisabledIntervalsFor2(id);
-  return /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, null, disabledIntervals.map(
+var DisabledIntervals = React19__namespace.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__namespace.default.createElement(React19__namespace.default.Fragment, null, disabledIntervals.map(
     (disabledInterval, index) => {
-      return /* @__PURE__ */ React18__namespace.default.createElement(
+      return /* @__PURE__ */ React19__namespace.default.createElement(
         DisabledInterval,
         {
           key: `${index}-${disabledInterval.from}-${disabledInterval.to}`,
@@ -860,7 +893,7 @@ var styles3 = reactNative.StyleSheet.create({
 });
 var DisabledIntervals_default = DisabledIntervals;
 var Row = ({ children, divider, space, style, ...props }) => {
-  return /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: [{ flexDirection: "row" }, style], ...props }, React18__namespace.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, { key: index }, child, index !== React18__namespace.default.Children.toArray(children).length - 1 && divider, index !== React18__namespace.default.Children.toArray(children).length - 1 && /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: { width: space, height: "100%" } }))));
+  return /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: [{ flexDirection: "row" }, style], ...props }, React19__namespace.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, { key: index }, child, index !== React19__namespace.default.Children.toArray(children).length - 1 && divider, index !== React19__namespace.default.Children.toArray(children).length - 1 && /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: { width: space, height: "100%" } }))));
 };
 var Row_default = Row;
 var DisabledBlockComponent = ({
@@ -881,7 +914,7 @@ var DisabledBlockComponent = ({
     borderColor: "rgba(0,0,0,0.12)"
   };
   const titleFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__namespace.default.createElement(
+  return /* @__PURE__ */ React19__namespace.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: [styles4.event, dynamicStyle],
@@ -889,7 +922,7 @@ var DisabledBlockComponent = ({
         onDisabledBlockPress && onDisabledBlockPress(disabledBlock);
       }
     },
-    /* @__PURE__ */ React18__namespace.default.createElement(Col_default, { style: { position: "relative" } }, /* @__PURE__ */ React18__namespace.default.createElement(Row_default, { style: { height: 18 } }, /* @__PURE__ */ React18__namespace.default.createElement(
+    /* @__PURE__ */ React19__namespace.default.createElement(Col_default, { style: { position: "relative" } }, /* @__PURE__ */ React19__namespace.default.createElement(Row_default, { style: { height: 18 } }, /* @__PURE__ */ React19__namespace.default.createElement(
       reactNative.Text,
       {
         allowFontScaling: false,
@@ -902,7 +935,7 @@ var DisabledBlockComponent = ({
       minutesToTime(disabledBlock?.from),
       " - ",
       minutesToTime(disabledBlock?.to)
-    )), /* @__PURE__ */ React18__namespace.default.createElement(
+    )), /* @__PURE__ */ React19__namespace.default.createElement(
       reactNative.Text,
       {
         allowFontScaling: false,
@@ -916,21 +949,23 @@ var DisabledBlockComponent = ({
     ))
   );
 };
-var DisabledBlocks = React18__namespace.default.memo(({
+var DisabledBlocks = React19__namespace.default.memo(({
   id,
   APPOINTMENT_BLOCK_WIDTH,
   hourHeight,
-  onDisabledBlockPress
+  onDisabledBlockPress,
+  date: dateProp
 }) => {
-  const { useDisabledBlocksFor: useDisabledBlocksFor2 } = useCalendarBinding();
-  const disabledBlocks = useDisabledBlocksFor2(id);
-  const layoutMap = React18.useMemo(() => {
+  const { useDisabledBlocksFor: useDisabledBlocksFor2, useGetDate: useGetDate2 } = useCalendarBinding();
+  const date = useGetDate2();
+  const disabledBlocks = useDisabledBlocksFor2(id, dateProp ?? date);
+  const layoutMap = React19.useMemo(() => {
     return columnsToPixels(computeDisabledBlockColumns(disabledBlocks), APPOINTMENT_BLOCK_WIDTH);
   }, [disabledBlocks]);
-  return /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, null, disabledBlocks.map(
+  return /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, null, disabledBlocks.map(
     (disabledBlock, index) => {
       const key = disabledBlock.id;
-      return /* @__PURE__ */ React18__namespace.default.createElement(
+      return /* @__PURE__ */ React19__namespace.default.createElement(
         DisabledBlockComponent,
         {
           hourHeight,
@@ -956,7 +991,7 @@ var styles4 = reactNative.StyleSheet.create({
   }
 });
 var DisabledBlocks_default = DisabledBlocks;
-var EventBlock = React18__namespace.default.memo(({
+var EventBlock = React19__namespace.default.memo(({
   event,
   onLongPress,
   onPress,
@@ -990,7 +1025,7 @@ var EventBlock = React18__namespace.default.memo(({
   const Body = slots?.Body;
   const titleFace = useResolvedFont({ fontWeight: "700" });
   const timeFace = useResolvedFont({ fontWeight: "600" });
-  return /* @__PURE__ */ React18__namespace.default.createElement(
+  return /* @__PURE__ */ React19__namespace.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: [styles5.event, resolved?.container, dynamicStyle],
@@ -1002,7 +1037,7 @@ var EventBlock = React18__namespace.default.memo(({
         onLongPress && onLongPress(event);
       }
     },
-    /* @__PURE__ */ React18__namespace.default.createElement(Hidden_default, { isHidden: !disabled }, /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: {
+    /* @__PURE__ */ React19__namespace.default.createElement(Hidden_default, { isHidden: !disabled }, /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: {
       position: "absolute",
       top: 0,
       width: "150%",
@@ -1010,7 +1045,7 @@ var EventBlock = React18__namespace.default.memo(({
       zIndex: 1,
       backgroundColor: "rgba(255, 255, 255, 0.5)"
     } })),
-    /* @__PURE__ */ React18__namespace.default.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18__namespace.default.createElement(
+    /* @__PURE__ */ React19__namespace.default.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React19__namespace.default.createElement(
       reactNative.TextInput,
       {
         editable: false,
@@ -1026,7 +1061,7 @@ var EventBlock = React18__namespace.default.memo(({
         },
         defaultValue: `${start} - ${end}`
       }
-    ), Body ? /* @__PURE__ */ React18__namespace.default.createElement(Body, { event, ctx: { hourHeight } }) : /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, null, /* @__PURE__ */ React18__namespace.default.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18__namespace.default.createElement(
+    ), Body ? /* @__PURE__ */ React19__namespace.default.createElement(Body, { event, ctx: { hourHeight } }) : /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, null, /* @__PURE__ */ React19__namespace.default.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React19__namespace.default.createElement(
       reactNative.Text,
       {
         allowFontScaling: false,
@@ -1037,7 +1072,7 @@ var EventBlock = React18__namespace.default.memo(({
         }, resolved?.title]
       },
       event?.title
-    )), /* @__PURE__ */ React18__namespace.default.createElement(
+    )), /* @__PURE__ */ React19__namespace.default.createElement(
       reactNative.Text,
       {
         allowFontScaling: false,
@@ -1048,10 +1083,10 @@ var EventBlock = React18__namespace.default.memo(({
         }, resolved?.desc]
       },
       event?.description
-    )), /* @__PURE__ */ React18__namespace.default.createElement(Row_default, { style: {
+    )), /* @__PURE__ */ React19__namespace.default.createElement(Row_default, { style: {
       position: "absolute",
       right: 2
-    }, space: 2 }, TopRight ? /* @__PURE__ */ React18__namespace.default.createElement(TopRight, { event, ctx: { hourHeight } }) : null))
+    } }, TopRight ? /* @__PURE__ */ React19__namespace.default.createElement(TopRight, { event, ctx: { hourHeight } }) : null))
   );
 });
 var styles5 = reactNative.StyleSheet.create({
@@ -1111,25 +1146,25 @@ var DraggableEvent = ({
         }
       ]
     };
-  }, [selectedEvent, eventHeight, APPOINTMENT_BLOCK_WIDTH]);
-  const initialDisplayTime = React18.useMemo(() => {
+  }, [selectedEvent, APPOINTMENT_BLOCK_WIDTH]);
+  const initialDisplayTime = React19.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 = Animated2.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__namespace.createElement(Animated2__default.default.View, { style: [styles6.event, dynamicStyle, draggingAnimatedStyle, resolved?.container] }, /* @__PURE__ */ React18__namespace.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React18__namespace.createElement(
+  return /* @__PURE__ */ React19__namespace.createElement(Animated2__default.default.View, { style: [styles6.event, dynamicStyle, draggingAnimatedStyle, resolved?.container] }, /* @__PURE__ */ React19__namespace.createElement(Col_default, { style: [{ position: "relative" }, resolved?.content] }, /* @__PURE__ */ React19__namespace.createElement(
     AnimatedTextInput,
     {
       editable: false,
@@ -1146,7 +1181,7 @@ var DraggableEvent = ({
       defaultValue: initialDisplayTime,
       animatedProps: animatedTimeProps
     }
-  ), Body ? /* @__PURE__ */ React18__namespace.createElement(Body, { event: selectedEvent, ctx: { hourHeight } }) : /* @__PURE__ */ React18__namespace.createElement(React18__namespace.Fragment, null, /* @__PURE__ */ React18__namespace.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React18__namespace.createElement(
+  ), Body ? /* @__PURE__ */ React19__namespace.createElement(Body, { event: selectedEvent, ctx: { hourHeight } }) : /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, null, /* @__PURE__ */ React19__namespace.createElement(Row_default, { style: { alignItems: "center", height: 18 } }, /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -1157,7 +1192,7 @@ var DraggableEvent = ({
       }, resolved?.title]
     },
     selectedEvent?.title
-  )), /* @__PURE__ */ React18__namespace.createElement(
+  )), /* @__PURE__ */ React19__namespace.createElement(
     reactNative.Text,
     {
       allowFontScaling: false,
@@ -1168,14 +1203,14 @@ var DraggableEvent = ({
       }, resolved?.desc]
     },
     selectedEvent?.description
-  )), /* @__PURE__ */ React18__namespace.createElement(Row_default, { style: {
+  )), /* @__PURE__ */ React19__namespace.createElement(Row_default, { style: {
     position: "absolute",
     right: 2
-  }, space: 2 }, TopRight ? /* @__PURE__ */ React18__namespace.createElement(TopRight, { event: selectedEvent, ctx: { hourHeight } }) : null)), /* @__PURE__ */ React18__namespace.createElement(Row_default, { style: {
+  }, space: 2 }, TopRight ? /* @__PURE__ */ React19__namespace.createElement(TopRight, { event: selectedEvent, ctx: { hourHeight } }) : null)), /* @__PURE__ */ React19__namespace.createElement(Row_default, { style: {
     position: "absolute",
     alignSelf: "center",
     bottom: 0
-  } }, /* @__PURE__ */ React18__namespace.createElement(vectorIcons.MaterialIcons, { name: "drag-handle", size: 12, color: "black" })));
+  } }, /* @__PURE__ */ React19__namespace.createElement(vectorIcons.MaterialIcons, { name: "drag-handle", size: 12, color: "black" })));
 };
 var styles6 = reactNative.StyleSheet.create({
   event: {
@@ -1188,7 +1223,7 @@ var styles6 = reactNative.StyleSheet.create({
     // Ensure events stay above the background blocks
   }
 });
-var EventBlocks = React18__namespace.default.memo(({
+var EventBlocks = React19__namespace.default.memo(({
   id,
   onLongPress,
   onPress,
@@ -1197,11 +1232,13 @@ var EventBlocks = React18__namespace.default.memo(({
   eventRenderer,
   isEventDisabled,
   isEventSelected,
-  mode
+  mode,
+  date: dateProp
 }) => {
-  const { useEventsFor: useEventsFor2 } = useCalendarBinding();
-  const events = useEventsFor2(id);
-  const frameMap = React18.useMemo(
+  const { useEventsFor: useEventsFor2, useGetDate: useGetDate2 } = useCalendarBinding();
+  const date = useGetDate2();
+  const events = useEventsFor2(id, dateProp ?? date);
+  const frameMap = React19.useMemo(
     () => computeEventFrames(events, EVENT_BLOCK_WIDTH, mode),
     [events, mode, EVENT_BLOCK_WIDTH]
   );
@@ -1210,7 +1247,7 @@ var EventBlocks = React18__namespace.default.memo(({
     (evt, index) => {
       const selected = isEventSelected?.(evt) ?? false;
       const disabled = isEventDisabled?.(evt) ?? false;
-      return /* @__PURE__ */ React18__namespace.default.createElement(
+      return /* @__PURE__ */ React19__namespace.default.createElement(
         Renderer,
         {
           key: `${evt.from}-${evt.to}-${index}`,
@@ -1227,8 +1264,89 @@ var EventBlocks = React18__namespace.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 = React19.useMemo(
+    () => Array.from({ length: visibleDayCount }, (_, i) => dateFns.addDays(date, i)),
+    [date, visibleDayCount]
+  );
+  return /* @__PURE__ */ React19__namespace.createElement(Row_default, null, /* @__PURE__ */ React19__namespace.createElement(Col_default, { style: { width: TIME_LABEL_WIDTH, alignItems: "center", paddingVertical: 4 } }, /* @__PURE__ */ React19__namespace.createElement(
+    StaffAvatar,
+    {
+      onPress: () => {
+        if (onResourcePress)
+          onResourcePress(resource);
+      },
+      name: resource?.name,
+      circleSize: TIME_LABEL_WIDTH - 12,
+      fontSize: 16,
+      image: resource?.avatar
+    }
+  ), /* @__PURE__ */ React19__namespace.createElement(
+    reactNative.Text,
+    {
+      style: {
+        fontSize: 14,
+        fontFamily: titleFace,
+        fontWeight: "700"
+      },
+      numberOfLines: 1,
+      allowFontScaling: false
+    },
+    resource?.name
+  )), /* @__PURE__ */ React19__namespace.createElement(Row_default, { style: { flex: 1 } }, days.map((d, i) => {
+    const selected = dateFns.isSameDay(d, /* @__PURE__ */ new Date());
+    return /* @__PURE__ */ React19__namespace.createElement(
+      Col_default,
+      {
+        style: {
+          alignItems: "center",
+          justifyContent: "center",
+          width: APPOINTMENT_BLOCK_WIDTH
+        },
+        space: 4,
+        key: i
+      },
+      /* @__PURE__ */ React19__namespace.createElement(Center_default, { style: {
+        backgroundColor: selected ? "#4d959c" : void 0,
+        width: 30,
+        height: 30,
+        borderRadius: 999
+      } }, /* @__PURE__ */ React19__namespace.createElement(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 16,
+            fontFamily: subTitleFace,
+            fontWeight: "600",
+            color: selected ? "#fff" : void 0
+          },
+          numberOfLines: 1,
+          allowFontScaling: false
+        },
+        dateFns.format(d, "d")
+      )),
+      /* @__PURE__ */ React19__namespace.createElement(
+        reactNative.Text,
+        {
+          style: {
+            fontSize: 14,
+            fontFamily: subTitleFace,
+            fontWeight: "600"
+          },
+          numberOfLines: 1,
+          allowFontScaling: false
+        },
+        dateFns.format(d, "EEE")
+      )
+    );
+  })));
+};
 var AnimatedFlashList = Animated2__default.default.createAnimatedComponent(flashList.FlashList);
 var CalendarInner = (props) => {
   const { width } = reactNative.useWindowDimensions();
@@ -1236,7 +1354,7 @@ var CalendarInner = (props) => {
   const binding = useCalendarBinding();
   const {
     date,
-    numberOfColumns = 3,
+    numberOfColumns: numberOfColumnsProp = 3,
     startMinutes,
     hourHeight = 120,
     snapIntervalInMinutes = 5,
@@ -1249,17 +1367,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 = React19.useMemo(
+    () => Array.from({ length: visibleDayCount }, (_, i) => dateFns.addDays(date, i)),
+    [date, visibleDayCount]
+  );
   const snapInterval = hourHeight / 60 * snapIntervalInMinutes;
-  const onPressRef = React18__namespace.default.useRef(onEventPress);
-  const onLongPressRef = React18__namespace.default.useRef(onEventLongPress);
-  const internalOnLongPress = React18.useRef(null);
-  const onDisabledBlockPressRef = React18__namespace.default.useRef(onDisabledBlockPress);
-  const selectedRef = React18.useRef(props.isEventSelected);
-  const disabledRef = React18.useRef(props.isEventDisabled);
-  const effectiveRenderer = React18.useMemo(() => {
-    return (p) => /* @__PURE__ */ React18__namespace.default.createElement(
+  const onPressRef = React19__namespace.default.useRef(onEventPress);
+  const onLongPressRef = React19__namespace.default.useRef(onEventLongPress);
+  const internalOnLongPress = React19.useRef(null);
+  const onDisabledBlockPressRef = React19__namespace.default.useRef(onDisabledBlockPress);
+  const selectedRef = React19.useRef(props.isEventSelected);
+  const disabledRef = React19.useRef(props.isEventDisabled);
+  const effectiveRenderer = React19.useMemo(() => {
+    return (p) => /* @__PURE__ */ React19__namespace.default.createElement(
       EventBlock_default,
       {
         ...p,
@@ -1268,64 +1395,72 @@ var CalendarInner = (props) => {
       }
     );
   }, [eventSlots, eventStyleOverrides]);
-  const isEventSelectedStable = React18.useCallback(
+  const isEventSelectedStable = React19.useCallback(
     (ev) => selectedRef.current ? selectedRef.current(ev) : false,
     []
   );
-  const isEventDisabledStable = React18.useCallback(
+  const isEventDisabledStable = React19.useCallback(
     (ev) => disabledRef.current ? disabledRef.current(ev) : false,
     []
   );
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     onPressRef.current = onEventPress;
   }, [onEventPress]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     onLongPressRef.current = onEventLongPress;
   }, [onEventLongPress]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     onDisabledBlockPressRef.current = onDisabledBlockPress;
   }, [onDisabledBlockPress]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     rendererRef.current = effectiveRenderer;
   }, [effectiveRenderer]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     selectedRef.current = props.isEventSelected;
   }, [props.isEventSelected]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     disabledRef.current = props.isEventDisabled;
   }, [props.isEventDisabled]);
-  const rendererRef = React18.useRef(effectiveRenderer);
-  const stableRenderer = React18.useCallback((p) => rendererRef.current(p), []);
-  const stableOnPress = React18__namespace.default.useCallback((e) => onPressRef.current?.(e), []);
-  const stableOnDisabledBlockPress = React18__namespace.default.useCallback((b) => onDisabledBlockPressRef.current?.(b), []);
+  const rendererRef = React19.useRef(effectiveRenderer);
+  const stableRenderer = React19.useCallback((p) => rendererRef.current(p), []);
+  const stableOnPress = React19__namespace.default.useCallback((e) => onPressRef.current?.(e), []);
+  const stableOnDisabledBlockPress = React19__namespace.default.useCallback((b) => onDisabledBlockPressRef.current?.(b), []);
   const { useGetSelectedEvent: useGetSelectedEvent2, useSetSelectedEvent: useSetSelectedEvent2, useSetDraggedEventDraft: useSetDraggedEventDraft2, useGetDraggedEventDraft: useGetDraggedEventDraft2 } = useCalendarBinding();
   const selectedEvent = useGetSelectedEvent2();
   const setSelectedEvent = useSetSelectedEvent2();
   const setDraggedEventDraft = useSetDraggedEventDraft2();
   const APPOINTMENT_BLOCK_WIDTH = (width - TIME_LABEL_WIDTH) / numberOfColumns;
-  const hourHeightRef = React18.useRef(hourHeight);
-  const resourcesRef = React18.useRef(resources);
-  const apptWidthRef = React18.useRef(APPOINTMENT_BLOCK_WIDTH);
-  React18.useEffect(() => {
+  const hourHeightRef = React19.useRef(hourHeight);
+  const resourcesRef = React19.useRef(resources);
+  const apptWidthRef = React19.useRef(APPOINTMENT_BLOCK_WIDTH);
+  const isMultiDayRef = React19.useRef(isMultiDay);
+  const daysRef = React19.useRef(days);
+  React19.useEffect(() => {
     hourHeightRef.current = hourHeight;
   }, [hourHeight]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     resourcesRef.current = resources;
   }, [resources]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     apptWidthRef.current = APPOINTMENT_BLOCK_WIDTH;
   }, [APPOINTMENT_BLOCK_WIDTH]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
+    isMultiDayRef.current = isMultiDay;
+  }, [isMultiDay]);
+  React19.useEffect(() => {
+    daysRef.current = days;
+  }, [days]);
+  React19.useEffect(() => {
     if (!selectedEvent) {
       setDraggedEventDraft(null);
     }
   }, [selectedEvent]);
   const verticalScrollViewRef = Animated2.useAnimatedRef();
   const headerScrollViewRef = Animated2.useAnimatedRef();
-  const flashListRef = React18.useRef(null);
-  const prevResourceIdsRef = React18.useRef([]);
-  const [layout, setLayout] = React18.useState(null);
-  const dateRef = React18.useRef(date);
+  const flashListRef = React19.useRef(null);
+  const prevResourceIdsRef = React19.useRef([]);
+  const [layout, setLayout] = React19.useState(null);
+  const dateRef = React19.useRef(date);
   const eventStartedTop = Animated2.useSharedValue(0);
   const eventHeight = Animated2.useSharedValue(0);
   const panXAbs = Animated2.useSharedValue(0);
@@ -1341,9 +1476,35 @@ var CalendarInner = (props) => {
   const startedX = Animated2.useSharedValue(0);
   const startedY = Animated2.useSharedValue(0);
   const touchY = Animated2.useSharedValue(0);
-  const triggerHaptic = React18.useCallback(() => {
+  const triggerHaptic = React19.useCallback(() => {
     Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Light);
   }, []);
+  const resourceIds = React19.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__namespace.default.useCallback((colIndex, adjustedTop, height) => {
+    const isMultiDay2 = mode !== "day";
+    const landedResourceId = !isMultiDay2 ? resourceIds[colIndex] : activeResourceId ?? resourceIds[0];
+    const landedDate = dateFns.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 = React19.useMemo(() => {
+    if (!isMultiDay) {
+      return resourceIds.map((resourceId) => ({ kind: "resource", resourceId }));
+    }
+    return days.map((dayDate, dayIndex) => ({ kind: "day", dayIndex, dayDate }));
+  }, [isMultiDay, resourceIds, days]);
   const panGesture = reactNativeGestureHandler.Gesture.Pan().manualActivation(!isIOS).enabled(layout !== null).shouldCancelWhenOutside(false).onTouchesMove((_evt, stateManager) => {
     "worklet";
     if (isIOS) return;
@@ -1451,9 +1612,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 = Animated2.withSpring(finalPanYValue);
     panXAbs.value = Animated2.withSpring(finalPanXValue);
     if (!isPulling.value) {
@@ -1463,12 +1623,7 @@ var CalendarInner = (props) => {
     startedX.value = finalPanXValue;
     isPulling.value = false;
     isDragging.value = false;
-    Animated2.runOnJS(setDraggedEventDraft)({
-      event: selectedEvent,
-      from: positionToMinutes(adjustedFinalEventTop, hourHeight),
-      to: positionToMinutes(adjustedFinalEventTop + eventHeight.value, hourHeight),
-      resourceId: endedResource?.id
-    });
+    Animated2.runOnJS(finalizeDrag)(colIndex, adjustedFinalEventTop, eventHeight.value);
   });
   const scrollListTo = (x) => {
     flashListRef.current?.scrollToOffset({ offset: x, animated: false });
@@ -1521,7 +1676,7 @@ var CalendarInner = (props) => {
       Animated2.runOnJS(Haptics__namespace.impactAsync)(Haptics__namespace.ImpactFeedbackStyle.Medium);
     }
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     internalOnLongPress.current = (event) => {
       onLongPressRef.current?.(event);
       const hh = hourHeightRef.current;
@@ -1533,10 +1688,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;
@@ -1546,10 +1708,10 @@ var CalendarInner = (props) => {
       Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Medium);
     };
   }, []);
-  const internalStableOnLongPress = React18.useCallback((e) => {
+  const internalStableOnLongPress = React19.useCallback((e) => {
     internalOnLongPress.current?.(e);
   }, []);
-  const onLayout = React18.useCallback((evt) => {
+  const onLayout = React19.useCallback((evt) => {
     setLayout(evt?.nativeEvent?.layout);
   }, []);
   const verticalScrollHandler = Animated2.useAnimatedScrollHandler({
@@ -1559,25 +1721,20 @@ var CalendarInner = (props) => {
   });
   const flashListScrollHandler = Animated2.useAnimatedScrollHandler({
     onScroll: (event) => {
-      const offsetX = event?.contentOffset?.x;
-      Animated2.scrollTo(headerScrollViewRef, offsetX, 0, false);
-      scrollX.value = offsetX;
+      if (!isMultiDay) {
+        const offsetX = event?.contentOffset?.x;
+        Animated2.scrollTo(headerScrollViewRef, offsetX, 0, false);
+        scrollX.value = offsetX;
+      }
     }
   });
-  const resourceIds = React18.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 = React18.useCallback((resourceId, time) => {
+  const handleBlockPress = React19.useCallback((resourceId, time) => {
     Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Medium);
     const resource = resources.find((r) => r.id === resourceId);
     if (onBlockLongPress)
       onBlockLongPress(resource, new Date(time));
   }, [resources, onBlockLongPress]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     const handleOrientationChange = () => {
       if (selectedEvent)
         setSelectedEvent(null);
@@ -1587,37 +1744,41 @@ var CalendarInner = (props) => {
       subscription.remove();
     };
   }, [setSelectedEvent, selectedEvent]);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     dateRef.current = date;
   }, [date]);
-  const renderItem = React18.useCallback(({ item }) => {
-    return /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { key: item, style: { width: APPOINTMENT_BLOCK_WIDTH } }, /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: styles7.timelineContainer }, /* @__PURE__ */ React18__namespace.default.createElement(
+  const renderItem = React19.useCallback(({ item, index }) => {
+    const rid = !isMultiDay ? item : activeResourceId ?? resourceIds[0];
+    const dayDate = !isMultiDay ? void 0 : item.dayDate;
+    return /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { key: index, style: { width: APPOINTMENT_BLOCK_WIDTH } }, /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: styles7.timelineContainer }, /* @__PURE__ */ React19__namespace.default.createElement(
       EventGridBlocksSkia,
       {
-        dateRef,
         hourHeight,
         APPOINTMENT_BLOCK_WIDTH,
-        handleBlockPress: (date2) => handleBlockPress(item, date2)
+        handleBlockPress: (time) => handleBlockPress(rid, combineDateAndTime(dayDate ?? dateRef.current, time))
       }
-    ), /* @__PURE__ */ React18__namespace.default.createElement(
+    ), /* @__PURE__ */ React19__namespace.default.createElement(
       DisabledIntervals_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         APPOINTMENT_BLOCK_WIDTH,
         hourHeight
       }
-    ), /* @__PURE__ */ React18__namespace.default.createElement(
+    ), /* @__PURE__ */ React19__namespace.default.createElement(
       DisabledBlocks_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         APPOINTMENT_BLOCK_WIDTH,
         hourHeight,
         onDisabledBlockPress: stableOnDisabledBlockPress
       }
-    ), /* @__PURE__ */ React18__namespace.default.createElement(
+    ), /* @__PURE__ */ React19__namespace.default.createElement(
       EventBlocks_default,
       {
-        id: item,
+        id: rid,
+        date: dayDate,
         EVENT_BLOCK_WIDTH: APPOINTMENT_BLOCK_WIDTH,
         hourHeight,
         onPress: stableOnPress,
@@ -1629,6 +1790,8 @@ var CalendarInner = (props) => {
       }
     )));
   }, [
+    isMultiDay,
+    activeResourceId,
     resourceIds,
     APPOINTMENT_BLOCK_WIDTH,
     hourHeight,
@@ -1641,7 +1804,7 @@ var CalendarInner = (props) => {
     stableOnDisabledBlockPress,
     dateRef
   ]);
-  return /* @__PURE__ */ React18__namespace.default.createElement(React18__namespace.default.Fragment, null, /* @__PURE__ */ React18__namespace.default.createElement(StoreFeeder, { resources, store: binding }), /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: { flex: 1 } }, /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, null, /* @__PURE__ */ React18__namespace.default.createElement(
+  return /* @__PURE__ */ React19__namespace.default.createElement(React19__namespace.default.Fragment, null, /* @__PURE__ */ React19__namespace.default.createElement(StoreFeeder, { resources, store: binding, baseDate: date }), /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: { flex: 1 } }, !isMultiDay ? /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, null, /* @__PURE__ */ React19__namespace.default.createElement(
     Animated2__default.default.ScrollView,
     {
       style: { backgroundColor: "white" },
@@ -1657,15 +1820,25 @@ var CalendarInner = (props) => {
       ref: headerScrollViewRef,
       scrollEnabled: false
     },
-    /* @__PURE__ */ React18__namespace.default.createElement(
+    /* @__PURE__ */ React19__namespace.default.createElement(
       ResourcesComponent,
       {
+        date: dateRef.current,
         resourceIds,
         APPOINTMENT_BLOCK_WIDTH,
         onResourcePress
       }
     )
-  )), /* @__PURE__ */ React18__namespace.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React18__namespace.default.createElement(
+  )) : /* @__PURE__ */ React19__namespace.default.createElement(
+    DaysComponent,
+    {
+      APPOINTMENT_BLOCK_WIDTH,
+      date,
+      mode,
+      activeResourceId: activeResourceId ?? resourceIds[0],
+      onResourcePress
+    }
+  ), /* @__PURE__ */ React19__namespace.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React19__namespace.default.createElement(
     Animated2__default.default.View,
     {
       key: numberOfColumns + width + hourHeight,
@@ -1675,7 +1848,7 @@ var CalendarInner = (props) => {
         overflow: "hidden"
       }
     },
-    selectedEvent && /* @__PURE__ */ React18__namespace.default.createElement(reactNative.View, { style: {
+    selectedEvent && /* @__PURE__ */ React19__namespace.default.createElement(reactNative.View, { style: {
       position: "absolute",
       top: 0,
       left: TIME_LABEL_WIDTH,
@@ -1685,7 +1858,7 @@ var CalendarInner = (props) => {
       backgroundColor: "rgba(0, 0, 0, 0.1)",
       zIndex: 1
     } }),
-    /* @__PURE__ */ React18__namespace.default.createElement(
+    /* @__PURE__ */ React19__namespace.default.createElement(
       Animated2__default.default.ScrollView,
       {
         scrollEnabled: !selectedEvent,
@@ -1698,7 +1871,7 @@ var CalendarInner = (props) => {
         style: styles7.container,
         contentContainerStyle: { flexDirection: "row", paddingRight: TIME_LABEL_WIDTH }
       },
-      /* @__PURE__ */ React18__namespace.default.createElement(
+      /* @__PURE__ */ React19__namespace.default.createElement(
         TimeLabels,
         {
           startMinutes,
@@ -1710,7 +1883,7 @@ var CalendarInner = (props) => {
           ref: verticalScrollViewRef
         }
       ),
-      /* @__PURE__ */ React18__namespace.default.createElement(
+      /* @__PURE__ */ React19__namespace.default.createElement(
         AnimatedFlashList,
         {
           extraData: numberOfColumns + width + hourHeight + (overLappingLayoutMode === "stacked" ? 1 : 0),
@@ -1719,7 +1892,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 + "",
@@ -1729,7 +1902,7 @@ var CalendarInner = (props) => {
         }
       )
     ),
-    selectedEvent && /* @__PURE__ */ React18__namespace.default.createElement(
+    selectedEvent && /* @__PURE__ */ React19__namespace.default.createElement(
       DraggableEvent,
       {
         selectedEvent,
@@ -1746,7 +1919,7 @@ var CalendarInner = (props) => {
   ))));
 };
 var Calendar = ({ theme, ...rest }) => {
-  return /* @__PURE__ */ React18__namespace.default.createElement(CalendarThemeProvider, { theme }, /* @__PURE__ */ React18__namespace.default.createElement(CalendarInner, { ...rest }));
+  return /* @__PURE__ */ React19__namespace.default.createElement(CalendarThemeProvider, { theme }, /* @__PURE__ */ React19__namespace.default.createElement(CalendarInner, { ...rest }));
 };
 var styles7 = reactNative.StyleSheet.create({
   container: {