@mantine/schedule 9.5.2 → 9.6.0

package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts

@@ -5,7 +5,7 @@ import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type ResourcesWeekViewStylesNames = 'resourcesWeekView' | 'resourcesWeekViewRoot' | 'resourcesWeekViewInner' | 'resourcesWeekViewHeaderRows' | 'resourcesWeekViewHeaderContent' | 'resourcesWeekViewDayLabelsRow' | 'resourcesWeekViewDayLabel' | 'resourcesWeekViewTimeLabelsRow' | 'resourcesWeekViewScrollArea' | 'resourcesWeekViewCorner' | 'resourcesWeekViewTimeLabel' | 'resourcesWeekViewResourceLabel' | 'resourcesWeekViewRow' | 'resourcesWeekViewRowSlot' | 'resourcesWeekViewRowSlots' | 'resourcesWeekViewBackgroundEvent' | 'resourcesWeekViewAllDayEvent' | 'resourcesWeekViewCurrentTimeIndicator' | 'resourcesWeekViewCurrentTimeIndicatorLine' | 'resourcesWeekViewCurrentTimeIndicatorThumb' | 'resourcesWeekViewCurrentTimeIndicatorTimeBubble' | 'resourcesWeekViewEventWrapper' | 'resourcesWeekViewResizeHandle' | 'resourcesWeekViewGroupColumn' | 'resourcesWeekViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
+export type ResourcesWeekViewStylesNames = 'resourcesWeekView' | 'resourcesWeekViewRoot' | 'resourcesWeekViewInner' | 'resourcesWeekViewHeaderRows' | 'resourcesWeekViewHeaderContent' | 'resourcesWeekViewDayLabelsRow' | 'resourcesWeekViewDayLabel' | 'resourcesWeekViewTimeLabelsRow' | 'resourcesWeekViewScrollArea' | 'resourcesWeekViewCorner' | 'resourcesWeekViewTimeLabel' | 'resourcesWeekViewResourceLabel' | 'resourcesWeekViewRow' | 'resourcesWeekViewRowSlot' | 'resourcesWeekViewRowSlots' | 'resourcesWeekViewBackgroundEvent' | 'resourcesWeekViewAllDayEvent' | 'resourcesWeekViewCurrentTimeIndicator' | 'resourcesWeekViewCurrentTimeIndicatorLine' | 'resourcesWeekViewCurrentTimeIndicatorThumb' | 'resourcesWeekViewCurrentTimeIndicatorTimeBubble' | 'resourcesWeekViewEventWrapper' | 'resourcesWeekViewDragPreview' | 'resourcesWeekViewResizeHandle' | 'resourcesWeekViewGroupColumn' | 'resourcesWeekViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
 export type ResourcesWeekViewCssVariables = {
     resourcesWeekView: '--resources-week-view-radius' | '--resources-week-view-slot-width' | '--resources-week-view-row-height' | '--resources-week-view-group-label-width';
 };
@@ -65,6 +65,8 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
         resourceId?: string | number;
     }) => void;
     canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventDragInterval?: number;
     onEventDragStart?: (event: ScheduleEventData) => void;
     onEventDragEnd?: () => void;
     onTimeSlotClick?: (data: {
@@ -74,6 +76,8 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
         resourceId?: string | number;
     }) => void;
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    withInteractiveBackgroundEvents?: boolean;
     withDragSlotSelect?: boolean;
     onSlotDragEnd?: (data: {
         rangeStart: DateTimeStringValue;
@@ -97,6 +101,8 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventResizeInterval?: number;
     recurrenceExpansionLimit?: number;
     /** Maximum number of events visible per time slot before "+more" indicator shows, minimum value is 1 @default 2 */
     maxEventsPerTimeSlot?: number;

package/lib/components/ResourcesWeekView/ResourcesWeekViewRow.d.ts

@@ -36,4 +36,4 @@ export interface ResourcesWeekViewRowProps {
     groupInfo?: ResourceGroupInfo | null;
     allDayCount?: number;
 }
-export declare function ResourcesWeekViewRow({ resource, resourceIndex, weekdays, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount, }: ResourcesWeekViewRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourcesWeekViewRow({ resource, resourceIndex, weekdays, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount, }: ResourcesWeekViewRowProps): import("react").JSX.Element;

package/lib/components/Schedule/Schedule.d.ts

@@ -9,7 +9,7 @@ import { WeekViewProps, WeekViewStylesNames } from '../WeekView/WeekView';
 import { YearViewProps, YearViewStylesNames } from '../YearView/YearView';
 export type ScheduleStylesNames = 'root' | 'desktopView' | 'mobileView' | DayViewStylesNames | WeekViewStylesNames | MonthViewStylesNames | YearViewStylesNames | MobileMonthViewStylesNames;
 export type ScheduleLayout = 'default' | 'responsive';
-type ScheduleCommonProps = 'date' | 'onDateChange' | 'events' | 'locale' | 'radius' | 'labels' | 'renderEventBody' | 'withEventsDragAndDrop' | 'onEventDrop' | 'canDragEvent' | 'onEventDragStart' | 'onEventDragEnd' | 'onTimeSlotClick' | 'onAllDaySlotClick' | 'onEventClick' | 'onDayClick' | 'onMonthClick' | 'withDragSlotSelect' | 'onSlotDragEnd' | 'view' | 'onViewChange' | 'mode' | 'withAgenda' | 'onExternalEventDrop' | 'withEventResize' | 'onEventResize' | 'canResizeEvent' | 'recurrenceExpansionLimit';
+type ScheduleCommonProps = 'date' | 'onDateChange' | 'events' | 'locale' | 'radius' | 'labels' | 'renderEventBody' | 'withEventsDragAndDrop' | 'onEventDrop' | 'canDragEvent' | 'onEventDragStart' | 'onEventDragEnd' | 'onTimeSlotClick' | 'onAllDaySlotClick' | 'onEventClick' | 'onDayClick' | 'onMonthClick' | 'withDragSlotSelect' | 'onSlotDragEnd' | 'view' | 'onViewChange' | 'mode' | 'withAgenda' | 'onExternalEventDrop' | 'withEventResize' | 'onEventResize' | 'canResizeEvent' | 'recurrenceExpansionLimit' | 'withInteractiveBackgroundEvents';
 type ScheduleViewProps<T> = Partial<Omit<T, ScheduleCommonProps>>;
 export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>, ElementProps<'div'> {
     __staticSelector?: string;
@@ -84,6 +84,8 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day`, `week` and `month` views only – `YearView` and the `MobileMonthView` used by `layout="responsive"` on small screens do not render background events at all. @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;
     /** Layout mode:

package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.d.ts

@@ -0,0 +1,19 @@
+import { BoxProps, ElementProps } from '@mantine/core';
+import { ScheduleEventData } from '../../types';
+import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+export interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'div', 'onClick'> {
+    /** Background event to display */
+    event: ScheduleEventData;
+    /** If set, the root element is a `button` instead of a `div` and the event can be clicked @default false */
+    interactive?: boolean;
+    /** Called when the event is clicked, only when `interactive` is set */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Function to fully customize event rendering */
+    renderEvent?: RenderEvent;
+    /** Function to customize event body */
+    renderEventBody?: RenderEventBody;
+}
+export declare function ScheduleBackgroundEvent(props: ScheduleBackgroundEventProps): import("react").JSX.Element;
+export declare namespace ScheduleBackgroundEvent {
+    var displayName: string;
+}

package/lib/components/ScheduleBackgroundEvent/index.d.ts

@@ -0,0 +1,2 @@
+export { ScheduleBackgroundEvent } from './ScheduleBackgroundEvent';
+export type { ScheduleBackgroundEventProps } from './ScheduleBackgroundEvent';

package/lib/components/ScheduleHeader/HeaderControl/HeaderControl.d.ts

@@ -29,15 +29,15 @@ export declare const HeaderControl: import("@mantine/core").MantineComponent<{
     stylesNames: HeaderControlStylesNames;
     vars: HeaderControlCssVariables;
 }>;
-export declare function ScheduleHeaderNext(props: HeaderControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleHeaderNext(props: HeaderControlProps): import("react").JSX.Element;
 export declare namespace ScheduleHeaderNext {
     var displayName: string;
 }
-export declare function ScheduleHeaderPrevious(props: HeaderControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleHeaderPrevious(props: HeaderControlProps): import("react").JSX.Element;
 export declare namespace ScheduleHeaderPrevious {
     var displayName: string;
 }
-export declare function ScheduleHeaderToday(props: HeaderControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleHeaderToday(props: HeaderControlProps): import("react").JSX.Element;
 export declare namespace ScheduleHeaderToday {
     var displayName: string;
 }

package/lib/components/ScheduleHeader/ScheduleHeaderBase.d.ts

@@ -53,5 +53,5 @@ export interface ScheduleHeaderBaseProps {
     /** Whether the agenda view is currently active */
     agendaActive?: boolean;
 }
-export declare function ScheduleHeaderBase({ view, navigationHandlers, control, labels, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, stylesApiProps, onAgendaClick, agendaActive, }: ScheduleHeaderBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleHeaderBase({ view, navigationHandlers, control, labels, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, stylesApiProps, onAgendaClick, agendaActive, }: ScheduleHeaderBaseProps): import("react").JSX.Element;
 export {};

package/lib/components/WeekView/WeekView.d.ts

@@ -7,7 +7,7 @@ import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/Current
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
+export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewDragPreview' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
 export type WeekViewCssVariables = {
     weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height';
 };
@@ -96,6 +96,8 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventDragInterval?: number;
     /** Called when any event drag starts */
     onEventDragStart?: (event: ScheduleEventData) => void;
     /** Called when any event drag ends */
@@ -110,6 +112,8 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     onAllDaySlotClick?: (day: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Called when event is clicked */
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;
     /** Called when a time slot range is selected by dragging */
@@ -136,6 +140,8 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */
+    eventResizeInterval?: number;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;
     /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */

package/lib/components/WeekView/WeekViewDay.d.ts

@@ -64,4 +64,4 @@ export interface WeekViewDayProps {
         end: DateTimeStringValue;
     }) => Record<string, any> | undefined;
 }
-export declare function WeekViewDay({ day, dayIndex, slots, intervalMinutes, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef, getTimeSlotProps, }: WeekViewDayProps): import("react/jsx-runtime").JSX.Element;
+export declare function WeekViewDay({ day, dayIndex, slots, intervalMinutes, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef, getTimeSlotProps, }: WeekViewDayProps): import("react").JSX.Element;

package/lib/components/YearView/YearViewMonth.d.ts

@@ -68,4 +68,4 @@ export interface YearViewMonthProps extends YearViewMonthSettings {
         dayIndex: number;
     };
 }
-export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, renderDay, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;
+export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, renderDay, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react").JSX.Element;

package/lib/hooks/use-drag-drop-handlers.d.ts

@@ -1,5 +1,10 @@
 import { DragContextValue } from '../components/DragContext/DragContext';
 import { DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';
+export interface DragPreview<T = any> {
+    start: DateTimeStringValue;
+    end: DateTimeStringValue;
+    target: T;
+}
 export interface UseDragDropHandlersOptions<T = any> {
     /** Whether drag and drop is enabled */
     enabled: boolean;
@@ -41,13 +46,17 @@ export interface DragDropHandlers<T = any> {
     /** Handle drag over event */
     handleDragOver: (e: React.DragEvent, target: T) => void;
     /** Handle drag leave event */
-    handleDragLeave: () => void;
+    handleDragLeave: (event?: React.DragEvent) => void;
     /** Handle drop event */
     handleDrop: (e: React.DragEvent, target: T) => void;
     /** Check if event is draggable */
     isDraggableEvent: (event: ScheduleEventData) => boolean;
     /** Check if target is the current drop target */
     isDropTarget: (target: T) => boolean;
+    /** Snapped drop preview used to render the drag ghost, or `null` when not dragging */
+    dragPreview: DragPreview<T> | null;
+    /** Sets the current drag preview */
+    setDragPreview: (preview: DragPreview<T> | null) => void;
 }
 /**
  * Hook that provides unified drag-drop handlers for Schedule views.

package/lib/hooks/use-event-resize.d.ts

@@ -6,6 +6,7 @@ export interface UseEventResizeInput {
     startTime: string;
     endTime: string;
     intervalMinutes: number;
+    resizeIntervalMinutes?: number;
     onEventResize?: (data: {
         eventId: string | number;
         newStart: DateTimeStringValue;
@@ -14,7 +15,7 @@ export interface UseEventResizeInput {
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
 }
-export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, onEventResize, canResizeEvent, }: UseEventResizeInput): {
+export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;

package/lib/hooks/use-horizontal-event-resize.d.ts

@@ -6,6 +6,7 @@ export interface UseHorizontalEventResizeInput {
     startTime: string;
     endTime: string;
     intervalMinutes: number;
+    resizeIntervalMinutes?: number;
     onEventResize?: (data: {
         eventId: string | number;
         newStart: DateTimeStringValue;
@@ -14,7 +15,7 @@ export interface UseHorizontalEventResizeInput {
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
 }
-export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, onEventResize, canResizeEvent, }: UseHorizontalEventResizeInput): {
+export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseHorizontalEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex, dayCount, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;

package/lib/index.d.mts

@@ -12,6 +12,7 @@ export * from './components/ResourcesWeekView';
 export * from './components/ResourcesMonthView';
 export * from './components/ResourcesSchedule';
 export * from './components/AgendaView';
+export * from './components/ScheduleBackgroundEvent';
 export * from './components/ScheduleEvent';
 export * from './components/ScheduleHeader';
 export * from './components/CurrentTimeIndicator';

package/lib/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/ResourcesWeekView';
 export * from './components/ResourcesMonthView';
 export * from './components/ResourcesSchedule';
 export * from './components/AgendaView';
+export * from './components/ScheduleBackgroundEvent';
 export * from './components/ScheduleEvent';
 export * from './components/ScheduleHeader';
 export * from './components/CurrentTimeIndicator';

package/lib/types.d.ts

@@ -68,7 +68,7 @@ interface ScheduleEventBase<Payload extends EventPayload = EventPayload> {
     color: MantineColor;
     /** Event variant, default is `'light'` */
     variant?: 'filled' | 'light';
-    /** Event display mode. Background events render as full-width, non-interactive blocks behind regular events. @default 'default' */
+    /** Event display mode. Background events render as full-width blocks behind regular events, non-interactive unless `withInteractiveBackgroundEvents` is set on the view. @default 'default' */
     display?: 'default' | 'background';
     /** Additional event data, defined by the user, not used internally by the library */
     payload?: Payload;

package/lib/utils/calculate-drop-time/calculate-drop-time.d.ts

@@ -12,6 +12,16 @@ export interface CalculateDropTimeInput {
     slotHeight?: number;
     /** Minutes per slot */
     intervalMinutes?: number;
+    /** Pointer offset along the time axis within the target slot, in px. Axis-agnostic alias for `mouseYOffset`; when both are set, `slotOffset` wins. */
+    slotOffset?: number;
+    /** Size of the target slot along the time axis, in px. Axis-agnostic alias for `slotHeight`; when both are set, `slotSize` wins. */
+    slotSize?: number;
+    /** 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. */
+    dragIntervalMinutes?: number;
+    /** 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). */
+    startTime?: string;
+    /** 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). */
+    endTime?: string;
 }
 export interface CalculateDropTimeResult {
     /** New start date/time for the event */
@@ -19,4 +29,4 @@ export interface CalculateDropTimeResult {
     /** New end date/time for the event */
     end: Date;
 }
-export declare function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset, slotHeight, intervalMinutes, }: CalculateDropTimeInput): CalculateDropTimeResult;
+export declare function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset, slotHeight, intervalMinutes, slotOffset, slotSize, dragIntervalMinutes, startTime, endTime, }: CalculateDropTimeInput): CalculateDropTimeResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/schedule",
-  "version": "9.5.2",
+  "version": "9.6.0",
   "description": "Schedule Mantine component",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "directory": "packages/@mantine/schedule"
   },
   "peerDependencies": {
-    "@mantine/core": "9.5.2",
-    "@mantine/dates": "9.5.2",
-    "@mantine/hooks": "9.5.2",
+    "@mantine/core": "9.6.0",
+    "@mantine/dates": "9.6.0",
+    "@mantine/hooks": "9.6.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -48,6 +48,9 @@
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/dates": "workspace:*",
-    "@mantine/hooks": "workspace:*"
+    "@mantine/hooks": "workspace:*",
+    "dayjs": "^1.11.23",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   }
 }

package/styles.css

@@ -916,6 +916,30 @@
   color: var(--bg-event-color);
 }
 
+.m_c5cd9a77:where([data-interactive]) {
+    pointer-events: auto;
+    cursor: pointer;
+    user-select: none;
+  }
+
+@media (hover: hover) {
+
+  .m_c5cd9a77:where([data-interactive]):hover {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_c5cd9a77:where([data-interactive]):active {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging]) .m_c5cd9a77 {
+  pointer-events: none;
+}
+
 .m_c6f08d70 {
   position: relative;
   height: var(--all-day-slot-height);
@@ -930,6 +954,15 @@
   z-index: 3;
 }
 
+.m_2d4819df {
+  pointer-events: none;
+  z-index: 3;
+  border-radius: var(--day-view-radius);
+  border: 1px dashed var(--mantine-color-blue-filled);
+  background-color: var(--mantine-color-blue-light);
+  opacity: 0.6;
+}
+
 .m_70d87f99 {
   --mobile-month-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --week-numbers-offset: 0rem;
@@ -1549,6 +1582,30 @@
   color: var(--bg-event-color);
 }
 
+.m_9e8509af:where([data-interactive]) {
+    pointer-events: auto;
+    cursor: pointer;
+    user-select: none;
+  }
+
+@media (hover: hover) {
+
+  .m_9e8509af:where([data-interactive]):hover {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_9e8509af:where([data-interactive]):active {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+.m_8eceba9d:where([data-event-interaction], [data-slot-dragging]) .m_9e8509af {
+  pointer-events: none;
+}
+
 .m_f0fa5e16 {
   position: absolute;
   inset-inline: 0;
@@ -1739,6 +1796,32 @@
   color: var(--bg-event-color);
 }
 
+.m_41ce8f1f:where([data-interactive]) {
+    pointer-events: auto;
+    cursor: pointer;
+    user-select: none;
+  }
+
+@media (hover: hover) {
+
+  .m_41ce8f1f:where([data-interactive]):hover {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_41ce8f1f:where([data-interactive]):active {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f,
+.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f,
+.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f {
+  pointer-events: none;
+}
+
 .m_cd58ae46 {
   position: relative;
 }
@@ -1919,6 +2002,15 @@
         pointer-events: all;
       }
 
+.m_e0da287 {
+  pointer-events: none;
+  z-index: 3;
+  border-radius: var(--week-view-radius);
+  border: 1px dashed var(--mantine-color-blue-filled);
+  background-color: var(--mantine-color-blue-light);
+  opacity: 0.6;
+}
+
 .m_7301354d {
   --year-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --year-view-font-size: var(--mantine-font-size-sm);
@@ -2637,6 +2729,26 @@
   color: var(--bg-event-color);
 }
 
+.m_9cc838bf:where([data-interactive]) {
+    pointer-events: auto;
+    cursor: pointer;
+    user-select: none;
+  }
+
+@media (hover: hover) {
+
+  .m_9cc838bf:where([data-interactive]):hover {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_9cc838bf:where([data-interactive]):active {
+      background-color: var(--bg-event-hover);
+  }
+}
+
 .m_d6d6dd52 {
   position: absolute;
   inset-inline: calc(0.0625rem * var(--mantine-scale));
@@ -2698,6 +2810,11 @@
   pointer-events: none;
 }
 
+.m_25154d8d:where([data-event-interaction], [data-slot-dragging])
+  .m_9cc838bf {
+  pointer-events: none;
+}
+
 .m_25154d8d:where([data-resizing]) * {
     cursor: ew-resize !important;
   }
@@ -2710,6 +2827,15 @@
       opacity: 0;
     }
 
+.m_969d1c27 {
+  pointer-events: none;
+  z-index: 3;
+  border-radius: var(--resources-day-view-radius);
+  border: 1px dashed var(--mantine-color-blue-filled);
+  background-color: var(--mantine-color-blue-light);
+  opacity: 0.6;
+}
+
 .m_ed4c47cf {
   --resources-week-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --resources-week-view-resource-label-width: calc(7.5rem * var(--mantine-scale));
@@ -3044,6 +3170,26 @@
   color: var(--bg-event-color);
 }
 
+.m_3c19323d:where([data-interactive]) {
+    pointer-events: auto;
+    cursor: pointer;
+    user-select: none;
+  }
+
+@media (hover: hover) {
+
+  .m_3c19323d:where([data-interactive]):hover {
+      background-color: var(--bg-event-hover);
+  }
+}
+
+@media (hover: none) {
+
+  .m_3c19323d:where([data-interactive]):active {
+      background-color: var(--bg-event-hover);
+  }
+}
+
 .m_682c45d0 {
   position: absolute;
   height: var(--resources-week-view-all-day-height);
@@ -3104,6 +3250,11 @@
   pointer-events: none;
 }
 
+.m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
+  .m_3c19323d {
+  pointer-events: none;
+}
+
 .m_ed4c47cf:where([data-resizing]) * {
     cursor: ew-resize !important;
   }
@@ -3178,6 +3329,15 @@
   z-index: 3;
 }
 
+.m_27f284a5 {
+  pointer-events: none;
+  z-index: 3;
+  border-radius: var(--resources-week-view-radius);
+  border: 1px dashed var(--mantine-color-blue-filled);
+  background-color: var(--mantine-color-blue-light);
+  opacity: 0.6;
+}
+
 .m_652b3acd {
   --resources-month-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --resources-month-view-resource-label-width: calc(7.5rem * var(--mantine-scale));