feat: availability rules

bart-krakowski · bart-krakowski · commit 049aa154bf4e · 2026-02-03T11:14:42.000+01:00
diff --git a/examples/react/basic/src/index.tsx b/examples/react/basic/src/index.tsx
@@ -32,6 +32,30 @@ function formatDateToISO(date: Date): string {
   return `${year}-${month}-${day}`
 }
 
+const sampleResources: Array<Resource> = [
+  {
+    id: '1',
+    label: 'Resource 1',
+    availability: [
+      {
+        weekdays: [1, 2, 3],
+        startTime: '08:00',
+        endTime: '17:00',
+      },
+      {
+        weekdays: [4, 5],
+        startTime: '00:00',
+        endTime: '24:00',
+      },
+      {
+        weekdays: [6, 7],
+        startTime: '10:00',
+        endTime: '15:00',
+      },
+    ],
+  },
+]
+
 function getSampleEvents(): Array<Event<Resource>> {
   const today = new Date()
   const tomorrow = new Date(today)
@@ -52,24 +76,28 @@ function getSampleEvents(): Array<Event<Resource>> {
       title: 'Team Meeting',
       start: `${formatDateToISO(tomorrow)}T10:00:00`,
       end: `${formatDateToISO(tomorrow)}T11:00:00`,
+      resources: sampleResources,
     },
     {
       id: '2',
       title: 'Project Review',
       start: `${formatDateToISO(dayAfterTomorrow)}T14:00:00`,
       end: `${formatDateToISO(dayAfterTomorrow)}T15:30:00`,
+      resources: sampleResources,
     },
     {
       id: '3',
       title: 'Multi-day Conference',
       start: `${formatDateToISO(threeDaysLater)}T09:00:00`,
       end: `${formatDateToISO(fourDaysLater)}T17:00:00`,
+      resources: sampleResources,
     },
     {
       id: '4',
       title: 'Lunch Break',
       start: `${formatDateToISO(threeDaysLater)}T12:00:00`,
       end: `${formatDateToISO(threeDaysLater)}T13:00:00`,
+      resources: sampleResources,
     },
   ]
 }
@@ -349,7 +377,6 @@ function ScheduleView({
                         resizeState.isResizing &&
                         resizeState.eventId === event.id
 
-                      // Calculate preview state using library function
                       const resizePreview =
                         isBeingResized &&
                         resizeState.previewStart &&
@@ -376,7 +403,6 @@ function ScheduleView({
                       const isActivelyResized =
                         isBeingResized && resizePreview?.previewStyle !== null
 
-                      // Format time display using library function
                       const timeRange = formatEventTimeRange(
                         isBeingResized && resizeState.previewStart
                           ? resizeState.previewStart
@@ -441,7 +467,6 @@ function ScheduleView({
                         </div>
                       )
                     })}
-                    {/* Ghost preview on days without existing segments */}
                     {resizeState.isResizing &&
                       resizeState.previewStart &&
                       resizeState.previewEnd &&
@@ -494,29 +519,10 @@ function CalendarView() {
     initialData: emptyFormData,
   })
 
-  const resources: Array<Resource> = [
-    {
-      id: '1',
-      label: 'Resource 1',
-      availability: [
-        {
-          weekdays: [1, 2, 3, 4, 5],
-          startTime: '08:00',
-          endTime: '17:00',
-        },
-        {
-          weekdays: [6, 7],
-          startTime: '10:00',
-          endTime: '15:00',
-        },
-      ],
-    },
-  ]
-
   const calendar = useCalendar<Resource, Event<Resource>>({
     viewMode: { value: 1, unit: 'month' },
     events: sampleEvents,
-    resources,
+    resources: sampleResources,
     timeZone: 'UTC',
     resize: {
       enabled: true,
diff --git a/packages/react-time/src/useCalendar/useCalendar.ts b/packages/react-time/src/useCalendar/useCalendar.ts
@@ -81,7 +81,7 @@ export const useCalendar = <
   const { resize, ...calendarOptions } = options
   const resizeEnabled = resize?.enabled ?? true
   const containerHeight = resize?.containerHeight ?? 0
-  const constraints = resize?.constraints
+  const resizeConstraints = resize?.constraints
 
   const [calendarCore] = useState(
     () => new CalendarCore<TResource, TEvent>(calendarOptions),
@@ -152,7 +152,6 @@ export const useCalendar = <
 
       const targetDayDate = getDayFromPoint(e.clientX) ?? originalDayDate
 
-      // Calculate day offset if moved to a different day
       let dayOffsetMinutes = 0
       if (targetDayDate && targetDayDate !== originalDayDate) {
         const originalDate = new Date(originalDayDate + 'T00:00:00')
@@ -168,26 +167,128 @@ export const useCalendar = <
 
       const totalDeltaMinutes = deltaMinutes + dayOffsetMinutes
 
+      const event = calendarOptions.events?.find((ev) => ev.id === id)
+      const resourceIds = event?.resources?.map((r) => r.id)
+
+      const getUnavailableMinutesForDay = (dayDate: string) => {
+        const rawRanges = resourceIds?.length
+          ? calendarCore.getUnavailableRanges(dayDate, {
+              containerHeight: 1440,
+              resourceIds,
+            })
+          : []
+        return rawRanges.map((range) => {
+          const startParts = range.startTime.split(':').map(Number)
+          const endParts = range.endTime.split(':').map(Number)
+          return {
+            startMinutes: (startParts[0] ?? 0) * 60 + (startParts[1] ?? 0),
+            endMinutes: (endParts[0] ?? 0) * 60 + (endParts[1] ?? 0),
+          }
+        })
+      }
+
+      const unavailableRanges = getUnavailableMinutesForDay(targetDayDate)
+
+      const originalStartDate = start.split('T')[0] ?? ''
+      const originalEndDate = end.split('T')[0] ?? ''
+
+      let shouldBlockResize = false
+
+      if (edge === 'top' && targetDayDate < originalStartDate) {
+        const rawStartMinutes =
+          new Date(start).getHours() * 60 +
+          new Date(start).getMinutes() +
+          totalDeltaMinutes
+        const targetStartMinutes = ((rawStartMinutes % 1440) + 1440) % 1440
+        const currentStartMinutes =
+          new Date(start).getHours() * 60 + new Date(start).getMinutes()
+
+        for (const range of unavailableRanges) {
+          if (
+            targetStartMinutes < range.endMinutes &&
+            range.startMinutes < 1440
+          ) {
+            shouldBlockResize = true
+            break
+          }
+        }
+
+        if (!shouldBlockResize) {
+          const sourceUnavailableRanges =
+            getUnavailableMinutesForDay(originalStartDate)
+          for (const range of sourceUnavailableRanges) {
+            if (
+              0 < range.endMinutes &&
+              range.startMinutes < currentStartMinutes
+            ) {
+              shouldBlockResize = true
+              break
+            }
+          }
+        }
+      } else if (edge === 'bottom' && targetDayDate > originalEndDate) {
+        const rawEndMinutes =
+          new Date(end).getHours() * 60 +
+          new Date(end).getMinutes() +
+          totalDeltaMinutes
+        const targetEndMinutes = ((rawEndMinutes % 1440) + 1440) % 1440
+        const currentEndMinutes =
+          new Date(end).getHours() * 60 + new Date(end).getMinutes()
+
+        const sourceUnavailableRanges =
+          getUnavailableMinutesForDay(originalEndDate)
+        for (const range of sourceUnavailableRanges) {
+          if (
+            currentEndMinutes < range.endMinutes &&
+            range.startMinutes < 1440
+          ) {
+            shouldBlockResize = true
+            break
+          }
+        }
+
+        if (!shouldBlockResize) {
+          for (const range of unavailableRanges) {
+            if (0 < range.endMinutes && range.startMinutes < targetEndMinutes) {
+              shouldBlockResize = true
+              break
+            }
+          }
+        }
+      }
+
+      const effectiveDeltaMinutes = shouldBlockResize
+        ? deltaMinutes
+        : totalDeltaMinutes
+      const effectiveUnavailableRanges = shouldBlockResize
+        ? getUnavailableMinutesForDay(originalDayDate)
+        : unavailableRanges
+
       const result = calculateResizedEvent({
         originalStart: start,
         originalEnd: end,
         edge,
-        deltaMinutes: totalDeltaMinutes,
+        deltaMinutes: effectiveDeltaMinutes,
         timeZone: calendarOptions.timeZone ?? 'UTC',
-        constraints,
+        constraints: {
+          ...resizeConstraints,
+          unavailableRanges: effectiveUnavailableRanges,
+        },
       })
 
       updateResizeState({
         eventId: id,
         previewStart: result.start,
         previewEnd: result.end,
-        targetDayDate,
+        targetDayDate: shouldBlockResize ? originalDayDate : targetDayDate,
       })
     },
     [
       containerHeight,
       calendarOptions.timeZone,
-      constraints,
+      calendarOptions.events,
+      calendarCore,
+      resizeConstraints,
       getDayFromPoint,
       updateResizeState,
     ],
diff --git a/packages/time/src/calendar/getResizeProps.ts b/packages/time/src/calendar/getResizeProps.ts
@@ -2,9 +2,18 @@ import { Temporal } from '@js-temporal/polyfill'
 
 export type ResizeEdge = 'top' | 'bottom'
 
+export interface UnavailableTimeRange {
+  /** Start time in minutes from midnight (0-1440) */
+  startMinutes: number
+  /** End time in minutes from midnight (0-1440) */
+  endMinutes: number
+}
+
 export interface ResizeConstraints {
   minDurationMinutes?: number
   snapToMinutes?: number
+  /** Unavailable time ranges that the event cannot be resized into */
+  unavailableRanges?: Array<UnavailableTimeRange>
 }
 
 const MINUTES_IN_DAY = 24 * 60
@@ -33,6 +42,19 @@ const DEFAULT_SNAP_TO_MINUTES = 15
 const roundToNearestInterval = (minutes: number, interval: number): number =>
   Math.round(minutes / interval) * interval
 
+const getMinutesFromMidnight = (zdt: Temporal.ZonedDateTime): number =>
+  zdt.hour * 60 + zdt.minute
+
+const setMinutesFromMidnight = (
+  zdt: Temporal.ZonedDateTime,
+  minutes: number,
+): Temporal.ZonedDateTime => {
+  const clampedMinutes = Math.max(0, Math.min(minutes, MINUTES_IN_DAY - 1))
+  const hours = Math.floor(clampedMinutes / 60)
+  const mins = clampedMinutes % 60
+  return zdt.with({ hour: hours, minute: mins, second: 0, millisecond: 0 })
+}
+
 export function calculateResizedEvent(
   options: CalculateResizedEventOptions,
 ): ResizedEventResult {
@@ -48,6 +70,7 @@ export function calculateResizedEvent(
   const {
     minDurationMinutes = DEFAULT_MIN_DURATION_MINUTES,
     snapToMinutes = DEFAULT_SNAP_TO_MINUTES,
+    unavailableRanges = [],
   } = constraints
 
   const startZdt =
@@ -60,18 +83,72 @@ export function calculateResizedEvent(
   let newStartZdt = startZdt
   let newEndZdt = endZdt
 
+  const isEntireDayUnavailable = unavailableRanges.some(
+    (range) => range.startMinutes === 0 && range.endMinutes >= MINUTES_IN_DAY,
+  )
+
   if (edge === 'top') {
     newStartZdt = startZdt.add({ minutes: snappedDelta })
     const maxStartZdt = endZdt.subtract({ minutes: minDurationMinutes })
     if (Temporal.ZonedDateTime.compare(newStartZdt, maxStartZdt) > 0) {
       newStartZdt = maxStartZdt
     }
+
+    if (isEntireDayUnavailable) {
+      const originalStartMinutes = getMinutesFromMidnight(startZdt)
+      newStartZdt = setMinutesFromMidnight(newStartZdt, originalStartMinutes)
+    } else {
+      let newStartMinutes = getMinutesFromMidnight(newStartZdt)
+
+      for (const range of unavailableRanges) {
+        if (
+          newStartMinutes >= range.startMinutes &&
+          newStartMinutes < range.endMinutes
+        ) {
+          if (range.endMinutes < MINUTES_IN_DAY) {
+            newStartZdt = setMinutesFromMidnight(newStartZdt, range.endMinutes)
+            newStartMinutes = range.endMinutes
+          } else if (range.startMinutes > 0) {
+            const validTime = range.startMinutes - snapToMinutes
+            if (validTime >= 0) {
+              newStartZdt = setMinutesFromMidnight(newStartZdt, validTime)
+              newStartMinutes = validTime
+            }
+          }
+        }
+      }
+    }
   } else {
     newEndZdt = endZdt.add({ minutes: snappedDelta })
     const minEndZdt = startZdt.add({ minutes: minDurationMinutes })
     if (Temporal.ZonedDateTime.compare(newEndZdt, minEndZdt) < 0) {
       newEndZdt = minEndZdt
     }
+
+    if (isEntireDayUnavailable) {
+      const originalEndMinutes = getMinutesFromMidnight(endZdt)
+      newEndZdt = setMinutesFromMidnight(newEndZdt, originalEndMinutes)
+    } else {
+      let newEndMinutes = getMinutesFromMidnight(newEndZdt)
+
+      for (const range of unavailableRanges) {
+        if (
+          newEndMinutes > range.startMinutes &&
+          newEndMinutes <= range.endMinutes
+        ) {
+          if (range.startMinutes > 0) {
+            newEndZdt = setMinutesFromMidnight(newEndZdt, range.startMinutes)
+            newEndMinutes = range.startMinutes
+          } else if (range.endMinutes < MINUTES_IN_DAY) {
+            const validTime = range.endMinutes + snapToMinutes
+            if (validTime <= MINUTES_IN_DAY) {
+              newEndZdt = setMinutesFromMidnight(newEndZdt, validTime)
+              newEndMinutes = validTime
+            }
+          }
+        }
+      }
+    }
   }
 
   const durationMs = newEndZdt.epochMilliseconds - newStartZdt.epochMilliseconds
@@ -139,9 +216,6 @@ export interface SegmentInfo {
   segmentEnd: string
 }
 
-/**
- * Analyzes a segment to determine its position within a multi-day event
- */
 export function getSegmentInfo(event: {
   start: string
   end: string
