@mantine/schedule 9.6.3 → 9.7.1

package/esm/components/Schedule/Schedule.mjs

@@ -16,7 +16,7 @@ const defaultProps = {
 };
 const Schedule = factory((_props) => {
 	const props = useProps("Schedule", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, date, defaultDate, onDateChange, view, defaultView, onViewChange, events, locale, radius, labels, renderEventBody, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onDayClick, onEventClick, withDragSlotSelect, onSlotDragEnd, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, withInteractiveBackgroundEvents, recurrenceExpansionLimit, mode, layout, dayViewProps, weekViewProps, monthViewProps, yearViewProps, mobileMonthViewProps, withAgenda, __staticSelector, mod, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, date, defaultDate, onDateChange, view, defaultView, onViewChange, events, locale, radius, labels, renderEventBody, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onDayClick, onEventClick, withDragSlotSelect, onSlotDragEnd, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, canDropEvent, canDropExternalEvent, canResizeEventTo, preventEventOverlap, onEventPlacementRejected, withInteractiveBackgroundEvents, recurrenceExpansionLimit, mode, layout, dayViewProps, weekViewProps, monthViewProps, yearViewProps, mobileMonthViewProps, withAgenda, __staticSelector, mod, ...others } = props;
 	const getStyles = useStyles({
 		name: __staticSelector || "Schedule",
 		classes: Schedule_module_default,
@@ -78,20 +78,33 @@ const Schedule = factory((_props) => {
 		mode,
 		withAgenda
 	};
+	const dropValidationProps = {
+		canDropEvent,
+		canDropExternalEvent,
+		preventEventOverlap,
+		onEventPlacementRejected
+	};
+	const placementValidationProps = {
+		...dropValidationProps,
+		canResizeEventTo
+	};
 	const desktopContent = (() => {
 		switch (_view) {
 			case "day": return /* @__PURE__ */ jsx(DayView, {
 				...commonProps,
+				...placementValidationProps,
 				withInteractiveBackgroundEvents: mode === "static" ? false : withInteractiveBackgroundEvents,
 				...dayViewProps
 			});
 			case "week": return /* @__PURE__ */ jsx(WeekView, {
 				...commonProps,
+				...placementValidationProps,
 				withInteractiveBackgroundEvents: mode === "static" ? false : withInteractiveBackgroundEvents,
 				...weekViewProps
 			});
 			case "month": return /* @__PURE__ */ jsx(MonthView, {
 				...commonProps,
+				...dropValidationProps,
 				withInteractiveBackgroundEvents: mode === "static" ? false : withInteractiveBackgroundEvents,
 				...monthViewProps
 			});

package/esm/components/Schedule/Schedule.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Schedule.mjs","names":["classes"],"sources":["../../../src/components/Schedule/Schedule.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateStringValue,\n  DateTimeStringValue,\n  ScheduleEventData,\n  ScheduleMode,\n  ScheduleViewLevel,\n} from '../../types';\nimport { DayView, DayViewProps, DayViewStylesNames } from '../DayView/DayView';\nimport {\n  MobileMonthView,\n  MobileMonthViewProps,\n  MobileMonthViewStylesNames,\n} from '../MobileMonthView/MobileMonthView';\nimport { MonthView, MonthViewProps, MonthViewStylesNames } from '../MonthView/MonthView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport { WeekView, WeekViewProps, WeekViewStylesNames } from '../WeekView/WeekView';\nimport { YearView, YearViewProps, YearViewStylesNames } from '../YearView/YearView';\nimport classes from './Schedule.module.css';\n\nexport type ScheduleStylesNames =\n  | 'root'\n  | 'desktopView'\n  | 'mobileView'\n  | DayViewStylesNames\n  | WeekViewStylesNames\n  | MonthViewStylesNames\n  | YearViewStylesNames\n  | MobileMonthViewStylesNames;\n\nexport type ScheduleLayout = 'default' | 'responsive';\n\ntype ScheduleCommonProps =\n  | 'date'\n  | 'onDateChange'\n  | 'events'\n  | 'locale'\n  | 'radius'\n  | 'labels'\n  | 'renderEventBody'\n  | 'withEventsDragAndDrop'\n  | 'onEventDrop'\n  | 'canDragEvent'\n  | 'onEventDragStart'\n  | 'onEventDragEnd'\n  | 'onTimeSlotClick'\n  | 'onAllDaySlotClick'\n  | 'onEventClick'\n  | 'onDayClick'\n  | 'onMonthClick'\n  | 'withDragSlotSelect'\n  | 'onSlotDragEnd'\n  | 'view'\n  | 'onViewChange'\n  | 'mode'\n  | 'withAgenda'\n  | 'onExternalEventDrop'\n  | 'withEventResize'\n  | 'onEventResize'\n  | 'canResizeEvent'\n  | 'recurrenceExpansionLimit'\n  | 'withInteractiveBackgroundEvents';\n\ntype ScheduleViewProps<T> = Partial<Omit<T, ScheduleCommonProps>>;\n\nexport interface ScheduleProps\n  extends BoxProps, StylesApiProps<ScheduleFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Current date to display (controlled) */\n  date?: Date | DateStringValue;\n\n  /** Default date (uncontrolled) */\n  defaultDate?: Date | DateStringValue;\n\n  /** Called when date changes via navigation */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Current view level (controlled) */\n  view?: ScheduleViewLevel;\n\n  /** Default view level (uncontrolled) */\n  defaultView?: ScheduleViewLevel;\n\n  /** Called when view level changes */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Events to display across all views */\n  events?: ScheduleEventData[];\n\n  /** Locale for date formatting (overrides `DatesProvider`) */\n  locale?: string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Custom event body renderer */\n  renderEventBody?: RenderEventBody;\n\n  /** Enable drag and drop for events @default false */\n  withEventsDragAndDrop?: boolean;\n\n  /** Called when event is dropped */\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  /** Called when time slot is clicked in DayView/WeekView */\n  onTimeSlotClick?: (data: {\n    slotStart: DateTimeStringValue;\n    slotEnd: DateTimeStringValue;\n    nativeEvent: React.MouseEvent<HTMLButtonElement>;\n  }) => void;\n\n  /** Called when all-day slot is clicked in DayView/WeekView */\n  onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called when a day is clicked in MonthView and YearView */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, enables drag-to-select slot ranges @default false */\n  withDragSlotSelect?: boolean;\n\n  /** Called when a slot range is selected by dragging */\n  onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n  /** Called when event is clicked in any view */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Interaction mode:\n   * - `'default'` allows all interactions\n   * - `'static'` disables event interactions\n   * @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n  onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n  /** If true, events can be resized by dragging their edges @default false */\n  withEventResize?: boolean;\n\n  /** Called when event is resized */\n  onEventResize?: (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 resized */\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n  /** 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. Combined with `withEventResize`, timed background events in `day` and `week` views can also be resized by dragging their edges. @default false */\n  withInteractiveBackgroundEvents?: boolean;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n\n  /** Layout mode:\n   * - `'default'` uses same views on all screen sizes\n   * - `'responsive'` switches to YearView/MobileMonthView on small screens\n   * @default 'default' */\n  layout?: ScheduleLayout;\n\n  /** Props specific to DayView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  dayViewProps?: ScheduleViewProps<DayViewProps>;\n\n  /** Props specific to WeekView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  weekViewProps?: ScheduleViewProps<WeekViewProps>;\n\n  /** Props specific to MonthView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  monthViewProps?: ScheduleViewProps<MonthViewProps>;\n\n  /** Props specific to YearView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  yearViewProps?: ScheduleViewProps<YearViewProps>;\n\n  /** Props specific to MobileMonthView (used in responsive layout) */\n  mobileMonthViewProps?: ScheduleViewProps<MobileMonthViewProps>;\n\n  /** If set, displays an Agenda button in the header of DayView, WeekView and MonthView @default false */\n  withAgenda?: boolean;\n}\n\nexport type ScheduleFactory = Factory<{\n  props: ScheduleProps;\n  ref: HTMLDivElement;\n  stylesNames: ScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ScheduleProps> = {\n  defaultView: 'week',\n  mode: 'default',\n  layout: 'default',\n};\n\nexport const Schedule = factory<ScheduleFactory>((_props) => {\n  const props = useProps('Schedule', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    date,\n    defaultDate,\n    onDateChange,\n    view,\n    defaultView,\n    onViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize,\n    onEventResize,\n    canResizeEvent,\n    withInteractiveBackgroundEvents,\n    recurrenceExpansionLimit,\n    mode,\n    layout,\n    dayViewProps,\n    weekViewProps,\n    monthViewProps,\n    yearViewProps,\n    mobileMonthViewProps,\n    withAgenda,\n    __staticSelector,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScheduleFactory>({\n    name: __staticSelector || 'Schedule',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const [_view, _setView] = useUncontrolled<ScheduleViewLevel>({\n    value: view,\n    defaultValue: defaultView,\n    onChange: onViewChange,\n  });\n\n  const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n    value: date,\n    defaultValue: defaultDate ?? new Date(),\n  });\n\n  const handleDateChange = (newDate: DateStringValue) => {\n    _setDate(newDate);\n    onDateChange?.(newDate);\n  };\n\n  const handleViewChange = (newView: ScheduleViewLevel) => {\n    _setView(newView);\n    onViewChange?.(newView);\n  };\n\n  const handleMonthClick = (monthDate: DateStringValue) => {\n    handleDateChange(monthDate);\n    handleViewChange('month');\n  };\n\n  const commonProps = {\n    date: _date,\n    onDateChange: handleDateChange,\n    view: _view,\n    onViewChange: handleViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize: mode === 'static' ? false : withEventResize,\n    onEventResize,\n    canResizeEvent,\n    recurrenceExpansionLimit,\n    mode,\n    withAgenda,\n  };\n\n  const desktopContent = (() => {\n    switch (_view) {\n      case 'day':\n        return (\n          <DayView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...dayViewProps}\n          />\n        );\n      case 'week':\n        return (\n          <WeekView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...weekViewProps}\n          />\n        );\n      case 'month':\n        return (\n          <MonthView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...monthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  const mobileContent = (() => {\n    switch (_view) {\n      case 'day':\n      case 'week':\n      case 'month':\n        return (\n          <MobileMonthView\n            date={_date}\n            onDateChange={handleDateChange}\n            events={events}\n            locale={locale}\n            radius={radius}\n            labels={labels}\n            mode={mode}\n            recurrenceExpansionLimit={recurrenceExpansionLimit}\n            onYearClick={() => handleViewChange('year')}\n            onEventClick={onEventClick}\n            {...mobileMonthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  if (layout === 'responsive') {\n    return (\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others}>\n        <Box {...getStyles('desktopView')}>{desktopContent}</Box>\n        <Box {...getStyles('mobileView')}>{mobileContent}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box {...getStyles('root')} mod={mod} {...others}>\n      {desktopContent}\n    </Box>\n  );\n});\n\nSchedule.displayName = '@mantine/schedule/Schedule';\nSchedule.classes = classes;\n\nexport namespace Schedule {\n  export type Props = ScheduleProps;\n  export type StylesNames = ScheduleStylesNames;\n  export type Factory = ScheduleFactory;\n  export type Layout = ScheduleLayout;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Schedule.mjs","names":["classes"],"sources":["../../../src/components/Schedule/Schedule.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateStringValue,\n  DateTimeStringValue,\n  PreventEventOverlap,\n  ScheduleCanDropEventData,\n  ScheduleCanDropExternalEventData,\n  ScheduleCanResizeEventToData,\n  ScheduleEventData,\n  ScheduleEventPlacementRejectedData,\n  ScheduleMode,\n  ScheduleViewLevel,\n} from '../../types';\nimport { DayView, DayViewProps, DayViewStylesNames } from '../DayView/DayView';\nimport {\n  MobileMonthView,\n  MobileMonthViewProps,\n  MobileMonthViewStylesNames,\n} from '../MobileMonthView/MobileMonthView';\nimport { MonthView, MonthViewProps, MonthViewStylesNames } from '../MonthView/MonthView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport { WeekView, WeekViewProps, WeekViewStylesNames } from '../WeekView/WeekView';\nimport { YearView, YearViewProps, YearViewStylesNames } from '../YearView/YearView';\nimport classes from './Schedule.module.css';\n\nexport type ScheduleStylesNames =\n  | 'root'\n  | 'desktopView'\n  | 'mobileView'\n  | DayViewStylesNames\n  | WeekViewStylesNames\n  | MonthViewStylesNames\n  | YearViewStylesNames\n  | MobileMonthViewStylesNames;\n\nexport type ScheduleLayout = 'default' | 'responsive';\n\ntype ScheduleCommonProps =\n  | 'date'\n  | 'onDateChange'\n  | 'events'\n  | 'locale'\n  | 'radius'\n  | 'labels'\n  | 'renderEventBody'\n  | 'withEventsDragAndDrop'\n  | 'onEventDrop'\n  | 'canDragEvent'\n  | 'onEventDragStart'\n  | 'onEventDragEnd'\n  | 'onTimeSlotClick'\n  | 'onAllDaySlotClick'\n  | 'onEventClick'\n  | 'onDayClick'\n  | 'onMonthClick'\n  | 'withDragSlotSelect'\n  | 'onSlotDragEnd'\n  | 'view'\n  | 'onViewChange'\n  | 'mode'\n  | 'withAgenda'\n  | 'onExternalEventDrop'\n  | 'withEventResize'\n  | 'onEventResize'\n  | 'canResizeEvent'\n  | 'canDropEvent'\n  | 'canDropExternalEvent'\n  | 'canResizeEventTo'\n  | 'preventEventOverlap'\n  | 'onEventPlacementRejected'\n  | 'recurrenceExpansionLimit'\n  | 'withInteractiveBackgroundEvents';\n\ntype ScheduleViewProps<T> = Partial<Omit<T, ScheduleCommonProps>>;\n\nexport interface ScheduleProps\n  extends BoxProps, StylesApiProps<ScheduleFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Current date to display (controlled) */\n  date?: Date | DateStringValue;\n\n  /** Default date (uncontrolled) */\n  defaultDate?: Date | DateStringValue;\n\n  /** Called when date changes via navigation */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Current view level (controlled) */\n  view?: ScheduleViewLevel;\n\n  /** Default view level (uncontrolled) */\n  defaultView?: ScheduleViewLevel;\n\n  /** Called when view level changes */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Events to display across all views */\n  events?: ScheduleEventData[];\n\n  /** Locale for date formatting (overrides `DatesProvider`) */\n  locale?: string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Custom event body renderer */\n  renderEventBody?: RenderEventBody;\n\n  /** Enable drag and drop for events @default false */\n  withEventsDragAndDrop?: boolean;\n\n  /** Called when event is dropped */\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  /** Called when time slot is clicked in DayView/WeekView */\n  onTimeSlotClick?: (data: {\n    slotStart: DateTimeStringValue;\n    slotEnd: DateTimeStringValue;\n    nativeEvent: React.MouseEvent<HTMLButtonElement>;\n  }) => void;\n\n  /** Called when all-day slot is clicked in DayView/WeekView */\n  onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called when a day is clicked in MonthView and YearView */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, enables drag-to-select slot ranges @default false */\n  withDragSlotSelect?: boolean;\n\n  /** Called when a slot range is selected by dragging */\n  onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n  /** Called when event is clicked in any view */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Interaction mode:\n   * - `'default'` allows all interactions\n   * - `'static'` disables event interactions\n   * @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n  onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n  /** If true, events can be resized by dragging their edges @default false */\n  withEventResize?: boolean;\n\n  /** Called when event is resized */\n  onEventResize?: (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 resized */\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n  /** Called while an event is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. */\n  canDropEvent?: (data: ScheduleCanDropEventData) => boolean;\n\n  /** Called while an external item is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. Only `dataTransfer.types` can be read while the drag is in progress. */\n  canDropExternalEvent?: (data: ScheduleCanDropExternalEventData) => boolean;\n\n  /** Called on every pointer move while an event is resized to compute live feedback and again before the resize is committed, return `false` to reject the new size. Must be pure and cheap. */\n  canResizeEventTo?: (data: ScheduleCanResizeEventToData) => boolean;\n\n  /** If set, drops and resizes that would make the event overlap another event are rejected. Pass a function to decide per pair of events: return `true` to forbid the overlap. The function runs while dragging and resizing to compute live feedback, it must be pure and cheap. @default false */\n  preventEventOverlap?: PreventEventOverlap;\n\n  /** Called when a drop or resize is rejected */\n  onEventPlacementRejected?: (data: ScheduleEventPlacementRejectedData) => void;\n\n  /** 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. Combined with `withEventResize`, timed background events in `day` and `week` views can also be resized by dragging their edges. @default false */\n  withInteractiveBackgroundEvents?: boolean;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n\n  /** Layout mode:\n   * - `'default'` uses same views on all screen sizes\n   * - `'responsive'` switches to YearView/MobileMonthView on small screens\n   * @default 'default' */\n  layout?: ScheduleLayout;\n\n  /** Props specific to DayView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  dayViewProps?: ScheduleViewProps<DayViewProps>;\n\n  /** Props specific to WeekView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  weekViewProps?: ScheduleViewProps<WeekViewProps>;\n\n  /** Props specific to MonthView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  monthViewProps?: ScheduleViewProps<MonthViewProps>;\n\n  /** Props specific to YearView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  yearViewProps?: ScheduleViewProps<YearViewProps>;\n\n  /** Props specific to MobileMonthView (used in responsive layout) */\n  mobileMonthViewProps?: ScheduleViewProps<MobileMonthViewProps>;\n\n  /** If set, displays an Agenda button in the header of DayView, WeekView and MonthView @default false */\n  withAgenda?: boolean;\n}\n\nexport type ScheduleFactory = Factory<{\n  props: ScheduleProps;\n  ref: HTMLDivElement;\n  stylesNames: ScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ScheduleProps> = {\n  defaultView: 'week',\n  mode: 'default',\n  layout: 'default',\n};\n\nexport const Schedule = factory<ScheduleFactory>((_props) => {\n  const props = useProps('Schedule', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    date,\n    defaultDate,\n    onDateChange,\n    view,\n    defaultView,\n    onViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize,\n    onEventResize,\n    canResizeEvent,\n    canDropEvent,\n    canDropExternalEvent,\n    canResizeEventTo,\n    preventEventOverlap,\n    onEventPlacementRejected,\n    withInteractiveBackgroundEvents,\n    recurrenceExpansionLimit,\n    mode,\n    layout,\n    dayViewProps,\n    weekViewProps,\n    monthViewProps,\n    yearViewProps,\n    mobileMonthViewProps,\n    withAgenda,\n    __staticSelector,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScheduleFactory>({\n    name: __staticSelector || 'Schedule',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const [_view, _setView] = useUncontrolled<ScheduleViewLevel>({\n    value: view,\n    defaultValue: defaultView,\n    onChange: onViewChange,\n  });\n\n  const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n    value: date,\n    defaultValue: defaultDate ?? new Date(),\n  });\n\n  const handleDateChange = (newDate: DateStringValue) => {\n    _setDate(newDate);\n    onDateChange?.(newDate);\n  };\n\n  const handleViewChange = (newView: ScheduleViewLevel) => {\n    _setView(newView);\n    onViewChange?.(newView);\n  };\n\n  const handleMonthClick = (monthDate: DateStringValue) => {\n    handleDateChange(monthDate);\n    handleViewChange('month');\n  };\n\n  const commonProps = {\n    date: _date,\n    onDateChange: handleDateChange,\n    view: _view,\n    onViewChange: handleViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize: mode === 'static' ? false : withEventResize,\n    onEventResize,\n    canResizeEvent,\n    recurrenceExpansionLimit,\n    mode,\n    withAgenda,\n  };\n\n  const dropValidationProps = {\n    canDropEvent,\n    canDropExternalEvent,\n    preventEventOverlap,\n    onEventPlacementRejected,\n  };\n\n  const placementValidationProps = { ...dropValidationProps, canResizeEventTo };\n\n  const desktopContent = (() => {\n    switch (_view) {\n      case 'day':\n        return (\n          <DayView\n            {...commonProps}\n            {...placementValidationProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...dayViewProps}\n          />\n        );\n      case 'week':\n        return (\n          <WeekView\n            {...commonProps}\n            {...placementValidationProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...weekViewProps}\n          />\n        );\n      case 'month':\n        return (\n          <MonthView\n            {...commonProps}\n            {...dropValidationProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...monthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  const mobileContent = (() => {\n    switch (_view) {\n      case 'day':\n      case 'week':\n      case 'month':\n        return (\n          <MobileMonthView\n            date={_date}\n            onDateChange={handleDateChange}\n            events={events}\n            locale={locale}\n            radius={radius}\n            labels={labels}\n            mode={mode}\n            recurrenceExpansionLimit={recurrenceExpansionLimit}\n            onYearClick={() => handleViewChange('year')}\n            onEventClick={onEventClick}\n            {...mobileMonthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  if (layout === 'responsive') {\n    return (\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others}>\n        <Box {...getStyles('desktopView')}>{desktopContent}</Box>\n        <Box {...getStyles('mobileView')}>{mobileContent}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box {...getStyles('root')} mod={mod} {...others}>\n      {desktopContent}\n    </Box>\n  );\n});\n\nSchedule.displayName = '@mantine/schedule/Schedule';\nSchedule.classes = classes;\n\nexport namespace Schedule {\n  export type Props = ScheduleProps;\n  export type StylesNames = ScheduleStylesNames;\n  export type Factory = ScheduleFactory;\n  export type Layout = ScheduleLayout;\n}\n"],"mappings":"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"}

package/esm/components/ScheduleEvent/ScheduleEvent.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScheduleEvent.module.mjs","names":[],"sources":["../../../src/components/ScheduleEvent/ScheduleEvent.module.css"],"sourcesContent":[".event {\n  padding: 1px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  position: relative;\n  z-index: 3;\n\n  &:where([data-auto-size]) {\n    container-type: size;\n  }\n\n  &:where([data-draggable]) .eventInner {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.2;\n\n    .eventInner {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-any-dragging]:not([data-dragging])) {\n    pointer-events: none;\n\n    .eventInner {\n      pointer-events: none;\n    }\n  }\n\n  &:where([data-static]) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &:where([data-cascade]) {\n    z-index: var(--event-z-index, 3);\n    transition: z-index 0s;\n\n    .eventInner {\n      box-shadow: 0 0 0 1px var(--mantine-color-body);\n    }\n\n    &:where(:not([data-resizing], [data-dragging])) {\n      @mixin hover {\n        z-index: var(--event-z-index-raised, 9);\n        transition-delay: var(--event-raise-delay, 600ms);\n      }\n\n      /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */\n      &:where(:focus-visible) {\n        z-index: var(--event-z-index-raised, 9);\n      }\n    }\n  }\n\n  &:where([data-resizing]) {\n    z-index: 10;\n\n    .eventInner {\n      @mixin hover {\n        background-color: var(--event-bg);\n      }\n    }\n  }\n\n  &:where([data-cascade][data-resizing]) {\n    z-index: var(--event-cascade-interaction-z-index, 999);\n  }\n\n  &:where([data-hanging='start'], [data-hanging='both']) {\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-start: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-start: 6px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n\n  &:where([data-hanging='end'], [data-hanging='both']) {\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-end: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-end: 6px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  &:where([data-clip-start]) {\n    .eventInner {\n      padding-inline-start: 12px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);\n    }\n  }\n\n  &:where([data-clip-end]) {\n    .eventInner {\n      padding-inline-end: 12px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);\n    }\n  }\n\n  &:where([data-clip-start][data-clip-end]) {\n    .eventInner {\n      clip-path: polygon(\n        10px 0,\n        calc(100% - 10px) 0,\n        100% 50%,\n        calc(100% - 10px) 100%,\n        10px 100%,\n        0 50%\n      );\n    }\n  }\n}\n\n.eventInner {\n  background-color: var(--event-bg);\n  color: var(--event-color);\n  pointer-events: all;\n  border-radius: min(var(--event-radius), 50%);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: 12px;\n  line-height: 1;\n  padding: 3px 4px;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n\n  &:where([data-nowrap]) {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 1.25;\n  }\n\n  &:where([data-size='md']) {\n    font-size: 14px;\n    padding: 4px 6px;\n  }\n\n  @mixin hover {\n    background-color: var(--event-hover);\n  }\n\n  &:where([data-auto-size]) {\n    @container (max-width: 12px) {\n      padding-inline: 0;\n    }\n\n    @container (min-width: 16px) {\n      width: calc(100% - 2px);\n      margin-inline: auto;\n    }\n\n    @container (max-height: 18px) {\n      font-size: 9px;\n      padding-block: 0px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n\n  .event[data-static] & {\n    cursor: default;\n    pointer-events: none;\n\n    @mixin hover {\n      background-color: var(--event-bg);\n    }\n  }\n\n  :where([data-slot-dragging]) & {\n    pointer-events: none;\n  }\n}\n\n.eventResizeHandle {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40%;\n  max-width: 40px;\n  height: 4px;\n  border-radius: 2px;\n  cursor: ns-resize;\n  pointer-events: all;\n  z-index: 4;\n  touch-action: none;\n  background-color: var(--event-color);\n  opacity: 0;\n  transition: opacity 100ms ease;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: -4px -6px;\n  }\n\n  &:where([data-edge='top']) {\n    top: -2px;\n  }\n\n  &:where([data-edge='bottom']) {\n    bottom: -2px;\n  }\n\n  .event:where(:hover, [data-resizing]) & {\n    opacity: 0.5;\n  }\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ScheduleEvent.module.mjs","names":[],"sources":["../../../src/components/ScheduleEvent/ScheduleEvent.module.css"],"sourcesContent":[".event {\n  padding: 1px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  position: relative;\n  z-index: 3;\n\n  &:where([data-auto-size]) {\n    container-type: size;\n  }\n\n  &:where([data-draggable]) .eventInner {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-invalid]) .eventInner {\n    border: 1px solid var(--mantine-color-error);\n    opacity: 0.6;\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.2;\n\n    .eventInner {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-any-dragging]:not([data-dragging])) {\n    pointer-events: none;\n\n    .eventInner {\n      pointer-events: none;\n    }\n  }\n\n  &:where([data-static]) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &:where([data-cascade]) {\n    z-index: var(--event-z-index, 3);\n    transition: z-index 0s;\n\n    .eventInner {\n      box-shadow: 0 0 0 1px var(--mantine-color-body);\n    }\n\n    &:where(:not([data-resizing], [data-dragging])) {\n      @mixin hover {\n        z-index: var(--event-z-index-raised, 9);\n        transition-delay: var(--event-raise-delay, 600ms);\n      }\n\n      /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */\n      &:where(:focus-visible) {\n        z-index: var(--event-z-index-raised, 9);\n      }\n    }\n  }\n\n  &:where([data-resizing]) {\n    z-index: 10;\n\n    .eventInner {\n      @mixin hover {\n        background-color: var(--event-bg);\n      }\n    }\n  }\n\n  &:where([data-cascade][data-resizing]) {\n    z-index: var(--event-cascade-interaction-z-index, 999);\n  }\n\n  &:where([data-hanging='start'], [data-hanging='both']) {\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-start: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-start: 6px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n\n  &:where([data-hanging='end'], [data-hanging='both']) {\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-end: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-end: 6px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  &:where([data-clip-start]) {\n    .eventInner {\n      padding-inline-start: 12px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);\n    }\n  }\n\n  &:where([data-clip-end]) {\n    .eventInner {\n      padding-inline-end: 12px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);\n    }\n  }\n\n  &:where([data-clip-start][data-clip-end]) {\n    .eventInner {\n      clip-path: polygon(\n        10px 0,\n        calc(100% - 10px) 0,\n        100% 50%,\n        calc(100% - 10px) 100%,\n        10px 100%,\n        0 50%\n      );\n    }\n  }\n}\n\n.eventInner {\n  background-color: var(--event-bg);\n  color: var(--event-color);\n  pointer-events: all;\n  border-radius: min(var(--event-radius), 50%);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: 12px;\n  line-height: 1;\n  padding: 3px 4px;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n\n  &:where([data-nowrap]) {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 1.25;\n  }\n\n  &:where([data-size='md']) {\n    font-size: 14px;\n    padding: 4px 6px;\n  }\n\n  @mixin hover {\n    background-color: var(--event-hover);\n  }\n\n  &:where([data-auto-size]) {\n    @container (max-width: 12px) {\n      padding-inline: 0;\n    }\n\n    @container (min-width: 16px) {\n      width: calc(100% - 2px);\n      margin-inline: auto;\n    }\n\n    @container (max-height: 18px) {\n      font-size: 9px;\n      padding-block: 0px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n\n  .event[data-static] & {\n    cursor: default;\n    pointer-events: none;\n\n    @mixin hover {\n      background-color: var(--event-bg);\n    }\n  }\n\n  :where([data-slot-dragging]) & {\n    pointer-events: none;\n  }\n}\n\n.eventResizeHandle {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40%;\n  max-width: 40px;\n  height: 4px;\n  border-radius: 2px;\n  cursor: ns-resize;\n  pointer-events: all;\n  z-index: 4;\n  touch-action: none;\n  background-color: var(--event-color);\n  opacity: 0;\n  transition: opacity 100ms ease;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: -4px -6px;\n  }\n\n  &:where([data-edge='top']) {\n    top: -2px;\n  }\n\n  &:where([data-edge='bottom']) {\n    bottom: -2px;\n  }\n\n  .event:where(:hover, [data-resizing]) & {\n    opacity: 0.5;\n  }\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n}\n"],"mappings":""}

package/esm/components/WeekView/WeekView.mjs

@@ -67,7 +67,7 @@ const varsResolver = createVarsResolver((_theme, { radius, allDaySlotHeight, slo
 } }));
 const WeekView = factory((_props) => {
 	const props = useProps("WeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, eventOverlapMode, eventOverlapRaiseDelay, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, eventOverlapMode, eventOverlapRaiseDelay, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, canDropEvent, canDropExternalEvent, canResizeEventTo, preventEventOverlap, onEventPlacementRejected, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = useState(false);
 	const getStyles = useStyles({
 		name: __staticSelector,
@@ -102,6 +102,18 @@ const WeekView = factory((_props) => {
 		endTime,
 		intervalMinutes
 	});
+	const weekdays = getWeekDays({
+		week: date,
+		withWeekendDays,
+		weekendDays: ctx.getWeekendDays(weekendDays),
+		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
+	});
+	const expandedEvents = expandRecurringEvents({
+		events,
+		rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
+		rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const viewportRef = useRef(null);
 	useAutoScrollOnDrag({
 		viewportRef,
@@ -125,15 +137,11 @@ const WeekView = factory((_props) => {
 			endTime
 		});
 	};
-	const handleExternalDrop = useCallback((e, target) => {
-		if (!onExternalEventDrop) return;
+	const getExternalDropDateTime = useCallback((target) => {
 		const slotDate = dayjs(target.day).format("YYYY-MM-DD");
 		const slotTime = slots[target.slotIndex].startTime;
-		if (eventDragInterval == null) {
-			onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
-			return;
-		}
 		const slotStart = `${slotDate} ${slotTime}`;
+		if (eventDragInterval == null) return slotStart;
 		const { start } = calculateDropTime({
 			draggedEvent: {
 				start: slotStart,
@@ -148,19 +156,23 @@ const WeekView = factory((_props) => {
 			startTime,
 			endTime
 		});
-		onExternalEventDrop(e.dataTransfer, dayjs(start).format("YYYY-MM-DD HH:mm:ss"));
+		return dayjs(start).format("YYYY-MM-DD HH:mm:ss");
 	}, [
-		onExternalEventDrop,
 		slots,
 		eventDragInterval,
 		intervalMinutes,
 		startTime,
 		endTime
 	]);
+	const handleExternalDrop = useCallback((e, target) => {
+		if (!onExternalEventDrop) return;
+		onExternalEventDrop(e.dataTransfer, getExternalDropDateTime(target));
+	}, [onExternalEventDrop, getExternalDropDateTime]);
+	const getExternalAllDayDropDateTime = useCallback((day) => `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`, []);
 	const handleExternalAllDayDrop = useCallback((e, day) => {
 		if (!onExternalEventDrop) return;
-		onExternalEventDrop(e.dataTransfer, `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`);
-	}, [onExternalEventDrop]);
+		onExternalEventDrop(e.dataTransfer, getExternalAllDayDropDateTime(day));
+	}, [onExternalEventDrop, getExternalAllDayDropDateTime]);
 	const dragDrop = useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
@@ -169,7 +181,13 @@ const WeekView = factory((_props) => {
 		onEventDragStart,
 		onEventDragEnd,
 		calculateDropTarget: getDropTimeForSlot,
-		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
+		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0,
+		events: expandedEvents,
+		preventEventOverlap,
+		canDropEvent,
+		canDropExternalEvent,
+		onEventPlacementRejected,
+		getExternalDropDateTime
 	});
 	const updateDragPreview = (target) => {
 		const draggedEvent = dragDrop.dragContextValue.draggedEvent;
@@ -198,7 +216,13 @@ const WeekView = factory((_props) => {
 				end: newStart.add(eventDuration, "millisecond").toDate()
 			};
 		},
-		onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0
+		onExternalDrop: onExternalEventDrop ? handleExternalAllDayDrop : void 0,
+		events: expandedEvents,
+		preventEventOverlap,
+		canDropEvent,
+		canDropExternalEvent,
+		onEventPlacementRejected,
+		getExternalDropDateTime: getExternalAllDayDropDateTime
 	});
 	const slotDragSelect = useSlotDragSelect({
 		enabled: withDragSlotSelect && mode !== "static",
@@ -217,6 +241,10 @@ const WeekView = factory((_props) => {
 		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent,
+		events: expandedEvents,
+		preventEventOverlap,
+		canResizeEventTo,
+		onEventPlacementRejected,
 		withBackgroundEvents: withInteractiveBackgroundEvents
 	});
 	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
@@ -232,18 +260,6 @@ const WeekView = factory((_props) => {
 			nativeEvent: e
 		});
 	};
-	const weekdays = getWeekDays({
-		week: date,
-		withWeekendDays,
-		weekendDays: ctx.getWeekendDays(weekendDays),
-		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
-	});
-	const expandedEvents = expandRecurringEvents({
-		events,
-		rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
-		rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
-		expansionLimit: recurrenceExpansionLimit
-	});
 	const weekEvents = getWeekViewEvents({
 		date,
 		events: expandedEvents,
@@ -296,9 +312,11 @@ const WeekView = factory((_props) => {
 		if (!targetSlot) return;
 		const slotRect = targetSlot.getBoundingClientRect();
 		const viewportRect = viewportRef.current.getBoundingClientRect();
+		const headerEl = viewportRef.current.querySelector(`.${WeekView_module_default.weekViewHeader}`);
+		const headerHeight = headerEl ? headerEl.getBoundingClientRect().height : 0;
 		viewportRef.current.scrollTo({
 			left: 0,
-			top: slotRect.top - viewportRect.top
+			top: slotRect.top - viewportRect.top + viewportRef.current.scrollTop - headerHeight
 		});
 	}, []);
 	const getSlotIndexFromDragPoint = useCallback((event, dayIndex) => {
@@ -472,7 +490,10 @@ const WeekView = factory((_props) => {
 				onClick: onEventClick ? (e) => {
 					if (!eventResize.wasResizing()) onEventClick(event, e);
 				} : void 0,
-				mod: { cascade: eventOverlapMode === "cascade" },
+				mod: {
+					cascade: eventOverlapMode === "cascade",
+					invalid: resizePosition !== null && !eventResize.resizeValid
+				},
 				style: {
 					position: "absolute",
 					...getTimeAxisEventStyle({
@@ -538,25 +559,28 @@ const WeekView = factory((_props) => {
 			children: [
 				backgroundEventNodes,
 				dayEvents,
-				dragDrop.dragPreview?.target.day === day && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ jsx(Box, { ...getStyles("weekViewDragPreview", { style: (() => {
-					const { top, height } = getDayPosition({
-						event: {
-							...dragDrop.dragContextValue.draggedEvent,
-							start: dragDrop.dragPreview.start,
-							end: dragDrop.dragPreview.end
-						},
-						startTime,
-						endTime,
-						intervalMinutes
-					});
-					return {
-						position: "absolute",
-						insetInlineStart: 0,
-						insetInlineEnd: 0,
-						top: `${top}%`,
-						height: `${height}%`
-					};
-				})() }) })
+				dragDrop.dragPreview?.target.day === day && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ jsx(Box, {
+					mod: { invalid: !dragDrop.dropValid },
+					...getStyles("weekViewDragPreview", { style: (() => {
+						const { top, height } = getDayPosition({
+							event: {
+								...dragDrop.dragContextValue.draggedEvent,
+								start: dragDrop.dragPreview.start,
+								end: dragDrop.dragPreview.end
+							},
+							startTime,
+							endTime,
+							intervalMinutes
+						});
+						return {
+							position: "absolute",
+							insetInlineStart: 0,
+							insetInlineEnd: 0,
+							top: `${top}%`,
+							height: `${height}%`
+						};
+					})() })
+				})
 			]
 		}, day);
 	});