@mantine/schedule 9.5.1 → 9.6.0

package/esm/components/YearView/YearViewMonth.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearViewMonth.mjs","names":[],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateLabelFormat,\n  DateStringValue,\n  DayOfWeek,\n  ScheduleEventData,\n  ScheduleMode,\n} from '../../types';\nimport {\n  formatDate,\n  getMonthDays,\n  getWeekdaysNames,\n  getWeekNumber,\n  isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport type YearViewRenderDay = (\n  date: DateStringValue,\n  events: ScheduleEventData[]\n) => React.ReactNode;\n\nexport interface YearViewDayKeydownPayload {\n  weekIndex: number;\n  dayIndex: number;\n  date: string;\n}\n\nexport interface YearViewMonthSettings {\n  /** `dayjs` format for month label  @default 'MMMM' */\n  monthLabelFormat?: DateLabelFormat;\n\n  /** If set, show week numbers */\n  withWeekNumbers?: boolean;\n\n  /** If set, weekdays names are displayed in the first row @default true */\n  withWeekDays?: boolean;\n\n  /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n  locale?: string;\n\n  /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n  firstDayOfWeek?: DayOfWeek;\n\n  /** `dayjs` format for weekdays names  @default 'd' */\n  weekdayFormat?: DateLabelFormat;\n\n  /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n  weekendDays?: DayOfWeek[];\n\n  /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n  withWeekendDays?: boolean;\n\n  /** Props passed down to the week number button */\n  getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n  /** Props passed down to the day button */\n  getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n  /** Called when day is clicked */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called with first day of the week when week number is clicked */\n  onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called with the first day of the month when month label is clicked */\n  onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, highlights the current day @default true */\n  highlightToday?: boolean;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n  mode?: ScheduleMode;\n\n  /** If true, days from adjacent months are displayed @default true */\n  withOutsideDays?: boolean;\n\n  /**\n   * A function to replace the entire content of a day cell, called with the day date\n   * and the events grouped on that day – the same list that is used to render the default\n   * indicators. When set, default event indicators are not rendered.\n   */\n  renderDay?: YearViewRenderDay;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n  /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n  month: Date | string;\n\n  /** `useStyles` return value of `YearView` */\n  getStyles: GetStylesApi<YearViewFactory>;\n\n  /** Events grouped by date */\n  groupedEvents?: GroupedEvents;\n\n  /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n  __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n  /** Called when any keydown event is registered on day, used for keyboard navigation */\n  __onDayKeyDown?: (\n    event: React.KeyboardEvent<HTMLButtonElement>,\n    payload: YearViewDayKeydownPayload\n  ) => void;\n\n  /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n  firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n  month,\n  getStyles,\n  monthLabelFormat = 'MMMM',\n  withWeekNumbers,\n  withWeekDays,\n  locale,\n  firstDayOfWeek,\n  weekdayFormat,\n  weekendDays,\n  withWeekendDays,\n  getDayProps,\n  onDayClick,\n  onWeekNumberClick,\n  onMonthClick,\n  getWeekNumberProps,\n  highlightToday,\n  groupedEvents,\n  mode,\n  withOutsideDays,\n  renderDay,\n  __getDayRef,\n  __onDayKeyDown,\n  firstDayIndex,\n}: YearViewMonthProps) {\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n  const today = dayjs();\n\n  const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n  const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n  const hiddenColumns = new Set(\n    getHiddenWeekendColumns({\n      weekendDays: resolvedWeekendDays,\n      firstDayOfWeek: resolvedFirstDayOfWeek,\n      withWeekendDays,\n    })\n  );\n\n  const weekdays = withWeekDays\n    ? getWeekdaysNames({\n        locale: ctx.getLocale(locale),\n        format: weekdayFormat,\n        firstDayOfWeek: resolvedFirstDayOfWeek,\n      })\n        .filter((_, index) => !hiddenColumns.has(index))\n        .map((day, index) => (\n          <div {...getStyles('yearViewWeekday')} key={index}>\n            {day}\n          </div>\n        ))\n    : null;\n\n  const weeks = getMonthDays({\n    month: dayjs(month).format('YYYY-MM-DD'),\n    firstDayOfWeek: resolvedFirstDayOfWeek,\n    consistentWeeks: true,\n  }).map((week, weekIndex) => {\n    const visibleDays = getVisibleWeekDays({\n      week,\n      weekendDays: resolvedWeekendDays,\n      withWeekendDays,\n    });\n\n    const days = visibleDays.map((date, dayIndex) => {\n      const outside = !isSameMonth(date, month);\n\n      if (outside && !withOutsideDays) {\n        return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n      }\n\n      const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n      const ariaLabel = dayjs(date)\n        .locale(locale || ctx.locale)\n        .format('MMMM D, YYYY');\n\n      const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n      const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n      const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n      // Determine if this day should be in the tab order\n      // Only the first day of the month (not outside) should be focusable via tab\n      const isFirstDayOfMonth =\n        firstDayIndex &&\n        weekIndex === firstDayIndex.weekIndex &&\n        dayIndex === firstDayIndex.dayIndex;\n      const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n      const dayContent =\n        typeof renderDay === 'function' ? (\n          renderDay(dayjs(date).format('YYYY-MM-DD'), dayEvents)\n        ) : (\n          <>\n            {dayjs(date).format('D')}\n\n            <div {...getStyles('yearViewDayIndicators')}>\n              {dayEvents.slice(0, 3).map((event) => (\n                <div\n                  {...getStyles('yearViewDayIndicator', {\n                    style: { backgroundColor: getThemeColor(event.color, theme) },\n                  })}\n                  key={event.id}\n                />\n              ))}\n            </div>\n          </>\n        );\n\n      return (\n        <UnstyledButton\n          aria-label={ariaLabel}\n          {...dayProps}\n          {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n          key={date}\n          mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n          tabIndex={isInTabOrder ? 0 : -1}\n          ref={(node) => {\n            if (node) {\n              __getDayRef?.(weekIndex, dayIndex, node);\n            }\n          }}\n          onKeyDown={(event) => {\n            dayProps.onKeyDown?.(event);\n            __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n          }}\n          onClick={\n            mode === 'static'\n              ? undefined\n              : (event) => {\n                  onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n                  dayProps.onClick?.(event);\n                }\n          }\n        >\n          {dayContent}\n        </UnstyledButton>\n      );\n    });\n\n    const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n    const weekNumber = getWeekNumber(week);\n\n    return (\n      <div {...getStyles('yearViewWeek')} key={weekIndex}>\n        {withWeekNumbers && (\n          <UnstyledButton\n            key={weekNumber}\n            aria-label={`Week ${weekNumber}`}\n            title={`Week ${weekNumber}`}\n            {...weekNumberProps}\n            onClick={\n              mode === 'static'\n                ? undefined\n                : (event) => {\n                    onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n                    weekNumberProps.onClick?.(event);\n                  }\n            }\n            mod={{ static: mode === 'static' }}\n            tabIndex={mode === 'static' ? -1 : 0}\n            {...getStyles('yearViewWeekNumber', {\n              className: weekNumberProps.className,\n              style: weekNumberProps.style,\n            })}\n          >\n            {weekNumber}\n          </UnstyledButton>\n        )}\n\n        {days}\n      </div>\n    );\n  });\n\n  return (\n    <Box\n      mod={[\n        {\n          'with-week-numbers': withWeekNumbers,\n          'with-weekdays': withWeekDays,\n          static: mode === 'static',\n        },\n      ]}\n      {...getStyles('yearViewMonth')}\n    >\n      <UnstyledButton\n        onClick={\n          mode === 'static'\n            ? undefined\n            : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n        }\n        mod={{ static: mode === 'static' }}\n        tabIndex={mode === 'static' ? -1 : 0}\n        {...getStyles('yearViewMonthCaption')}\n      >\n        {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n      </UnstyledButton>\n\n      {weekdays && (\n        <div {...getStyles('yearViewWeekdays')}>\n          {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n          {weekdays}\n        </div>\n      )}\n\n      {weeks}\n    </Box>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"YearViewMonth.mjs","names":[],"sources":["../../../src/components/YearView/YearViewMonth.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { Box, GetStylesApi, getThemeColor, UnstyledButton, useMantineTheme } from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateLabelFormat,\n  DateStringValue,\n  DayOfWeek,\n  ScheduleEventData,\n  ScheduleMode,\n} from '../../types';\nimport {\n  formatDate,\n  getMonthDays,\n  getWeekdaysNames,\n  getWeekNumber,\n  isSameMonth,\n} from '../../utils';\nimport { getHiddenWeekendColumns, getVisibleWeekDays } from './get-visible-week-days';\nimport { GroupedEvents } from './get-year-view-events/get-year-view-events';\nimport type { YearViewFactory } from './YearView';\n\nexport type YearViewRenderDay = (\n  date: DateStringValue,\n  events: ScheduleEventData[]\n) => React.ReactNode;\n\nexport interface YearViewDayKeydownPayload {\n  weekIndex: number;\n  dayIndex: number;\n  date: string;\n}\n\nexport interface YearViewMonthSettings {\n  /** `dayjs` format for month label  @default 'MMMM' */\n  monthLabelFormat?: DateLabelFormat;\n\n  /** If set, show week numbers */\n  withWeekNumbers?: boolean;\n\n  /** If set, weekdays names are displayed in the first row @default true */\n  withWeekDays?: boolean;\n\n  /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n  locale?: string;\n\n  /** Number 0-6, where 0 – Sunday and 6 – Saturday @default 0 */\n  firstDayOfWeek?: DayOfWeek;\n\n  /** `dayjs` format for weekdays names  @default 'd' */\n  weekdayFormat?: DateLabelFormat;\n\n  /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */\n  weekendDays?: DayOfWeek[];\n\n  /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */\n  withWeekendDays?: boolean;\n\n  /** Props passed down to the week number button */\n  getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;\n\n  /** Props passed down to the day button */\n  getDayProps?: (date: DateStringValue) => Record<string, any>;\n\n  /** Called when day is clicked */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called with first day of the week when week number is clicked */\n  onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called with the first day of the month when month label is clicked */\n  onMonthClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, highlights the current day @default true */\n  highlightToday?: boolean;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions */\n  mode?: ScheduleMode;\n\n  /** If true, days from adjacent months are displayed @default true */\n  withOutsideDays?: boolean;\n\n  /**\n   * A function to replace the entire content of a day cell, called with the day date\n   * and the events grouped on that day – the same list that is used to render the default\n   * indicators. When set, default event indicators are not rendered.\n   */\n  renderDay?: YearViewRenderDay;\n}\n\nexport interface YearViewMonthProps extends YearViewMonthSettings {\n  /** Month to display, Date object or date string in `YYYY-MM-DD` format */\n  month: Date | string;\n\n  /** `useStyles` return value of `YearView` */\n  getStyles: GetStylesApi<YearViewFactory>;\n\n  /** Events grouped by date */\n  groupedEvents?: GroupedEvents;\n\n  /** Assigns ref of every day based on its position in the month, used for keyboard navigation */\n  __getDayRef?: (weekIndex: number, dayIndex: number, node: HTMLButtonElement) => void;\n\n  /** Called when any keydown event is registered on day, used for keyboard navigation */\n  __onDayKeyDown?: (\n    event: React.KeyboardEvent<HTMLButtonElement>,\n    payload: YearViewDayKeydownPayload\n  ) => void;\n\n  /** Index of the first day of the month in the grid (for determining which day should be in tab order) */\n  firstDayIndex?: { weekIndex: number; dayIndex: number };\n}\n\nexport function YearViewMonth({\n  month,\n  getStyles,\n  monthLabelFormat = 'MMMM',\n  withWeekNumbers,\n  withWeekDays,\n  locale,\n  firstDayOfWeek,\n  weekdayFormat,\n  weekendDays,\n  withWeekendDays,\n  getDayProps,\n  onDayClick,\n  onWeekNumberClick,\n  onMonthClick,\n  getWeekNumberProps,\n  highlightToday,\n  groupedEvents,\n  mode,\n  withOutsideDays,\n  renderDay,\n  __getDayRef,\n  __onDayKeyDown,\n  firstDayIndex,\n}: YearViewMonthProps) {\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n  const today = dayjs();\n\n  const resolvedFirstDayOfWeek = ctx.getFirstDayOfWeek(firstDayOfWeek);\n  const resolvedWeekendDays = ctx.getWeekendDays(weekendDays);\n  const hiddenColumns = new Set(\n    getHiddenWeekendColumns({\n      weekendDays: resolvedWeekendDays,\n      firstDayOfWeek: resolvedFirstDayOfWeek,\n      withWeekendDays,\n    })\n  );\n\n  const weekdays = withWeekDays\n    ? getWeekdaysNames({\n        locale: ctx.getLocale(locale),\n        format: weekdayFormat,\n        firstDayOfWeek: resolvedFirstDayOfWeek,\n      })\n        .filter((_, index) => !hiddenColumns.has(index))\n        .map((day, index) => (\n          <div {...getStyles('yearViewWeekday')} key={index}>\n            {day}\n          </div>\n        ))\n    : null;\n\n  const weeks = getMonthDays({\n    month: dayjs(month).format('YYYY-MM-DD'),\n    firstDayOfWeek: resolvedFirstDayOfWeek,\n    consistentWeeks: true,\n  }).map((week, weekIndex) => {\n    const visibleDays = getVisibleWeekDays({\n      week,\n      weekendDays: resolvedWeekendDays,\n      withWeekendDays,\n    });\n\n    const days = visibleDays.map((date, dayIndex) => {\n      const outside = !isSameMonth(date, month);\n\n      if (outside && !withOutsideDays) {\n        return <div {...getStyles('yearViewDay')} data-day-placeholder key={date} />;\n      }\n\n      const weekend = resolvedWeekendDays.includes(dayjs(date).day() as DayOfWeek);\n      const ariaLabel = dayjs(date)\n        .locale(locale || ctx.locale)\n        .format('MMMM D, YYYY');\n\n      const dayProps = getDayProps?.(dayjs(date).format('YYYY-MM-DD')) || {};\n      const isToday = dayjs(date).isSame(today, 'day') && highlightToday;\n      const dayEvents = groupedEvents?.[dayjs(date).format('YYYY-MM-DD')] || [];\n\n      // Determine if this day should be in the tab order\n      // Only the first day of the month (not outside) should be focusable via tab\n      const isFirstDayOfMonth =\n        firstDayIndex &&\n        weekIndex === firstDayIndex.weekIndex &&\n        dayIndex === firstDayIndex.dayIndex;\n      const isInTabOrder = mode !== 'static' && !outside && isFirstDayOfMonth;\n\n      const dayContent =\n        typeof renderDay === 'function' ? (\n          renderDay(dayjs(date).format('YYYY-MM-DD'), dayEvents)\n        ) : (\n          <>\n            {dayjs(date).format('D')}\n\n            <div {...getStyles('yearViewDayIndicators')}>\n              {dayEvents.slice(0, 3).map((event) => (\n                <div\n                  {...getStyles('yearViewDayIndicator', {\n                    style: { backgroundColor: getThemeColor(event.color, theme) },\n                  })}\n                  key={event.id}\n                />\n              ))}\n            </div>\n          </>\n        );\n\n      return (\n        <UnstyledButton\n          aria-label={ariaLabel}\n          {...dayProps}\n          {...getStyles('yearViewDay', { className: dayProps.className, style: dayProps.style })}\n          key={date}\n          mod={[{ outside, weekend, today: isToday, static: mode === 'static' }, dayProps.mod]}\n          tabIndex={isInTabOrder ? 0 : -1}\n          ref={(node) => {\n            if (node) {\n              __getDayRef?.(weekIndex, dayIndex, node);\n            }\n          }}\n          onKeyDown={(event) => {\n            dayProps.onKeyDown?.(event);\n            __onDayKeyDown?.(event, { weekIndex, dayIndex, date });\n          }}\n          onClick={\n            mode === 'static'\n              ? undefined\n              : (event) => {\n                  onDayClick?.(dayjs(date).format('YYYY-MM-DD'), event);\n                  dayProps.onClick?.(event);\n                }\n          }\n        >\n          {dayContent}\n        </UnstyledButton>\n      );\n    });\n\n    const weekNumberProps = getWeekNumberProps?.(dayjs(week[0]).format('YYYY-MM-DD')) || {};\n    const weekNumber = getWeekNumber(week);\n\n    return (\n      <div {...getStyles('yearViewWeek')} key={weekIndex}>\n        {withWeekNumbers && (\n          <UnstyledButton\n            key={weekNumber}\n            aria-label={`Week ${weekNumber}`}\n            title={`Week ${weekNumber}`}\n            {...weekNumberProps}\n            onClick={\n              mode === 'static'\n                ? undefined\n                : (event) => {\n                    onWeekNumberClick?.(dayjs(week[0]).format('YYYY-MM-DD'), event);\n                    weekNumberProps.onClick?.(event);\n                  }\n            }\n            mod={{ static: mode === 'static' }}\n            tabIndex={mode === 'static' ? -1 : 0}\n            {...getStyles('yearViewWeekNumber', {\n              className: weekNumberProps.className,\n              style: weekNumberProps.style,\n            })}\n          >\n            {weekNumber}\n          </UnstyledButton>\n        )}\n\n        {days}\n      </div>\n    );\n  });\n\n  return (\n    <Box\n      mod={[\n        {\n          'with-week-numbers': withWeekNumbers,\n          'with-weekdays': withWeekDays,\n          static: mode === 'static',\n        },\n      ]}\n      {...getStyles('yearViewMonth')}\n    >\n      <UnstyledButton\n        onClick={\n          mode === 'static'\n            ? undefined\n            : (event) => onMonthClick?.(dayjs(month).startOf('month').format('YYYY-MM-DD'), event)\n        }\n        mod={{ static: mode === 'static' }}\n        tabIndex={mode === 'static' ? -1 : 0}\n        {...getStyles('yearViewMonthCaption')}\n      >\n        {formatDate({ locale: ctx.getLocale(locale), date: month, format: monthLabelFormat })}\n      </UnstyledButton>\n\n      {weekdays && (\n        <div {...getStyles('yearViewWeekdays')}>\n          {withWeekNumbers && <div {...getStyles('yearViewWeekdaysCorner')} />}\n          {weekdays}\n        </div>\n      )}\n\n      {weeks}\n    </Box>\n  );\n}\n"],"mappings":"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"}

package/esm/hooks/use-drag-drop-handlers.mjs

@@ -17,9 +17,11 @@ function useDragDropHandlers(options) {
 	const stableOnExternalDrop = useEffectEvent(onExternalDrop || (() => {}));
 	const dragState = useDragState();
 	const [dropTarget, setDropTarget] = useState(null);
+	const [dragPreview, setDragPreview] = useState(null);
 	const handleDragEnd = useCallback(() => {
 		dragState.endDrag();
 		setDropTarget(null);
+		setDragPreview(null);
 		stableOnEventDragEnd();
 	}, [dragState]);
 	const handleDragStart = useCallback((event) => {
@@ -50,8 +52,13 @@ function useDragDropHandlers(options) {
 		onExternalDrop,
 		handleDragEnd
 	]);
-	const handleDragLeave = useCallback(() => {
+	const handleDragLeave = useCallback((event) => {
+		if (event?.currentTarget) {
+			const rect = event.currentTarget.getBoundingClientRect();
+			if (event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) return;
+		}
 		setDropTarget(null);
+		setDragPreview(null);
 	}, []);
 	const handleDrop = useCallback((event, target) => {
 		event.preventDefault();
@@ -71,9 +78,11 @@ function useDragDropHandlers(options) {
 			if (dragState.state.isDragging) handleDragEnd();
 			stableOnExternalDrop(event, target);
 			setDropTarget(null);
+			setDragPreview(null);
 			return;
 		}
 		setDropTarget(null);
+		setDragPreview(null);
 	}, [
 		enabled,
 		dragState.state,
@@ -112,7 +121,9 @@ function useDragDropHandlers(options) {
 		handleDragLeave,
 		handleDrop,
 		isDraggableEvent,
-		isDropTarget
+		isDropTarget,
+		dragPreview,
+		setDragPreview
 	};
 }
 //#endregion

package/esm/hooks/use-drag-drop-handlers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-drag-drop-handlers.mjs","names":[],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffectEvent, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface UseDragDropHandlersOptions<T = any> {\n  /** Whether drag and drop is enabled */\n  enabled: boolean;\n\n  /** Schedule interaction mode */\n  mode: ScheduleMode;\n\n  /** Called when event is dropped at new location */\n  onEventDrop?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be dragged */\n  canDragEvent?: (event: ScheduleEventData) => boolean;\n\n  /** Called when any event drag starts */\n  onEventDragStart?: (event: ScheduleEventData) => void;\n\n  /** Called when any event drag ends */\n  onEventDragEnd?: () => void;\n\n  /**\n   * Function to calculate drop target dates from drop location.\n   * Receives the target location and the dragged event.\n   */\n  calculateDropTarget: (target: T, draggedEvent: ScheduleEventData) => { start: Date; end: Date };\n\n  /** Called when an external item is dropped onto the schedule */\n  onExternalDrop?: (e: React.DragEvent, target: T) => void;\n}\n\nexport interface DragDropHandlers<T = any> {\n  /** Context value for DragContext.Provider */\n  dragContextValue: DragContextValue;\n\n  /** Current drop target */\n  dropTarget: T | null;\n\n  /** Handle drag start event */\n  handleDragStart: (event: ScheduleEventData) => void;\n\n  /** Handle drag end event */\n  handleDragEnd: () => void;\n\n  /** Handle drag over event */\n  handleDragOver: (e: React.DragEvent, target: T) => void;\n\n  /** Handle drag leave event */\n  handleDragLeave: () => void;\n\n  /** Handle drop event */\n  handleDrop: (e: React.DragEvent, target: T) => void;\n\n  /** Check if event is draggable */\n  isDraggableEvent: (event: ScheduleEventData) => boolean;\n\n  /** Check if target is the current drop target */\n  isDropTarget: (target: T) => boolean;\n}\n\n/**\n * Hook that provides unified drag-drop handlers for Schedule views.\n * Handles drag state management and event drops across Day, Week, and Month views.\n *\n * @template T - Type of the drop target (e.g., slot index, day string, etc.)\n */\nexport function useDragDropHandlers<T = any>(\n  options: UseDragDropHandlersOptions<T>\n): DragDropHandlers<T> {\n  const {\n    enabled,\n    mode,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    calculateDropTarget,\n    onExternalDrop,\n  } = options;\n\n  const stableOnEventDrop = useEffectEvent(onEventDrop || (() => {}));\n  const stableOnEventDragStart = useEffectEvent(onEventDragStart || (() => {}));\n  const stableOnEventDragEnd = useEffectEvent(onEventDragEnd || (() => {}));\n  const stableOnExternalDrop = useEffectEvent(onExternalDrop || (() => {}));\n\n  const dragState = useDragState();\n  const [dropTarget, setDropTarget] = useState<T | null>(null);\n\n  const handleDragEnd = useCallback(() => {\n    dragState.endDrag();\n    setDropTarget(null);\n    stableOnEventDragEnd();\n  }, [dragState]);\n\n  const handleDragStart = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n      dragState.startDrag(event);\n      stableOnEventDragStart(event);\n    },\n    [enabled, mode, dragState]\n  );\n\n  const handleDragOver = useCallback(\n    (event: React.DragEvent, target: T) => {\n      if (mode === 'static') {\n        return;\n      }\n\n      let isInternalDrag = dragState.state.isDragging;\n\n      if (isInternalDrag && !event.dataTransfer.types.includes('application/json')) {\n        handleDragEnd();\n        isInternalDrag = false;\n      }\n\n      if (isInternalDrag && !enabled) {\n        return;\n      }\n\n      if (!isInternalDrag && !onExternalDrop) {\n        return;\n      }\n\n      event.preventDefault();\n      event.dataTransfer.dropEffect = isInternalDrag ? 'move' : 'copy';\n      setDropTarget(target);\n    },\n    [enabled, mode, dragState.state.isDragging, onExternalDrop, handleDragEnd]\n  );\n\n  const handleDragLeave = useCallback(() => {\n    setDropTarget(null);\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent, target: T) => {\n      event.preventDefault();\n\n      const isInternalDrag =\n        dragState.state.isDragging && event.dataTransfer.types.includes('application/json');\n\n      if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {\n        const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);\n        stableOnEventDrop({\n          eventId: dragState.state.draggedEventId!,\n          newStart: dayjs(start).format('YYYY-MM-DD HH:mm:ss'),\n          newEnd: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n          event: dragState.state.draggedEvent,\n        });\n        handleDragEnd();\n        return;\n      }\n\n      if (!isInternalDrag && onExternalDrop) {\n        if (dragState.state.isDragging) {\n          handleDragEnd();\n        }\n        stableOnExternalDrop(event, target);\n        setDropTarget(null);\n        return;\n      }\n\n      setDropTarget(null);\n    },\n    [\n      enabled,\n      dragState.state,\n      onEventDrop,\n      onExternalDrop,\n      calculateDropTarget,\n      handleDragEnd,\n      stableOnEventDrop,\n      stableOnExternalDrop,\n    ]\n  );\n\n  const isDraggableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      return (\n        enabled &&\n        mode !== 'static' &&\n        event.display !== 'background' &&\n        (canDragEvent ? canDragEvent(event) : true)\n      );\n    },\n    [enabled, mode, canDragEvent]\n  );\n\n  const isDropTarget = useCallback(\n    (target: T) => {\n      // Handle complex target comparison (for WeekView with day + slotIndex)\n      if (dropTarget && typeof dropTarget === 'object' && typeof target === 'object') {\n        return JSON.stringify(dropTarget) === JSON.stringify(target);\n      }\n      return dropTarget === target;\n    },\n    [dropTarget]\n  );\n\n  const dragContextValue: DragContextValue = {\n    isDragging: dragState.state.isDragging,\n    draggedEventId: dragState.state.draggedEventId,\n    draggedEvent: dragState.state.draggedEvent,\n    dropTarget: dragState.state.dropTarget,\n    onDragStart: handleDragStart,\n    onDragEnd: handleDragEnd,\n    setDropTarget: dragState.setDropTarget,\n  };\n\n  return {\n    dragContextValue,\n    dropTarget,\n    handleDragStart,\n    handleDragEnd,\n    handleDragOver,\n    handleDragLeave,\n    handleDrop,\n    isDraggableEvent,\n    isDropTarget,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-drag-drop-handlers.mjs","names":[],"sources":["../../src/hooks/use-drag-drop-handlers.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffectEvent, useState } from 'react';\nimport { DragContextValue } from '../components/DragContext/DragContext';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { useDragState } from './use-drag-state';\n\nexport interface DragPreview<T = any> {\n  start: DateTimeStringValue;\n  end: DateTimeStringValue;\n  target: T;\n}\n\nexport interface UseDragDropHandlersOptions<T = any> {\n  /** Whether drag and drop is enabled */\n  enabled: boolean;\n\n  /** Schedule interaction mode */\n  mode: ScheduleMode;\n\n  /** Called when event is dropped at new location */\n  onEventDrop?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be dragged */\n  canDragEvent?: (event: ScheduleEventData) => boolean;\n\n  /** Called when any event drag starts */\n  onEventDragStart?: (event: ScheduleEventData) => void;\n\n  /** Called when any event drag ends */\n  onEventDragEnd?: () => void;\n\n  /**\n   * Function to calculate drop target dates from drop location.\n   * Receives the target location and the dragged event.\n   */\n  calculateDropTarget: (target: T, draggedEvent: ScheduleEventData) => { start: Date; end: Date };\n\n  /** Called when an external item is dropped onto the schedule */\n  onExternalDrop?: (e: React.DragEvent, target: T) => void;\n}\n\nexport interface DragDropHandlers<T = any> {\n  /** Context value for DragContext.Provider */\n  dragContextValue: DragContextValue;\n\n  /** Current drop target */\n  dropTarget: T | null;\n\n  /** Handle drag start event */\n  handleDragStart: (event: ScheduleEventData) => void;\n\n  /** Handle drag end event */\n  handleDragEnd: () => void;\n\n  /** Handle drag over event */\n  handleDragOver: (e: React.DragEvent, target: T) => void;\n\n  /** Handle drag leave event */\n  handleDragLeave: (event?: React.DragEvent) => void;\n\n  /** Handle drop event */\n  handleDrop: (e: React.DragEvent, target: T) => void;\n\n  /** Check if event is draggable */\n  isDraggableEvent: (event: ScheduleEventData) => boolean;\n\n  /** Check if target is the current drop target */\n  isDropTarget: (target: T) => boolean;\n\n  /** Snapped drop preview used to render the drag ghost, or `null` when not dragging */\n  dragPreview: DragPreview<T> | null;\n\n  /** Sets the current drag preview */\n  setDragPreview: (preview: DragPreview<T> | null) => void;\n}\n\n/**\n * Hook that provides unified drag-drop handlers for Schedule views.\n * Handles drag state management and event drops across Day, Week, and Month views.\n *\n * @template T - Type of the drop target (e.g., slot index, day string, etc.)\n */\nexport function useDragDropHandlers<T = any>(\n  options: UseDragDropHandlersOptions<T>\n): DragDropHandlers<T> {\n  const {\n    enabled,\n    mode,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    calculateDropTarget,\n    onExternalDrop,\n  } = options;\n\n  const stableOnEventDrop = useEffectEvent(onEventDrop || (() => {}));\n  const stableOnEventDragStart = useEffectEvent(onEventDragStart || (() => {}));\n  const stableOnEventDragEnd = useEffectEvent(onEventDragEnd || (() => {}));\n  const stableOnExternalDrop = useEffectEvent(onExternalDrop || (() => {}));\n\n  const dragState = useDragState();\n  const [dropTarget, setDropTarget] = useState<T | null>(null);\n  const [dragPreview, setDragPreview] = useState<DragPreview<T> | null>(null);\n\n  const handleDragEnd = useCallback(() => {\n    dragState.endDrag();\n    setDropTarget(null);\n    setDragPreview(null);\n    stableOnEventDragEnd();\n  }, [dragState]);\n\n  const handleDragStart = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n      dragState.startDrag(event);\n      stableOnEventDragStart(event);\n    },\n    [enabled, mode, dragState]\n  );\n\n  const handleDragOver = useCallback(\n    (event: React.DragEvent, target: T) => {\n      if (mode === 'static') {\n        return;\n      }\n\n      let isInternalDrag = dragState.state.isDragging;\n\n      if (isInternalDrag && !event.dataTransfer.types.includes('application/json')) {\n        handleDragEnd();\n        isInternalDrag = false;\n      }\n\n      if (isInternalDrag && !enabled) {\n        return;\n      }\n\n      if (!isInternalDrag && !onExternalDrop) {\n        return;\n      }\n\n      event.preventDefault();\n      event.dataTransfer.dropEffect = isInternalDrag ? 'move' : 'copy';\n      setDropTarget(target);\n    },\n    [enabled, mode, dragState.state.isDragging, onExternalDrop, handleDragEnd]\n  );\n\n  const handleDragLeave = useCallback((event?: React.DragEvent) => {\n    if (event?.currentTarget) {\n      const rect = event.currentTarget.getBoundingClientRect();\n      const isInside =\n        event.clientX >= rect.left &&\n        event.clientX < rect.right &&\n        event.clientY >= rect.top &&\n        event.clientY < rect.bottom;\n      if (isInside) {\n        return;\n      }\n    }\n\n    setDropTarget(null);\n    setDragPreview(null);\n  }, []);\n\n  const handleDrop = useCallback(\n    (event: React.DragEvent, target: T) => {\n      event.preventDefault();\n\n      const isInternalDrag =\n        dragState.state.isDragging && event.dataTransfer.types.includes('application/json');\n\n      if (isInternalDrag && enabled && dragState.state.draggedEvent && onEventDrop) {\n        const { start, end } = calculateDropTarget(target, dragState.state.draggedEvent);\n        stableOnEventDrop({\n          eventId: dragState.state.draggedEventId!,\n          newStart: dayjs(start).format('YYYY-MM-DD HH:mm:ss'),\n          newEnd: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n          event: dragState.state.draggedEvent,\n        });\n        handleDragEnd();\n        return;\n      }\n\n      if (!isInternalDrag && onExternalDrop) {\n        if (dragState.state.isDragging) {\n          handleDragEnd();\n        }\n        stableOnExternalDrop(event, target);\n        setDropTarget(null);\n        setDragPreview(null);\n        return;\n      }\n\n      setDropTarget(null);\n      setDragPreview(null);\n    },\n    [\n      enabled,\n      dragState.state,\n      onEventDrop,\n      onExternalDrop,\n      calculateDropTarget,\n      handleDragEnd,\n      stableOnEventDrop,\n      stableOnExternalDrop,\n    ]\n  );\n\n  const isDraggableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      return (\n        enabled &&\n        mode !== 'static' &&\n        event.display !== 'background' &&\n        (canDragEvent ? canDragEvent(event) : true)\n      );\n    },\n    [enabled, mode, canDragEvent]\n  );\n\n  const isDropTarget = useCallback(\n    (target: T) => {\n      // Handle complex target comparison (for WeekView with day + slotIndex)\n      if (dropTarget && typeof dropTarget === 'object' && typeof target === 'object') {\n        return JSON.stringify(dropTarget) === JSON.stringify(target);\n      }\n      return dropTarget === target;\n    },\n    [dropTarget]\n  );\n\n  const dragContextValue: DragContextValue = {\n    isDragging: dragState.state.isDragging,\n    draggedEventId: dragState.state.draggedEventId,\n    draggedEvent: dragState.state.draggedEvent,\n    dropTarget: dragState.state.dropTarget,\n    onDragStart: handleDragStart,\n    onDragEnd: handleDragEnd,\n    setDropTarget: dragState.setDropTarget,\n  };\n\n  return {\n    dragContextValue,\n    dropTarget,\n    handleDragStart,\n    handleDragEnd,\n    handleDragOver,\n    handleDragLeave,\n    handleDrop,\n    isDraggableEvent,\n    isDropTarget,\n    dragPreview,\n    setDragPreview,\n  };\n}\n"],"mappings":"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"}

package/esm/hooks/use-event-resize.mjs

@@ -4,7 +4,7 @@ import { parseTimeString } from "../utils/parse-time-string/parse-time-string.mj
 import dayjs from "dayjs";
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/schedule/src/hooks/use-event-resize.ts
-function useEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, onEventResize, canResizeEvent }) {
+function useEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent }) {
 	const [resizeState, setResizeState] = useState(null);
 	const resizeRef = useRef(null);
 	const justResizedRef = useRef(false);
@@ -14,13 +14,17 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 	const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
 	const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
 	const clampedInterval = clampIntervalMinutes(intervalMinutes);
+	const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);
 	const literalRange = endMinutes - startMinutes;
 	const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;
-	const minHeightPercent = clampedInterval / totalMinutes * 100;
 	const clampAndSnap = useCallback((minutes) => {
-		const snapped = Math.round(minutes / clampedInterval) * clampedInterval;
-		return Math.max(0, Math.min(literalRange, snapped));
-	}, [literalRange, clampedInterval]);
+		const snapped = Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
 	const percentToDateTime = useCallback((percent, eventDate) => {
 		const minutes = percent / 100 * totalMinutes;
 		const snappedMinutes = clampAndSnap(minutes);
@@ -33,10 +37,17 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 		startMinutes,
 		clampAndSnap
 	]);
-	const snapPercent = useCallback((percent) => {
-		const minutes = percent / 100 * totalMinutes;
-		return clampAndSnap(minutes) / totalMinutes * 100;
-	}, [totalMinutes, clampAndSnap]);
+	const snapEdgeMinutes = useCallback((minutes, direction) => {
+		const absolute = startMinutes + minutes;
+		const snapped = direction === "up" ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
+	const percentToMinutes = useCallback((percent) => percent / 100 * totalMinutes, [totalMinutes]);
+	const minutesToPercent = useCallback((minutes) => minutes / totalMinutes * 100, [totalMinutes]);
 	const handleResizeStart = useCallback(({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent }) => {
 		if (!enabled || mode === "static") return;
 		pointerEvent.preventDefault();
@@ -68,14 +79,18 @@ function useEventResize({ enabled = false, mode = "default", startTime, endTime,
 			const containerRect = state.container.getBoundingClientRect();
 			const relativeY = e.clientY - containerRect.top;
 			const rawPercent = Math.max(0, Math.min(100, relativeY / containerRect.height * 100));
-			const snappedPercent = snapPercent(rawPercent);
+			const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));
 			let newTop = state.originalTop;
 			let newHeight = state.originalHeight;
-			if (state.edge === "bottom") newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);
-			else {
-				const originalBottom = state.originalTop + state.originalHeight;
-				newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);
-				newHeight = originalBottom - newTop;
+			if (state.edge === "bottom") {
+				const topMinutes = percentToMinutes(state.originalTop);
+				const minEndMinutes = snapEdgeMinutes(topMinutes + clampedResizeInterval, "up");
+				newHeight = Math.max(0, minutesToPercent(Math.max(draggedMinutes, minEndMinutes)) - state.originalTop);
+			} else {
+				const bottomMinutes = percentToMinutes(state.originalTop + state.originalHeight);
+				const maxStartMinutes = snapEdgeMinutes(bottomMinutes - clampedResizeInterval, "down");
+				newTop = minutesToPercent(Math.min(draggedMinutes, maxStartMinutes));
+				newHeight = Math.max(0, state.originalTop + state.originalHeight - newTop);
 			}
 			resizeRef.current = {
 				...state,

package/esm/hooks/use-event-resize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-event-resize.mjs","names":[],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' | 'bottom';\n\ninterface ResizeState {\n  eventId: string | number;\n  event: ScheduleEventData;\n  edge: ResizeEdge;\n  container: HTMLElement;\n  originalTop: number;\n  originalHeight: number;\n  currentTop: number;\n  currentHeight: number;\n  eventDate: string;\n  originalStart: DateTimeStringValue;\n  originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n  enabled?: boolean;\n  mode?: ScheduleMode;\n  startTime: string;\n  endTime: string;\n  intervalMinutes: number;\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n  enabled = false,\n  mode = 'default',\n  startTime,\n  endTime,\n  intervalMinutes,\n  onEventResize,\n  canResizeEvent,\n}: UseEventResizeInput) {\n  const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n  const resizeRef = useRef<ResizeState | null>(null);\n  const justResizedRef = useRef(false);\n  const stableOnEventResize = useEffectEvent(onEventResize || (() => {}));\n\n  const parsedStartTime = parseTimeString(startTime);\n  const parsedEndTime = parseTimeString(endTime);\n  const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n  const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n  const clampedInterval = clampIntervalMinutes(intervalMinutes);\n  const literalRange = endMinutes - startMinutes;\n  const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n  const minHeightPercent = (clampedInterval / totalMinutes) * 100;\n\n  const clampAndSnap = useCallback(\n    (minutes: number): number => {\n      const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n      return Math.max(0, Math.min(literalRange, snapped));\n    },\n    [literalRange, clampedInterval]\n  );\n\n  const percentToDateTime = useCallback(\n    (percent: number, eventDate: string): DateTimeStringValue => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      const totalMins = startMinutes + snappedMinutes;\n      const hours = Math.floor(totalMins / 60);\n      const mins = totalMins % 60;\n      return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n    },\n    [totalMinutes, startMinutes, clampAndSnap]\n  );\n\n  const snapPercent = useCallback(\n    (percent: number): number => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      return (snappedMinutes / totalMinutes) * 100;\n    },\n    [totalMinutes, clampAndSnap]\n  );\n\n  const handleResizeStart = useCallback(\n    ({\n      event,\n      edge,\n      container,\n      originalTop,\n      originalHeight,\n      eventDate,\n      pointerEvent,\n    }: {\n      event: ScheduleEventData;\n      edge: ResizeEdge;\n      container: HTMLElement;\n      originalTop: number;\n      originalHeight: number;\n      eventDate: string;\n      pointerEvent: React.PointerEvent;\n    }) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n\n      pointerEvent.preventDefault();\n      pointerEvent.stopPropagation();\n\n      const state: ResizeState = {\n        eventId: event.id,\n        event,\n        edge,\n        container,\n        originalTop,\n        originalHeight,\n        currentTop: originalTop,\n        currentHeight: originalHeight,\n        eventDate,\n        originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n        originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n      };\n\n      resizeRef.current = state;\n      setResizeState(state);\n    },\n    [enabled, mode]\n  );\n\n  const isResizing = resizeState !== null;\n\n  useEffect(() => {\n    if (!isResizing) {\n      return undefined;\n    }\n\n    const savedUserSelect = document.body.style.userSelect;\n    document.body.style.userSelect = 'none';\n\n    const handlePointerMove = (e: PointerEvent) => {\n      const state = resizeRef.current;\n      if (!state) {\n        return;\n      }\n\n      const containerRect = state.container.getBoundingClientRect();\n      const relativeY = e.clientY - containerRect.top;\n      const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n      const snappedPercent = snapPercent(rawPercent);\n\n      let newTop = state.originalTop;\n      let newHeight = state.originalHeight;\n\n      if (state.edge === 'bottom') {\n        newHeight = Math.max(minHeightPercent, snappedPercent - state.originalTop);\n      } else {\n        const originalBottom = state.originalTop + state.originalHeight;\n        newTop = Math.min(snappedPercent, originalBottom - minHeightPercent);\n        newHeight = originalBottom - newTop;\n      }\n\n      resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n      setResizeState(resizeRef.current);\n    };\n\n    const handlePointerUp = () => {\n      const state = resizeRef.current;\n      if (state) {\n        if (\n          state.currentTop !== state.originalTop ||\n          state.currentHeight !== state.originalHeight\n        ) {\n          let newStart: DateTimeStringValue;\n          let newEnd: DateTimeStringValue;\n\n          if (state.edge === 'top') {\n            newStart = percentToDateTime(state.currentTop, state.eventDate);\n            newEnd = state.originalEnd;\n          } else {\n            newStart = state.originalStart;\n            newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n          }\n\n          stableOnEventResize({\n            eventId: state.eventId,\n            newStart,\n            newEnd,\n            event: state.event,\n          });\n        }\n      }\n      resizeRef.current = null;\n      setResizeState(null);\n      justResizedRef.current = true;\n      requestAnimationFrame(() => {\n        justResizedRef.current = false;\n      });\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.body.style.userSelect = savedUserSelect;\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isResizing]);\n\n  const getResizePosition = useCallback(\n    (eventId: string | number) => {\n      if (!resizeState || resizeState.eventId !== eventId) {\n        return null;\n      }\n      return { top: resizeState.currentTop, height: resizeState.currentHeight };\n    },\n    [resizeState]\n  );\n\n  const isResizableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static' || event.display === 'background') {\n        return false;\n      }\n      return canResizeEvent ? canResizeEvent(event) : true;\n    },\n    [enabled, mode, canResizeEvent]\n  );\n\n  const wasResizing = useCallback(() => justResizedRef.current, []);\n\n  return {\n    handleResizeStart,\n    isResizing,\n    resizingEventId: resizeState?.eventId ?? null,\n    getResizePosition,\n    isResizableEvent,\n    wasResizing,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-event-resize.mjs","names":[],"sources":["../../src/hooks/use-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'top' | 'bottom';\n\ninterface ResizeState {\n  eventId: string | number;\n  event: ScheduleEventData;\n  edge: ResizeEdge;\n  container: HTMLElement;\n  originalTop: number;\n  originalHeight: number;\n  currentTop: number;\n  currentHeight: number;\n  eventDate: string;\n  originalStart: DateTimeStringValue;\n  originalEnd: DateTimeStringValue;\n}\n\nexport interface UseEventResizeInput {\n  enabled?: boolean;\n  mode?: ScheduleMode;\n  startTime: string;\n  endTime: string;\n  intervalMinutes: number;\n  resizeIntervalMinutes?: number;\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useEventResize({\n  enabled = false,\n  mode = 'default',\n  startTime,\n  endTime,\n  intervalMinutes,\n  resizeIntervalMinutes,\n  onEventResize,\n  canResizeEvent,\n}: UseEventResizeInput) {\n  const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n  const resizeRef = useRef<ResizeState | null>(null);\n  const justResizedRef = useRef(false);\n  const stableOnEventResize = useEffectEvent(onEventResize || (() => {}));\n\n  const parsedStartTime = parseTimeString(startTime);\n  const parsedEndTime = parseTimeString(endTime);\n  const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n  const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n  const clampedInterval = clampIntervalMinutes(intervalMinutes);\n  const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);\n  const literalRange = endMinutes - startMinutes;\n  const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n\n  // Snapping happens in absolute minutes from midnight – the same grid `calculateDropTime`\n  // uses for drag and drop. Snapping relative to `startTime` would put resized edges on a\n  // different grid than dragged events whenever `startTime` is not a multiple of the interval\n  // (with `startTime=\"08:10\"` and a 30 minute step, drops land on :00/:30 but resizes on\n  // :10/:40, so the two operations could never align an event).\n  const clampAndSnap = useCallback(\n    (minutes: number): number => {\n      const snapped =\n        Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;\n      return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n    },\n    [literalRange, clampedResizeInterval, startMinutes]\n  );\n\n  const percentToDateTime = useCallback(\n    (percent: number, eventDate: string): DateTimeStringValue => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      const totalMins = startMinutes + snappedMinutes;\n      const hours = Math.floor(totalMins / 60);\n      const mins = totalMins % 60;\n      return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n    },\n    [totalMinutes, startMinutes, clampAndSnap]\n  );\n\n  const snapEdgeMinutes = useCallback(\n    (minutes: number, direction: 'up' | 'down'): number => {\n      const absolute = startMinutes + minutes;\n      const snapped =\n        direction === 'up'\n          ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval\n          : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;\n      return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n    },\n    [literalRange, clampedResizeInterval, startMinutes]\n  );\n\n  const percentToMinutes = useCallback(\n    (percent: number): number => (percent / 100) * totalMinutes,\n    [totalMinutes]\n  );\n\n  const minutesToPercent = useCallback(\n    (minutes: number): number => (minutes / totalMinutes) * 100,\n    [totalMinutes]\n  );\n\n  const handleResizeStart = useCallback(\n    ({\n      event,\n      edge,\n      container,\n      originalTop,\n      originalHeight,\n      eventDate,\n      pointerEvent,\n    }: {\n      event: ScheduleEventData;\n      edge: ResizeEdge;\n      container: HTMLElement;\n      originalTop: number;\n      originalHeight: number;\n      eventDate: string;\n      pointerEvent: React.PointerEvent;\n    }) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n\n      pointerEvent.preventDefault();\n      pointerEvent.stopPropagation();\n\n      const state: ResizeState = {\n        eventId: event.id,\n        event,\n        edge,\n        container,\n        originalTop,\n        originalHeight,\n        currentTop: originalTop,\n        currentHeight: originalHeight,\n        eventDate,\n        originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n        originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n      };\n\n      resizeRef.current = state;\n      setResizeState(state);\n    },\n    [enabled, mode]\n  );\n\n  const isResizing = resizeState !== null;\n\n  useEffect(() => {\n    if (!isResizing) {\n      return undefined;\n    }\n\n    const savedUserSelect = document.body.style.userSelect;\n    document.body.style.userSelect = 'none';\n\n    const handlePointerMove = (e: PointerEvent) => {\n      const state = resizeRef.current;\n      if (!state) {\n        return;\n      }\n\n      const containerRect = state.container.getBoundingClientRect();\n      const relativeY = e.clientY - containerRect.top;\n      const rawPercent = Math.max(0, Math.min(100, (relativeY / containerRect.height) * 100));\n      const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));\n\n      let newTop = state.originalTop;\n      let newHeight = state.originalHeight;\n\n      if (state.edge === 'bottom') {\n        const topMinutes = percentToMinutes(state.originalTop);\n        const minEndMinutes = snapEdgeMinutes(topMinutes + clampedResizeInterval, 'up');\n        const endMinutes = Math.max(draggedMinutes, minEndMinutes);\n        newHeight = Math.max(0, minutesToPercent(endMinutes) - state.originalTop);\n      } else {\n        const bottomMinutes = percentToMinutes(state.originalTop + state.originalHeight);\n        const maxStartMinutes = snapEdgeMinutes(bottomMinutes - clampedResizeInterval, 'down');\n        const startMinutesValue = Math.min(draggedMinutes, maxStartMinutes);\n        newTop = minutesToPercent(startMinutesValue);\n        newHeight = Math.max(0, state.originalTop + state.originalHeight - newTop);\n      }\n\n      resizeRef.current = { ...state, currentTop: newTop, currentHeight: newHeight };\n      setResizeState(resizeRef.current);\n    };\n\n    const handlePointerUp = () => {\n      const state = resizeRef.current;\n      if (state) {\n        if (\n          state.currentTop !== state.originalTop ||\n          state.currentHeight !== state.originalHeight\n        ) {\n          let newStart: DateTimeStringValue;\n          let newEnd: DateTimeStringValue;\n\n          if (state.edge === 'top') {\n            newStart = percentToDateTime(state.currentTop, state.eventDate);\n            newEnd = state.originalEnd;\n          } else {\n            newStart = state.originalStart;\n            newEnd = percentToDateTime(state.currentTop + state.currentHeight, state.eventDate);\n          }\n\n          stableOnEventResize({\n            eventId: state.eventId,\n            newStart,\n            newEnd,\n            event: state.event,\n          });\n        }\n      }\n      resizeRef.current = null;\n      setResizeState(null);\n      justResizedRef.current = true;\n      requestAnimationFrame(() => {\n        justResizedRef.current = false;\n      });\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.body.style.userSelect = savedUserSelect;\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isResizing]);\n\n  const getResizePosition = useCallback(\n    (eventId: string | number) => {\n      if (!resizeState || resizeState.eventId !== eventId) {\n        return null;\n      }\n      return { top: resizeState.currentTop, height: resizeState.currentHeight };\n    },\n    [resizeState]\n  );\n\n  const isResizableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static' || event.display === 'background') {\n        return false;\n      }\n      return canResizeEvent ? canResizeEvent(event) : true;\n    },\n    [enabled, mode, canResizeEvent]\n  );\n\n  const wasResizing = useCallback(() => justResizedRef.current, []);\n\n  return {\n    handleResizeStart,\n    isResizing,\n    resizingEventId: resizeState?.eventId ?? null,\n    getResizePosition,\n    isResizableEvent,\n    wasResizing,\n  };\n}\n"],"mappings":"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"}

package/esm/hooks/use-horizontal-event-resize.mjs

@@ -5,7 +5,7 @@ import { getDayRelativePercent } from "../utils/get-day-relative-percent/get-day
 import dayjs from "dayjs";
 import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
 //#region packages/@mantine/schedule/src/hooks/use-horizontal-event-resize.ts
-function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, onEventResize, canResizeEvent }) {
+function useHorizontalEventResize({ enabled = false, mode = "default", startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent }) {
 	const [resizeState, setResizeState] = useState(null);
 	const resizeRef = useRef(null);
 	const justResizedRef = useRef(false);
@@ -15,13 +15,17 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 	const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
 	const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
 	const clampedInterval = clampIntervalMinutes(intervalMinutes);
+	const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);
 	const literalRange = endMinutes - startMinutes;
 	const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;
-	const minWidthPercent = clampedInterval / totalMinutes * 100;
 	const clampAndSnap = useCallback((minutes) => {
-		const snapped = Math.round(minutes / clampedInterval) * clampedInterval;
-		return Math.max(0, Math.min(literalRange, snapped));
-	}, [literalRange, clampedInterval]);
+		const snapped = Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
 	const percentToDateTime = useCallback((percent, eventDate) => {
 		const minutes = percent / 100 * totalMinutes;
 		const snappedMinutes = clampAndSnap(minutes);
@@ -34,10 +38,17 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 		startMinutes,
 		clampAndSnap
 	]);
-	const snapPercent = useCallback((percent) => {
-		const minutes = percent / 100 * totalMinutes;
-		return clampAndSnap(minutes) / totalMinutes * 100;
-	}, [totalMinutes, clampAndSnap]);
+	const snapEdgeMinutes = useCallback((minutes, direction) => {
+		const absolute = startMinutes + minutes;
+		const snapped = direction === "up" ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;
+		return Math.max(0, Math.min(literalRange, snapped - startMinutes));
+	}, [
+		literalRange,
+		clampedResizeInterval,
+		startMinutes
+	]);
+	const percentToMinutes = useCallback((percent) => percent / 100 * totalMinutes, [totalMinutes]);
+	const minutesToPercent = useCallback((minutes) => minutes / totalMinutes * 100, [totalMinutes]);
 	const handleResizeStart = useCallback(({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex = 0, dayCount = 1, pointerEvent }) => {
 		if (!enabled || mode === "static") return;
 		pointerEvent.preventDefault();
@@ -78,14 +89,18 @@ function useHorizontalEventResize({ enabled = false, mode = "default", startTime
 				dayIndex: state.dayIndex,
 				dayCount: state.dayCount
 			});
-			const snappedPercent = snapPercent(rawPercent);
+			const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));
 			let newLeft = state.originalLeft;
 			let newWidth = state.originalWidth;
-			if (state.edge === "end") newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);
-			else {
-				const originalRight = state.originalLeft + state.originalWidth;
-				newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);
-				newWidth = originalRight - newLeft;
+			if (state.edge === "end") {
+				const leftMinutes = percentToMinutes(state.originalLeft);
+				const minEndMinutes = snapEdgeMinutes(leftMinutes + clampedResizeInterval, "up");
+				newWidth = Math.max(0, minutesToPercent(Math.max(draggedMinutes, minEndMinutes)) - state.originalLeft);
+			} else {
+				const rightMinutes = percentToMinutes(state.originalLeft + state.originalWidth);
+				const maxStartMinutes = snapEdgeMinutes(rightMinutes - clampedResizeInterval, "down");
+				newLeft = minutesToPercent(Math.min(draggedMinutes, maxStartMinutes));
+				newWidth = Math.max(0, state.originalLeft + state.originalWidth - newLeft);
 			}
 			resizeRef.current = {
 				...state,

package/esm/hooks/use-horizontal-event-resize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-horizontal-event-resize.mjs","names":[],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' | 'end';\n\ninterface ResizeState {\n  eventId: string | number;\n  event: ScheduleEventData;\n  edge: ResizeEdge;\n  container: HTMLElement;\n  originalLeft: number;\n  originalWidth: number;\n  currentLeft: number;\n  currentWidth: number;\n  eventDate: string;\n  originalStart: DateTimeStringValue;\n  originalEnd: DateTimeStringValue;\n  dayIndex: number;\n  dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\n  enabled?: boolean;\n  mode?: ScheduleMode;\n  startTime: string;\n  endTime: string;\n  intervalMinutes: number;\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useHorizontalEventResize({\n  enabled = false,\n  mode = 'default',\n  startTime,\n  endTime,\n  intervalMinutes,\n  onEventResize,\n  canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n  const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n  const resizeRef = useRef<ResizeState | null>(null);\n  const justResizedRef = useRef(false);\n  const stableOnEventResize = useEffectEvent(onEventResize || (() => {}));\n\n  const parsedStartTime = parseTimeString(startTime);\n  const parsedEndTime = parseTimeString(endTime);\n  const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n  const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n  const clampedInterval = clampIntervalMinutes(intervalMinutes);\n  const literalRange = endMinutes - startMinutes;\n  const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n  const minWidthPercent = (clampedInterval / totalMinutes) * 100;\n\n  const clampAndSnap = useCallback(\n    (minutes: number): number => {\n      const snapped = Math.round(minutes / clampedInterval) * clampedInterval;\n      return Math.max(0, Math.min(literalRange, snapped));\n    },\n    [literalRange, clampedInterval]\n  );\n\n  const percentToDateTime = useCallback(\n    (percent: number, eventDate: string): DateTimeStringValue => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      const totalMins = startMinutes + snappedMinutes;\n      const hours = Math.floor(totalMins / 60);\n      const mins = totalMins % 60;\n      return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n    },\n    [totalMinutes, startMinutes, clampAndSnap]\n  );\n\n  const snapPercent = useCallback(\n    (percent: number): number => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      return (snappedMinutes / totalMinutes) * 100;\n    },\n    [totalMinutes, clampAndSnap]\n  );\n\n  const handleResizeStart = useCallback(\n    ({\n      event,\n      edge,\n      container,\n      originalLeft,\n      originalWidth,\n      eventDate,\n      dayIndex = 0,\n      dayCount = 1,\n      pointerEvent,\n    }: {\n      event: ScheduleEventData;\n      edge: ResizeEdge;\n      container: HTMLElement;\n      originalLeft: number;\n      originalWidth: number;\n      eventDate: string;\n      dayIndex?: number;\n      dayCount?: number;\n      pointerEvent: React.PointerEvent;\n    }) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n\n      pointerEvent.preventDefault();\n      pointerEvent.stopPropagation();\n\n      const state: ResizeState = {\n        eventId: event.id,\n        event,\n        edge,\n        container,\n        originalLeft,\n        originalWidth,\n        currentLeft: originalLeft,\n        currentWidth: originalWidth,\n        eventDate,\n        originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n        originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n        dayIndex,\n        dayCount,\n      };\n\n      resizeRef.current = state;\n      setResizeState(state);\n    },\n    [enabled, mode]\n  );\n\n  const isResizing = resizeState !== null;\n\n  useEffect(() => {\n    if (!isResizing) {\n      return undefined;\n    }\n\n    const savedUserSelect = document.body.style.userSelect;\n    const savedCursor = document.body.style.cursor;\n    document.body.style.userSelect = 'none';\n    document.body.style.cursor = 'ew-resize';\n\n    const handlePointerMove = (e: PointerEvent) => {\n      const state = resizeRef.current;\n      if (!state) {\n        return;\n      }\n\n      const containerRect = state.container.getBoundingClientRect();\n      const rawPercent = getDayRelativePercent({\n        clientX: e.clientX,\n        containerLeft: containerRect.left,\n        containerWidth: containerRect.width,\n        dayIndex: state.dayIndex,\n        dayCount: state.dayCount,\n      });\n      const snappedPercent = snapPercent(rawPercent);\n\n      let newLeft = state.originalLeft;\n      let newWidth = state.originalWidth;\n\n      if (state.edge === 'end') {\n        newWidth = Math.max(minWidthPercent, snappedPercent - state.originalLeft);\n      } else {\n        const originalRight = state.originalLeft + state.originalWidth;\n        newLeft = Math.min(snappedPercent, originalRight - minWidthPercent);\n        newWidth = originalRight - newLeft;\n      }\n\n      resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n      setResizeState(resizeRef.current);\n    };\n\n    const handlePointerUp = () => {\n      const state = resizeRef.current;\n      if (state) {\n        if (\n          state.currentLeft !== state.originalLeft ||\n          state.currentWidth !== state.originalWidth\n        ) {\n          let newStart: DateTimeStringValue;\n          let newEnd: DateTimeStringValue;\n\n          if (state.edge === 'start') {\n            newStart = percentToDateTime(state.currentLeft, state.eventDate);\n            newEnd = state.originalEnd;\n          } else {\n            newStart = state.originalStart;\n            newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n          }\n\n          stableOnEventResize({\n            eventId: state.eventId,\n            newStart,\n            newEnd,\n            event: state.event,\n          });\n        }\n      }\n      resizeRef.current = null;\n      setResizeState(null);\n      justResizedRef.current = true;\n      requestAnimationFrame(() => {\n        justResizedRef.current = false;\n      });\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.body.style.userSelect = savedUserSelect;\n      document.body.style.cursor = savedCursor;\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isResizing]);\n\n  const getResizePosition = useCallback(\n    (eventId: string | number) => {\n      if (!resizeState || resizeState.eventId !== eventId) {\n        return null;\n      }\n      return { left: resizeState.currentLeft, width: resizeState.currentWidth };\n    },\n    [resizeState]\n  );\n\n  const isResizableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static' || event.display === 'background') {\n        return false;\n      }\n      return canResizeEvent ? canResizeEvent(event) : true;\n    },\n    [enabled, mode, canResizeEvent]\n  );\n\n  const wasResizing = useCallback(() => justResizedRef.current, []);\n\n  return {\n    handleResizeStart,\n    isResizing,\n    resizingEventId: resizeState?.eventId ?? null,\n    resizingEdge: resizeState?.edge ?? null,\n    getResizePosition,\n    isResizableEvent,\n    wasResizing,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-horizontal-event-resize.mjs","names":[],"sources":["../../src/hooks/use-horizontal-event-resize.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';\nimport { clampIntervalMinutes } from '../utils/clamp-interval-minutes/clamp-interval-minutes';\nimport { getDayRelativePercent } from '../utils/get-day-relative-percent/get-day-relative-percent';\nimport { parseTimeString } from '../utils/parse-time-string/parse-time-string';\n\ntype ResizeEdge = 'start' | 'end';\n\ninterface ResizeState {\n  eventId: string | number;\n  event: ScheduleEventData;\n  edge: ResizeEdge;\n  container: HTMLElement;\n  originalLeft: number;\n  originalWidth: number;\n  currentLeft: number;\n  currentWidth: number;\n  eventDate: string;\n  originalStart: DateTimeStringValue;\n  originalEnd: DateTimeStringValue;\n  dayIndex: number;\n  dayCount: number;\n}\n\nexport interface UseHorizontalEventResizeInput {\n  enabled?: boolean;\n  mode?: ScheduleMode;\n  startTime: string;\n  endTime: string;\n  intervalMinutes: number;\n  resizeIntervalMinutes?: number;\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n}\n\nexport function useHorizontalEventResize({\n  enabled = false,\n  mode = 'default',\n  startTime,\n  endTime,\n  intervalMinutes,\n  resizeIntervalMinutes,\n  onEventResize,\n  canResizeEvent,\n}: UseHorizontalEventResizeInput) {\n  const [resizeState, setResizeState] = useState<ResizeState | null>(null);\n  const resizeRef = useRef<ResizeState | null>(null);\n  const justResizedRef = useRef(false);\n  const stableOnEventResize = useEffectEvent(onEventResize || (() => {}));\n\n  const parsedStartTime = parseTimeString(startTime);\n  const parsedEndTime = parseTimeString(endTime);\n  const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;\n  const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;\n  const clampedInterval = clampIntervalMinutes(intervalMinutes);\n  const clampedResizeInterval = clampIntervalMinutes(resizeIntervalMinutes ?? intervalMinutes);\n  const literalRange = endMinutes - startMinutes;\n  const totalMinutes = Math.ceil(literalRange / clampedInterval) * clampedInterval;\n\n  // Snapped in absolute minutes from midnight so resized edges land on the same grid as\n  // dragged events – see the matching comment in `use-event-resize`.\n  const clampAndSnap = useCallback(\n    (minutes: number): number => {\n      const snapped =\n        Math.round((startMinutes + minutes) / clampedResizeInterval) * clampedResizeInterval;\n      return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n    },\n    [literalRange, clampedResizeInterval, startMinutes]\n  );\n\n  const percentToDateTime = useCallback(\n    (percent: number, eventDate: string): DateTimeStringValue => {\n      const minutes = (percent / 100) * totalMinutes;\n      const snappedMinutes = clampAndSnap(minutes);\n      const totalMins = startMinutes + snappedMinutes;\n      const hours = Math.floor(totalMins / 60);\n      const mins = totalMins % 60;\n      return `${eventDate} ${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}:00`;\n    },\n    [totalMinutes, startMinutes, clampAndSnap]\n  );\n\n  const snapEdgeMinutes = useCallback(\n    (minutes: number, direction: 'up' | 'down'): number => {\n      const absolute = startMinutes + minutes;\n      const snapped =\n        direction === 'up'\n          ? Math.ceil(absolute / clampedResizeInterval) * clampedResizeInterval\n          : Math.floor(absolute / clampedResizeInterval) * clampedResizeInterval;\n      return Math.max(0, Math.min(literalRange, snapped - startMinutes));\n    },\n    [literalRange, clampedResizeInterval, startMinutes]\n  );\n\n  const percentToMinutes = useCallback(\n    (percent: number): number => (percent / 100) * totalMinutes,\n    [totalMinutes]\n  );\n\n  const minutesToPercent = useCallback(\n    (minutes: number): number => (minutes / totalMinutes) * 100,\n    [totalMinutes]\n  );\n\n  const handleResizeStart = useCallback(\n    ({\n      event,\n      edge,\n      container,\n      originalLeft,\n      originalWidth,\n      eventDate,\n      dayIndex = 0,\n      dayCount = 1,\n      pointerEvent,\n    }: {\n      event: ScheduleEventData;\n      edge: ResizeEdge;\n      container: HTMLElement;\n      originalLeft: number;\n      originalWidth: number;\n      eventDate: string;\n      dayIndex?: number;\n      dayCount?: number;\n      pointerEvent: React.PointerEvent;\n    }) => {\n      if (!enabled || mode === 'static') {\n        return;\n      }\n\n      pointerEvent.preventDefault();\n      pointerEvent.stopPropagation();\n\n      const state: ResizeState = {\n        eventId: event.id,\n        event,\n        edge,\n        container,\n        originalLeft,\n        originalWidth,\n        currentLeft: originalLeft,\n        currentWidth: originalWidth,\n        eventDate,\n        originalStart: dayjs(event.start).format('YYYY-MM-DD HH:mm:ss'),\n        originalEnd: dayjs(event.end).format('YYYY-MM-DD HH:mm:ss'),\n        dayIndex,\n        dayCount,\n      };\n\n      resizeRef.current = state;\n      setResizeState(state);\n    },\n    [enabled, mode]\n  );\n\n  const isResizing = resizeState !== null;\n\n  useEffect(() => {\n    if (!isResizing) {\n      return undefined;\n    }\n\n    const savedUserSelect = document.body.style.userSelect;\n    const savedCursor = document.body.style.cursor;\n    document.body.style.userSelect = 'none';\n    document.body.style.cursor = 'ew-resize';\n\n    const handlePointerMove = (e: PointerEvent) => {\n      const state = resizeRef.current;\n      if (!state) {\n        return;\n      }\n\n      const containerRect = state.container.getBoundingClientRect();\n      const rawPercent = getDayRelativePercent({\n        clientX: e.clientX,\n        containerLeft: containerRect.left,\n        containerWidth: containerRect.width,\n        dayIndex: state.dayIndex,\n        dayCount: state.dayCount,\n      });\n      const draggedMinutes = clampAndSnap(percentToMinutes(rawPercent));\n\n      let newLeft = state.originalLeft;\n      let newWidth = state.originalWidth;\n\n      if (state.edge === 'end') {\n        const leftMinutes = percentToMinutes(state.originalLeft);\n        const minEndMinutes = snapEdgeMinutes(leftMinutes + clampedResizeInterval, 'up');\n        const endMinutes = Math.max(draggedMinutes, minEndMinutes);\n        newWidth = Math.max(0, minutesToPercent(endMinutes) - state.originalLeft);\n      } else {\n        const rightMinutes = percentToMinutes(state.originalLeft + state.originalWidth);\n        const maxStartMinutes = snapEdgeMinutes(rightMinutes - clampedResizeInterval, 'down');\n        const startMinutesValue = Math.min(draggedMinutes, maxStartMinutes);\n        newLeft = minutesToPercent(startMinutesValue);\n        newWidth = Math.max(0, state.originalLeft + state.originalWidth - newLeft);\n      }\n\n      resizeRef.current = { ...state, currentLeft: newLeft, currentWidth: newWidth };\n      setResizeState(resizeRef.current);\n    };\n\n    const handlePointerUp = () => {\n      const state = resizeRef.current;\n      if (state) {\n        if (\n          state.currentLeft !== state.originalLeft ||\n          state.currentWidth !== state.originalWidth\n        ) {\n          let newStart: DateTimeStringValue;\n          let newEnd: DateTimeStringValue;\n\n          if (state.edge === 'start') {\n            newStart = percentToDateTime(state.currentLeft, state.eventDate);\n            newEnd = state.originalEnd;\n          } else {\n            newStart = state.originalStart;\n            newEnd = percentToDateTime(state.currentLeft + state.currentWidth, state.eventDate);\n          }\n\n          stableOnEventResize({\n            eventId: state.eventId,\n            newStart,\n            newEnd,\n            event: state.event,\n          });\n        }\n      }\n      resizeRef.current = null;\n      setResizeState(null);\n      justResizedRef.current = true;\n      requestAnimationFrame(() => {\n        justResizedRef.current = false;\n      });\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.body.style.userSelect = savedUserSelect;\n      document.body.style.cursor = savedCursor;\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [isResizing]);\n\n  const getResizePosition = useCallback(\n    (eventId: string | number) => {\n      if (!resizeState || resizeState.eventId !== eventId) {\n        return null;\n      }\n      return { left: resizeState.currentLeft, width: resizeState.currentWidth };\n    },\n    [resizeState]\n  );\n\n  const isResizableEvent = useCallback(\n    (event: ScheduleEventData) => {\n      if (!enabled || mode === 'static' || event.display === 'background') {\n        return false;\n      }\n      return canResizeEvent ? canResizeEvent(event) : true;\n    },\n    [enabled, mode, canResizeEvent]\n  );\n\n  const wasResizing = useCallback(() => justResizedRef.current, []);\n\n  return {\n    handleResizeStart,\n    isResizing,\n    resizingEventId: resizeState?.eventId ?? null,\n    resizingEdge: resizeState?.edge ?? null,\n    getResizePosition,\n    isResizableEvent,\n    wasResizing,\n  };\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,yBAAyB,EACvC,UAAU,OACV,OAAO,WACP,WACA,SACA,iBACA,uBACA,eACA,kBACgC;CAChC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,IAAI;CACvE,MAAM,YAAY,OAA2B,IAAI;CACjD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,sBAAsB,eAAe,wBAAwB,CAAC,EAAE;CAEtE,MAAM,kBAAkB,gBAAgB,SAAS;CACjD,MAAM,gBAAgB,gBAAgB,OAAO;CAC7C,MAAM,eAAe,gBAAgB,QAAQ,KAAK,gBAAgB;CAClE,MAAM,aAAa,cAAc,QAAQ,KAAK,cAAc;CAC5D,MAAM,kBAAkB,qBAAqB,eAAe;CAC5D,MAAM,wBAAwB,qBAAqB,yBAAyB,eAAe;CAC3F,MAAM,eAAe,aAAa;CAClC,MAAM,eAAe,KAAK,KAAK,eAAe,eAAe,IAAI;CAIjE,MAAM,eAAe,aAClB,YAA4B;EAC3B,MAAM,UACJ,KAAK,OAAO,eAAe,WAAW,qBAAqB,IAAI;EACjE,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,UAAU,YAAY,CAAC;CACnE,GACA;EAAC;EAAc;EAAuB;CAAY,CACpD;CAEA,MAAM,oBAAoB,aACvB,SAAiB,cAA2C;EAC3D,MAAM,UAAW,UAAU,MAAO;EAClC,MAAM,iBAAiB,aAAa,OAAO;EAC3C,MAAM,YAAY,eAAe;EACjC,MAAM,QAAQ,KAAK,MAAM,YAAY,EAAE;EACvC,MAAM,OAAO,YAAY;EACzB,OAAO,GAAG,UAAU,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE;CACzF,GACA;EAAC;EAAc;EAAc;CAAY,CAC3C;CAEA,MAAM,kBAAkB,aACrB,SAAiB,cAAqC;EACrD,MAAM,WAAW,eAAe;EAChC,MAAM,UACJ,cAAc,OACV,KAAK,KAAK,WAAW,qBAAqB,IAAI,wBAC9C,KAAK,MAAM,WAAW,qBAAqB,IAAI;EACrD,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,UAAU,YAAY,CAAC;CACnE,GACA;EAAC;EAAc;EAAuB;CAAY,CACpD;CAEA,MAAM,mBAAmB,aACtB,YAA6B,UAAU,MAAO,cAC/C,CAAC,YAAY,CACf;CAEA,MAAM,mBAAmB,aACtB,YAA6B,UAAU,eAAgB,KACxD,CAAC,YAAY,CACf;CAEA,MAAM,oBAAoB,aACvB,EACC,OACA,MACA,WACA,cACA,eACA,WACA,WAAW,GACX,WAAW,GACX,mBAWI;EACJ,IAAI,CAAC,WAAW,SAAS,UACvB;EAGF,aAAa,eAAe;EAC5B,aAAa,gBAAgB;EAE7B,MAAM,QAAqB;GACzB,SAAS,MAAM;GACf;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,cAAc;GACd;GACA,eAAe,MAAM,MAAM,KAAK,CAAC,CAAC,OAAO,qBAAqB;GAC9D,aAAa,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,qBAAqB;GAC1D;GACA;EACF;EAEA,UAAU,UAAU;EACpB,eAAe,KAAK;CACtB,GACA,CAAC,SAAS,IAAI,CAChB;CAEA,MAAM,aAAa,gBAAgB;CAEnC,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,MAAM,kBAAkB,SAAS,KAAK,MAAM;EAC5C,MAAM,cAAc,SAAS,KAAK,MAAM;EACxC,SAAS,KAAK,MAAM,aAAa;EACjC,SAAS,KAAK,MAAM,SAAS;EAE7B,MAAM,qBAAqB,MAAoB;GAC7C,MAAM,QAAQ,UAAU;GACxB,IAAI,CAAC,OACH;GAGF,MAAM,gBAAgB,MAAM,UAAU,sBAAsB;GAC5D,MAAM,aAAa,sBAAsB;IACvC,SAAS,EAAE;IACX,eAAe,cAAc;IAC7B,gBAAgB,cAAc;IAC9B,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,CAAC;GACD,MAAM,iBAAiB,aAAa,iBAAiB,UAAU,CAAC;GAEhE,IAAI,UAAU,MAAM;GACpB,IAAI,WAAW,MAAM;GAErB,IAAI,MAAM,SAAS,OAAO;IACxB,MAAM,cAAc,iBAAiB,MAAM,YAAY;IACvD,MAAM,gBAAgB,gBAAgB,cAAc,uBAAuB,IAAI;IAE/E,WAAW,KAAK,IAAI,GAAG,iBADJ,KAAK,IAAI,gBAAgB,aACK,CAAC,IAAI,MAAM,YAAY;GAC1E,OAAO;IACL,MAAM,eAAe,iBAAiB,MAAM,eAAe,MAAM,aAAa;IAC9E,MAAM,kBAAkB,gBAAgB,eAAe,uBAAuB,MAAM;IAEpF,UAAU,iBADgB,KAAK,IAAI,gBAAgB,eACR,CAAC;IAC5C,WAAW,KAAK,IAAI,GAAG,MAAM,eAAe,MAAM,gBAAgB,OAAO;GAC3E;GAEA,UAAU,UAAU;IAAE,GAAG;IAAO,aAAa;IAAS,cAAc;GAAS;GAC7E,eAAe,UAAU,OAAO;EAClC;EAEA,MAAM,wBAAwB;GAC5B,MAAM,QAAQ,UAAU;GACxB,IAAI,OAEA;QAAA,MAAM,gBAAgB,MAAM,gBAC5B,MAAM,iBAAiB,MAAM,eAC7B;KACA,IAAI;KACJ,IAAI;KAEJ,IAAI,MAAM,SAAS,SAAS;MAC1B,WAAW,kBAAkB,MAAM,aAAa,MAAM,SAAS;MAC/D,SAAS,MAAM;KACjB,OAAO;MACL,WAAW,MAAM;MACjB,SAAS,kBAAkB,MAAM,cAAc,MAAM,cAAc,MAAM,SAAS;KACpF;KAEA,oBAAoB;MAClB,SAAS,MAAM;MACf;MACA;MACA,OAAO,MAAM;KACf,CAAC;IACH;;GAEF,UAAU,UAAU;GACpB,eAAe,IAAI;GACnB,eAAe,UAAU;GACzB,4BAA4B;IAC1B,eAAe,UAAU;GAC3B,CAAC;EACH;EAEA,SAAS,iBAAiB,eAAe,iBAAiB;EAC1D,SAAS,iBAAiB,aAAa,eAAe;EAEtD,aAAa;GACX,SAAS,KAAK,MAAM,aAAa;GACjC,SAAS,KAAK,MAAM,SAAS;GAC7B,SAAS,oBAAoB,eAAe,iBAAiB;GAC7D,SAAS,oBAAoB,aAAa,eAAe;EAC3D;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,MAAM,oBAAoB,aACvB,YAA6B;EAC5B,IAAI,CAAC,eAAe,YAAY,YAAY,SAC1C,OAAO;EAET,OAAO;GAAE,MAAM,YAAY;GAAa,OAAO,YAAY;EAAa;CAC1E,GACA,CAAC,WAAW,CACd;CAEA,MAAM,mBAAmB,aACtB,UAA6B;EAC5B,IAAI,CAAC,WAAW,SAAS,YAAY,MAAM,YAAY,cACrD,OAAO;EAET,OAAO,iBAAiB,eAAe,KAAK,IAAI;CAClD,GACA;EAAC;EAAS;EAAM;CAAc,CAChC;CAEA,MAAM,cAAc,kBAAkB,eAAe,SAAS,CAAC,CAAC;CAEhE,OAAO;EACL;EACA;EACA,iBAAiB,aAAa,WAAW;EACzC,cAAc,aAAa,QAAQ;EACnC;EACA;EACA;CACF;AACF"}

package/esm/index.mjs

@@ -46,6 +46,7 @@ import { CurrentTimeIndicator } from "./components/CurrentTimeIndicator/CurrentT
 import { DragContext } from "./components/DragContext/DragContext.mjs";
 import { ScheduleEvent } from "./components/ScheduleEvent/ScheduleEvent.mjs";
 import { MoreEvents } from "./components/MoreEvents/MoreEvents.mjs";
+import { ScheduleBackgroundEvent } from "./components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
 import { ScheduleHeader } from "./components/ScheduleHeader/ScheduleHeader.mjs";
 import { DayView } from "./components/DayView/DayView.mjs";
 import { MobileMonthView } from "./components/MobileMonthView/MobileMonthView.mjs";
@@ -57,4 +58,4 @@ import { ResourcesDayView } from "./components/ResourcesDayView/ResourcesDayView
 import { ResourcesWeekView } from "./components/ResourcesWeekView/ResourcesWeekView.mjs";
 import { ResourcesMonthView } from "./components/ResourcesMonthView/ResourcesMonthView.mjs";
 import { ResourcesSchedule } from "./components/ResourcesSchedule/ResourcesSchedule.mjs";
-export { AgendaView, CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, MobileMonthView, MonthView, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleEvent, ScheduleHeader, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayRelativePercent, getDayTimeIntervals, getEndOfWeek, getGroupToResourceIdMap, getIndexFromDragPoint, getLabel, getMonthDays, getMonthRange, getMonthsByQuarter, getMonthsList, getOrderedResources, getStartOfWeek, getTimeAxisEventStyle, getVisibleEvents, getWeekDays, getWeekNumber, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, sortEvents, toDateString, toTimeString, validateEvent };
+export { AgendaView, CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, MobileMonthView, MonthView, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayRelativePercent, getDayTimeIntervals, getEndOfWeek, getGroupToResourceIdMap, getIndexFromDragPoint, getLabel, getMonthDays, getMonthRange, getMonthsByQuarter, getMonthsList, getOrderedResources, getStartOfWeek, getTimeAxisEventStyle, getVisibleEvents, getWeekDays, getWeekNumber, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, sortEvents, toDateString, toTimeString, validateEvent };

package/esm/utils/calculate-drop-time/calculate-drop-time.mjs

@@ -1,14 +1,35 @@
 "use client";
+import { clampIntervalMinutes } from "../clamp-interval-minutes/clamp-interval-minutes.mjs";
 import { parseTimeString } from "../parse-time-string/parse-time-string.mjs";
 import dayjs from "dayjs";
 //#region packages/@mantine/schedule/src/utils/calculate-drop-time/calculate-drop-time.ts
-function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15 }) {
+function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15, slotOffset, slotSize, dragIntervalMinutes, startTime, endTime }) {
 	const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
 	const parsedTime = parseTimeString(targetSlotTime);
-	const baseTargetTime = dayjs(targetDate).startOf("day").hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
+	const targetDay = dayjs(targetDate).startOf("day");
+	const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
 	let finalTargetTime = baseTargetTime;
-	if (mouseYOffset > 0 && slotHeight > 0) {
-		const offsetRatio = mouseYOffset / slotHeight;
+	const offset = slotOffset ?? mouseYOffset;
+	const size = slotSize ?? slotHeight;
+	if (dragIntervalMinutes != null) {
+		const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);
+		const gridInterval = clampIntervalMinutes(intervalMinutes);
+		const rawStartMinutes = parsedTime.hours * 60 + parsedTime.minutes + (size > 0 ? offset / size : 0) * gridInterval;
+		let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;
+		const parsedEnd = endTime ? parseTimeString(endTime) : null;
+		const parsedStart = startTime ? parseTimeString(startTime) : null;
+		const maxStart = parsedEnd ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag : null;
+		const minStart = parsedStart ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag : null;
+		if (minStart !== null && maxStart !== null && minStart > maxStart) snappedStartMinutes = parsedStart.hours * 60 + parsedStart.minutes;
+		else {
+			if (maxStart !== null) snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);
+			if (minStart !== null) snappedStartMinutes = Math.max(snappedStartMinutes, minStart);
+		}
+		const dayOffset = Math.floor(snappedStartMinutes / 1440);
+		const minutesInDay = snappedStartMinutes - dayOffset * 1440;
+		finalTargetTime = targetDay.add(dayOffset, "day").hour(Math.floor(minutesInDay / 60)).minute(minutesInDay % 60).second(0);
+	} else if (offset > 0 && size > 0) {
+		const offsetRatio = offset / size;
 		const offsetMinutes = Math.round(offsetRatio * intervalMinutes);
 		finalTargetTime = baseTargetTime.add(offsetMinutes, "minute");
 	}

package/esm/utils/calculate-drop-time/calculate-drop-time.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"calculate-drop-time.mjs","names":[],"sources":["../../../src/utils/calculate-drop-time/calculate-drop-time.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, ScheduleEventData } from '../../types';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\nexport interface CalculateDropTimeInput {\n  /** The event being dragged */\n  draggedEvent: ScheduleEventData;\n\n  /** Target date where event will be dropped */\n  targetDate: AnyDateValue;\n\n  /** Target time slot start time in HH:mm:ss format */\n  targetSlotTime: string;\n\n  /** Mouse Y position relative to the slot */\n  mouseYOffset?: number;\n\n  /** Height of one slot in pixels */\n  slotHeight?: number;\n\n  /** Minutes per slot */\n  intervalMinutes?: number;\n}\n\nexport interface CalculateDropTimeResult {\n  /** New start date/time for the event */\n  start: Date;\n\n  /** New end date/time for the event */\n  end: Date;\n}\n\nexport function calculateDropTime({\n  draggedEvent,\n  targetDate,\n  targetSlotTime,\n  mouseYOffset = 0,\n  slotHeight = 64,\n  intervalMinutes = 15,\n}: CalculateDropTimeInput): CalculateDropTimeResult {\n  const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), 'millisecond');\n\n  const parsedTime = parseTimeString(targetSlotTime);\n  const targetDay = dayjs(targetDate).startOf('day');\n\n  const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);\n\n  let finalTargetTime = baseTargetTime;\n\n  if (mouseYOffset > 0 && slotHeight > 0) {\n    const offsetRatio = mouseYOffset / slotHeight;\n    const offsetMinutes = Math.round(offsetRatio * intervalMinutes);\n    finalTargetTime = baseTargetTime.add(offsetMinutes, 'minute');\n  }\n\n  const newStart = finalTargetTime.toDate();\n  const newEnd = finalTargetTime.add(eventDuration, 'millisecond').toDate();\n\n  return {\n    start: newStart,\n    end: newEnd,\n  };\n}\n"],"mappings":";;;;AAgCA,SAAgB,kBAAkB,EAChC,cACA,YACA,gBACA,eAAe,GACf,aAAa,IACb,kBAAkB,MACgC;CAClD,MAAM,gBAAgB,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,MAAM,aAAa,KAAK,GAAG,aAAa;CAE3F,MAAM,aAAa,gBAAgB,cAAc;CAGjD,MAAM,iBAFY,MAAM,UAAU,CAAC,CAAC,QAAQ,KAEb,CAAC,CAAC,KAAK,WAAW,KAAK,CAAC,CAAC,OAAO,WAAW,OAAO,CAAC,CAAC,OAAO,CAAC;CAE3F,IAAI,kBAAkB;CAEtB,IAAI,eAAe,KAAK,aAAa,GAAG;EACtC,MAAM,cAAc,eAAe;EACnC,MAAM,gBAAgB,KAAK,MAAM,cAAc,eAAe;EAC9D,kBAAkB,eAAe,IAAI,eAAe,QAAQ;CAC9D;CAKA,OAAO;EACL,OAJe,gBAAgB,OAIjB;EACd,KAJa,gBAAgB,IAAI,eAAe,aAAa,CAAC,CAAC,OAIrD;CACZ;AACF"}
+{"version":3,"file":"calculate-drop-time.mjs","names":[],"sources":["../../../src/utils/calculate-drop-time/calculate-drop-time.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, ScheduleEventData } from '../../types';\nimport { clampIntervalMinutes } from '../clamp-interval-minutes/clamp-interval-minutes';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\nexport interface CalculateDropTimeInput {\n  /** The event being dragged */\n  draggedEvent: ScheduleEventData;\n\n  /** Target date where event will be dropped */\n  targetDate: AnyDateValue;\n\n  /** Target time slot start time in HH:mm:ss format */\n  targetSlotTime: string;\n\n  /** Mouse Y position relative to the slot */\n  mouseYOffset?: number;\n\n  /** Height of one slot in pixels */\n  slotHeight?: number;\n\n  /** Minutes per slot */\n  intervalMinutes?: number;\n\n  /** Pointer offset along the time axis within the target slot, in px. Axis-agnostic alias for `mouseYOffset`; when both are set, `slotOffset` wins. */\n  slotOffset?: number;\n\n  /** Size of the target slot along the time axis, in px. Axis-agnostic alias for `slotHeight`; when both are set, `slotSize` wins. */\n  slotSize?: number;\n\n  /** Snap step for the resulting start time, in minutes. When set, the start snaps to this interval (absolute, from the day boundary) instead of the slot start. */\n  dragIntervalMinutes?: number;\n\n  /** Start time boundary of the schedule in HH:mm:ss format. When set together with `dragIntervalMinutes`, the snapped start is clamped to stay within the displayed range (the event may still extend past `endTime`, matching how overflowing events are clipped). */\n  startTime?: string;\n\n  /** End time boundary of the schedule in HH:mm:ss format. When set together with `dragIntervalMinutes`, the snapped start is clamped to stay within the displayed range (the event may still extend past `endTime`, matching how overflowing events are clipped). */\n  endTime?: string;\n}\n\nexport interface CalculateDropTimeResult {\n  /** New start date/time for the event */\n  start: Date;\n\n  /** New end date/time for the event */\n  end: Date;\n}\n\nexport function calculateDropTime({\n  draggedEvent,\n  targetDate,\n  targetSlotTime,\n  mouseYOffset = 0,\n  slotHeight = 64,\n  intervalMinutes = 15,\n  slotOffset,\n  slotSize,\n  dragIntervalMinutes,\n  startTime,\n  endTime,\n}: CalculateDropTimeInput): CalculateDropTimeResult {\n  const eventDuration = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), 'millisecond');\n\n  const parsedTime = parseTimeString(targetSlotTime);\n  const targetDay = dayjs(targetDate).startOf('day');\n\n  const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);\n\n  let finalTargetTime = baseTargetTime;\n\n  const offset = slotOffset ?? mouseYOffset;\n  const size = slotSize ?? slotHeight;\n\n  if (dragIntervalMinutes != null) {\n    const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);\n    const gridInterval = clampIntervalMinutes(intervalMinutes);\n    const slotStartMinutes = parsedTime.hours * 60 + parsedTime.minutes;\n    const offsetRatio = size > 0 ? offset / size : 0;\n    const rawStartMinutes = slotStartMinutes + offsetRatio * gridInterval;\n    let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;\n\n    const parsedEnd = endTime ? parseTimeString(endTime) : null;\n    const parsedStart = startTime ? parseTimeString(startTime) : null;\n    const maxStart = parsedEnd\n      ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag\n      : null;\n    const minStart = parsedStart\n      ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag\n      : null;\n\n    if (minStart !== null && maxStart !== null && minStart > maxStart) {\n      // The snap grid is coarser than the displayed range, so no snapped start falls\n      // inside it – the start of the range is the only sensible drop target.\n      snappedStartMinutes = parsedStart!.hours * 60 + parsedStart!.minutes;\n    } else {\n      if (maxStart !== null) {\n        snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);\n      }\n      if (minStart !== null) {\n        snappedStartMinutes = Math.max(snappedStartMinutes, minStart);\n      }\n    }\n\n    const dayOffset = Math.floor(snappedStartMinutes / 1440);\n    const minutesInDay = snappedStartMinutes - dayOffset * 1440;\n\n    // Built from wall clock fields rather than by adding minutes to the start of the day.\n    // On a DST transition a day is 23 or 25 hours long, so `startOf('day').add(180, 'minute')`\n    // lands on 04:00 (spring forward) or 01:00 (fall back) instead of the 03:00/02:00 slot the\n    // user dropped on. Not covered by tests: the process timezone cannot be changed from\n    // inside a test, so any assertion here would pass in every zone regardless.\n    finalTargetTime = targetDay\n      .add(dayOffset, 'day')\n      .hour(Math.floor(minutesInDay / 60))\n      .minute(minutesInDay % 60)\n      .second(0);\n  } else if (offset > 0 && size > 0) {\n    const offsetRatio = offset / size;\n    const offsetMinutes = Math.round(offsetRatio * intervalMinutes);\n    finalTargetTime = baseTargetTime.add(offsetMinutes, 'minute');\n  }\n\n  const newStart = finalTargetTime.toDate();\n  const newEnd = finalTargetTime.add(eventDuration, 'millisecond').toDate();\n\n  return {\n    start: newStart,\n    end: newEnd,\n  };\n}\n"],"mappings":";;;;;AAgDA,SAAgB,kBAAkB,EAChC,cACA,YACA,gBACA,eAAe,GACf,aAAa,IACb,kBAAkB,IAClB,YACA,UACA,qBACA,WACA,WACkD;CAClD,MAAM,gBAAgB,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,MAAM,aAAa,KAAK,GAAG,aAAa;CAE3F,MAAM,aAAa,gBAAgB,cAAc;CACjD,MAAM,YAAY,MAAM,UAAU,CAAC,CAAC,QAAQ,KAAK;CAEjD,MAAM,iBAAiB,UAAU,KAAK,WAAW,KAAK,CAAC,CAAC,OAAO,WAAW,OAAO,CAAC,CAAC,OAAO,CAAC;CAE3F,IAAI,kBAAkB;CAEtB,MAAM,SAAS,cAAc;CAC7B,MAAM,OAAO,YAAY;CAEzB,IAAI,uBAAuB,MAAM;EAC/B,MAAM,cAAc,qBAAqB,mBAAmB;EAC5D,MAAM,eAAe,qBAAqB,eAAe;EAGzD,MAAM,kBAFmB,WAAW,QAAQ,KAAK,WAAW,WACxC,OAAO,IAAI,SAAS,OAAO,KACU;EACzD,IAAI,sBAAsB,KAAK,MAAM,kBAAkB,WAAW,IAAI;EAEtE,MAAM,YAAY,UAAU,gBAAgB,OAAO,IAAI;EACvD,MAAM,cAAc,YAAY,gBAAgB,SAAS,IAAI;EAC7D,MAAM,WAAW,YACb,KAAK,OAAO,UAAU,QAAQ,KAAK,UAAU,UAAU,KAAK,WAAW,IAAI,cAC3E;EACJ,MAAM,WAAW,cACb,KAAK,MAAM,YAAY,QAAQ,KAAK,YAAY,WAAW,WAAW,IAAI,cAC1E;EAEJ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW,UAGvD,sBAAsB,YAAa,QAAQ,KAAK,YAAa;OACxD;GACL,IAAI,aAAa,MACf,sBAAsB,KAAK,IAAI,qBAAqB,QAAQ;GAE9D,IAAI,aAAa,MACf,sBAAsB,KAAK,IAAI,qBAAqB,QAAQ;EAEhE;EAEA,MAAM,YAAY,KAAK,MAAM,sBAAsB,IAAI;EACvD,MAAM,eAAe,sBAAsB,YAAY;EAOvD,kBAAkB,UACf,IAAI,WAAW,KAAK,CAAC,CACrB,KAAK,KAAK,MAAM,eAAe,EAAE,CAAC,CAAC,CACnC,OAAO,eAAe,EAAE,CAAC,CACzB,OAAO,CAAC;CACb,OAAO,IAAI,SAAS,KAAK,OAAO,GAAG;EACjC,MAAM,cAAc,SAAS;EAC7B,MAAM,gBAAgB,KAAK,MAAM,cAAc,eAAe;EAC9D,kBAAkB,eAAe,IAAI,eAAe,QAAQ;CAC9D;CAKA,OAAO;EACL,OAJe,gBAAgB,OAIjB;EACd,KAJa,gBAAgB,IAAI,eAAe,aAAa,CAAC,CAAC,OAIrD;CACZ;AACF"}

package/esm/utils/expand-recurring-events/expand-recurring-events.mjs

@@ -15,6 +15,18 @@ function getExdateSet(recurrence) {
 	const values = recurrence.exdate.map((value) => dayjs(value)).filter((value) => value.isValid()).map((value) => value.format("YYYY-MM-DD HH:mm:ss"));
 	return new Set(values);
 }
+function toWallClockDate(value) {
+	return new Date(Date.UTC(value.year(), value.month(), value.date(), value.hour(), value.minute(), value.second(), value.millisecond()));
+}
+function fromWallClockDate(value) {
+	const result = new Date(2e3, 0, 1, 12);
+	result.setFullYear(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate());
+	result.setHours(value.getUTCHours(), value.getUTCMinutes(), value.getUTCSeconds(), value.getUTCMilliseconds());
+	return dayjs(result);
+}
+function getWallClockDurationMs(start, end) {
+	return toWallClockDate(end).getTime() - toWallClockDate(start).getTime();
+}
 function getRRuleString(rule) {
 	const normalized = rule.trim();
 	if (!normalized.includes("\n")) return normalized.startsWith("RRULE:") ? normalized.replace(/^RRULE:/, "") : normalized;
@@ -26,10 +38,10 @@ function getOccurrenceStartsInRange(event, rangeStart, rangeEnd, expansionLimit,
 	if (!dtstart.isValid() || !event.recurrence) return [];
 	try {
 		const options = RRule.parseString(getRRuleString(event.recurrence.rrule));
-		options.dtstart = dtstart.toDate();
+		options.dtstart = toWallClockDate(dtstart);
 		const rule = new RRule(options);
-		const searchStart = rangeStart.subtract(Math.max(0, durationMs), "millisecond").toDate();
-		return rule.between(searchStart, rangeEnd.toDate(), true).slice(0, expansionLimit).map((value) => dayjs(value));
+		const searchStart = new Date(toWallClockDate(rangeStart).getTime() - Math.max(0, durationMs));
+		return rule.between(searchStart, toWallClockDate(rangeEnd), true).slice(0, expansionLimit);
 	} catch {
 		return [];
 	}
@@ -40,8 +52,7 @@ function isEventInRange(event, rangeStart, rangeEnd) {
 	if (!start.isValid() || !end.isValid()) return false;
 	return overlapsRange(start, end, rangeStart, rangeEnd);
 }
-function createGeneratedInstance(event, occurrenceStart, durationMs) {
-	const occurrenceEnd = occurrenceStart.add(durationMs, "millisecond");
+function createGeneratedInstance(event, occurrenceStart, occurrenceEnd) {
 	const recurrenceId = occurrenceStart.format("YYYY-MM-DD HH:mm:ss");
 	const { recurrence, ...eventWithoutRecurrence } = event;
 	return {
@@ -87,11 +98,12 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 		const eventStart = dayjs(event.recurrence?.dtstart || event.start);
 		const eventEnd = dayjs(event.end);
 		if (!eventStart.isValid() || !eventEnd.isValid()) continue;
-		const durationMs = eventEnd.diff(dayjs(event.start), "millisecond");
+		const durationMs = getWallClockDurationMs(dayjs(event.start), eventEnd);
 		if (durationMs < 0) continue;
 		const exdate = getExdateSet(event.recurrence);
 		const starts = getOccurrenceStartsInRange(event, start, end, expansionLimit, durationMs);
-		for (const occurrenceStart of starts) {
+		for (const wallClockStart of starts) {
+			const occurrenceStart = fromWallClockDate(wallClockStart);
 			const recurrenceId = occurrenceStart.format("YYYY-MM-DD HH:mm:ss");
 			if (exdate.has(recurrenceId)) continue;
 			const overrideKey = getRecurrenceKey(event.id, recurrenceId);
@@ -103,7 +115,7 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 				}
 				continue;
 			}
-			const generated = createGeneratedInstance(event, occurrenceStart, durationMs);
+			const generated = createGeneratedInstance(event, occurrenceStart, fromWallClockDate(new Date(wallClockStart.getTime() + durationMs)));
 			if (overlapsRange(dayjs(generated.start), dayjs(generated.end), start, end)) output.push(validateEvent(generated));
 		}
 	}