@mantine/schedule 9.6.0 → 9.6.2

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

@@ -1 +1 @@
-{"version":3,"file":"DayView.module.mjs","names":[],"sources":["../../../src/components/DayView/DayView.module.css"],"sourcesContent":[".dayView {\n  --slot-height: var(--day-view-slot-height, 64px); /* total height of 1 hour slot */\n  --all-day-slot-height: var(--day-view-all-day-slot-height, 44px); /* height of all day slot */\n  --day-view-slot-labels-width: 80px;\n  --day-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n  border-radius: var(--day-view-radius);\n  overflow: hidden;\n\n  @mixin where-light {\n    --day-view-border-color: var(--mantine-color-gray-3);\n    --day-view-business-hours-bg: var(--mantine-color-white);\n    --day-view-non-business-hours-bg: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    --day-view-border-color: var(--mantine-color-dark-4);\n    --day-view-business-hours-bg: var(--mantine-color-dark-7);\n    --day-view-non-business-hours-bg: var(--mantine-color-dark-6);\n  }\n}\n\n.dayViewHeader {\n  text-transform: capitalize;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mantine-font-size-sm);\n  font-weight: var(--mantine-font-weight-medium);\n}\n\n.dayViewScrollArea {\n  border: 1px solid var(--day-view-border-color);\n  border-radius: var(--day-view-radius);\n  overflow: hidden;\n\n  :where(:global(.mantine-ScrollArea-scrollbar)) {\n    z-index: 4;\n  }\n}\n\n.dayViewInner {\n  display: flex;\n}\n\n.dayViewTimeSlots {\n  position: relative;\n\n  &:where(:first-of-type) .dayViewSlot:where([data-first]) {\n    border-top-color: transparent;\n  }\n}\n\n.dayViewSlotLabels {\n  width: var(--day-view-slot-labels-width);\n}\n\n.dayViewSlotLabel {\n  height: var(--slot-height);\n  border-top: 1px solid var(--day-view-border-color);\n  font-size: var(--mantine-font-size-sm);\n  text-align: right;\n  padding: 4px 8px;\n  font-variant-numeric: tabular-nums;\n\n  &:where([data-all-day]) {\n    height: var(--all-day-slot-height);\n    border-top: 0;\n  }\n\n  &:where(:first-of-type) {\n    border-top: 0;\n  }\n\n  &:where([data-business-hours]) {\n    background-color: var(--day-view-business-hours-bg);\n  }\n\n  &:where([data-non-business-hours]) {\n    background-color: var(--day-view-non-business-hours-bg);\n  }\n}\n\n.dayViewSlots {\n  flex: 1;\n}\n\n.dayViewSlot {\n  display: block;\n  width: 100%;\n  border-top: 1px dotted var(--day-view-border-color);\n  height: calc(var(--slot-height) * var(--slot-size));\n  position: relative;\n\n  &:where(:focus) {\n    z-index: 1;\n  }\n\n  &:where([data-hour-start]) {\n    border-top: 1px solid var(--day-view-border-color);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-all-day]) {\n    height: var(--all-day-slot-height);\n    border-top: 0;\n  }\n\n  &:where([data-business-hours]) {\n    background-color: var(--day-view-business-hours-bg);\n  }\n\n  &:where([data-non-business-hours]) {\n    background-color: var(--day-view-non-business-hours-bg);\n  }\n\n  &:where([data-drop-target]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-blue-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 2;\n      border: 1px solid;\n      border-radius: 2px;\n\n      @mixin where-light {\n        border-color: var(--mantine-color-blue-4);\n      }\n\n      @mixin where-dark {\n        border-color: var(--mantine-color-blue-6);\n      }\n    }\n  }\n\n  &:where([data-drag-selected]) {\n    &,\n    &:hover {\n      background-color: var(--mantine-primary-color-light);\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: -1px;\n      pointer-events: none;\n      z-index: 2;\n      border: 1px solid;\n\n      @mixin where-light {\n        border-color: var(--mantine-primary-color-2);\n      }\n\n      @mixin where-dark {\n        border-color: var(--mantine-primary-color-9);\n      }\n    }\n  }\n\n  &:where([data-drag-slot-index]) {\n    touch-action: none;\n  }\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.dayView:where([data-hide-sub-hour-grid-lines]) .dayViewSlot:not([data-hour-start]) {\n  border-top-color: transparent;\n}\n\n.dayView:where([data-event-interaction]) .dayViewSlot:not([data-all-day]) {\n  pointer-events: none;\n}\n\n.dayViewBackgroundEvent {\n  position: absolute;\n  border-radius: 0;\n  pointer-events: none;\n  z-index: 2;\n  background-color: var(--bg-event-bg);\n  overflow: hidden;\n  font-size: 12px;\n  font-weight: var(--mantine-font-weight-medium);\n  padding: 3px 4px;\n  color: var(--bg-event-color);\n\n  &:where([data-interactive]) {\n    pointer-events: auto;\n    cursor: pointer;\n    user-select: none;\n\n    @mixin hover {\n      background-color: var(--bg-event-hover);\n    }\n  }\n}\n\n.dayView:where([data-event-interaction], [data-slot-dragging]) .dayViewBackgroundEvent {\n  pointer-events: none;\n}\n\n.dayViewAllDay {\n  position: relative;\n  height: var(--all-day-slot-height);\n}\n\n.dayViewAllDayEvents {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  pointer-events: none;\n  z-index: 3;\n}\n\n.dayViewDragPreview {\n  pointer-events: none;\n  z-index: 3;\n  border-radius: var(--day-view-radius);\n  border: 1px dashed var(--mantine-color-blue-filled);\n  background-color: var(--mantine-color-blue-light);\n  opacity: 0.6;\n}\n"],"mappings":""}
+{"version":3,"file":"DayView.module.mjs","names":[],"sources":["../../../src/components/DayView/DayView.module.css"],"sourcesContent":[".dayView {\n  --slot-height: var(--day-view-slot-height, 64px); /* total height of 1 hour slot */\n  --all-day-slot-height: var(--day-view-all-day-slot-height, 44px); /* height of all day slot */\n  --day-view-slot-labels-width: 80px;\n  --day-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n  border-radius: var(--day-view-radius);\n  overflow: hidden;\n\n  @mixin where-light {\n    --day-view-border-color: var(--mantine-color-gray-3);\n    --day-view-business-hours-bg: var(--mantine-color-white);\n    --day-view-non-business-hours-bg: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    --day-view-border-color: var(--mantine-color-dark-4);\n    --day-view-business-hours-bg: var(--mantine-color-dark-7);\n    --day-view-non-business-hours-bg: var(--mantine-color-dark-6);\n  }\n}\n\n.dayViewHeader {\n  text-transform: capitalize;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mantine-font-size-sm);\n  font-weight: var(--mantine-font-weight-medium);\n}\n\n.dayViewScrollArea {\n  border: 1px solid var(--day-view-border-color);\n  border-radius: var(--day-view-radius);\n  overflow: hidden;\n\n  :where(:global(.mantine-ScrollArea-scrollbar)) {\n    z-index: 4;\n  }\n}\n\n.dayViewInner {\n  display: flex;\n}\n\n.dayViewTimeSlots {\n  position: relative;\n\n  /* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */\n  &:where(:has([data-cascade])) {\n    isolation: isolate;\n\n    /* Drag and resize feedback must stay above every cascade column */\n    --event-cascade-interaction-z-index: 999;\n\n    .dayViewDragPreview {\n      z-index: var(--event-cascade-interaction-z-index);\n    }\n  }\n\n  &:where(:first-of-type) .dayViewSlot:where([data-first]) {\n    border-top-color: transparent;\n  }\n}\n\n.dayViewSlotLabels {\n  width: var(--day-view-slot-labels-width);\n}\n\n.dayViewSlotLabel {\n  height: var(--slot-height);\n  border-top: 1px solid var(--day-view-border-color);\n  font-size: var(--mantine-font-size-sm);\n  text-align: right;\n  padding: 4px 8px;\n  font-variant-numeric: tabular-nums;\n\n  &:where([data-all-day]) {\n    height: var(--all-day-slot-height);\n    border-top: 0;\n  }\n\n  &:where(:first-of-type) {\n    border-top: 0;\n  }\n\n  &:where([data-business-hours]) {\n    background-color: var(--day-view-business-hours-bg);\n  }\n\n  &:where([data-non-business-hours]) {\n    background-color: var(--day-view-non-business-hours-bg);\n  }\n}\n\n.dayViewSlots {\n  flex: 1;\n}\n\n.dayViewSlot {\n  display: block;\n  width: 100%;\n  border-top: 1px dotted var(--day-view-border-color);\n  height: calc(var(--slot-height) * var(--slot-size));\n  position: relative;\n\n  &:where(:focus) {\n    z-index: 1;\n  }\n\n  &:where([data-hour-start]) {\n    border-top: 1px solid var(--day-view-border-color);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-all-day]) {\n    height: var(--all-day-slot-height);\n    border-top: 0;\n  }\n\n  &:where([data-business-hours]) {\n    background-color: var(--day-view-business-hours-bg);\n  }\n\n  &:where([data-non-business-hours]) {\n    background-color: var(--day-view-non-business-hours-bg);\n  }\n\n  &:where([data-drop-target]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-blue-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      z-index: 2;\n      border: 1px solid;\n      border-radius: 2px;\n\n      @mixin where-light {\n        border-color: var(--mantine-color-blue-4);\n      }\n\n      @mixin where-dark {\n        border-color: var(--mantine-color-blue-6);\n      }\n    }\n  }\n\n  &:where([data-drag-selected]) {\n    &,\n    &:hover {\n      background-color: var(--mantine-primary-color-light);\n    }\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: -1px;\n      pointer-events: none;\n      z-index: 2;\n      border: 1px solid;\n\n      @mixin where-light {\n        border-color: var(--mantine-primary-color-2);\n      }\n\n      @mixin where-dark {\n        border-color: var(--mantine-primary-color-9);\n      }\n    }\n  }\n\n  &:where([data-drag-slot-index]) {\n    touch-action: none;\n  }\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.dayView:where([data-hide-sub-hour-grid-lines]) .dayViewSlot:not([data-hour-start]) {\n  border-top-color: transparent;\n}\n\n.dayView:where([data-event-interaction]) .dayViewSlot:not([data-all-day]) {\n  pointer-events: none;\n}\n\n.dayViewBackgroundEvent {\n  position: absolute;\n  border-radius: 0;\n  pointer-events: none;\n  z-index: 2;\n  background-color: var(--bg-event-bg);\n  overflow: hidden;\n  font-size: 12px;\n  font-weight: var(--mantine-font-weight-medium);\n  padding: 3px 4px;\n  color: var(--bg-event-color);\n\n  &:where([data-interactive]) {\n    pointer-events: auto;\n    cursor: pointer;\n    user-select: none;\n\n    @mixin hover {\n      background-color: var(--bg-event-hover);\n    }\n  }\n\n  /* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */\n  &:where([data-resizing]) {\n    @mixin hover {\n      background-color: var(--bg-event-bg);\n    }\n  }\n}\n\n.dayViewBackgroundEventResizeHandle {\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(--bg-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: 0;\n  }\n\n  &:where([data-edge='bottom']) {\n    bottom: 0;\n  }\n\n  .dayViewBackgroundEvent:where(:hover, [data-resizing]) & {\n    opacity: 0.5;\n  }\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n}\n\n/* The resizing background event is the one that set `data-event-interaction`, so it must\n   keep capturing pointer events. */\n.dayView:where([data-event-interaction], [data-slot-dragging])\n  .dayViewBackgroundEvent:not([data-resizing]) {\n  pointer-events: none;\n\n  & .dayViewBackgroundEventResizeHandle {\n    pointer-events: none;\n    opacity: 0;\n  }\n}\n\n.dayViewAllDay {\n  position: relative;\n  height: var(--all-day-slot-height);\n}\n\n.dayViewAllDayEvents {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  pointer-events: none;\n  z-index: 3;\n}\n\n.dayViewDragPreview {\n  pointer-events: none;\n  z-index: 3;\n  border-radius: var(--day-view-radius);\n  border: 1px dashed var(--mantine-color-blue-filled);\n  background-color: var(--mantine-color-blue-light);\n  opacity: 0.6;\n}\n"],"mappings":""}

package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs

@@ -3,6 +3,7 @@ import { isAllDayEvent } from "../../../utils/is-all-day-event/is-all-day-event.
 import { sortEvents } from "../../../utils/sort-events/sort-events.mjs";
 import { isEventsOverlap } from "../../../utils/is-events-overlap/is-events-overlap.mjs";
 import { getDayPosition } from "../../../utils/get-day-position/get-day-position.mjs";
+import { applyCascadeLayout } from "../../../utils/apply-cascade-layout/apply-cascade-layout.mjs";
 //#region packages/@mantine/schedule/src/components/DayView/get-day-view-events/get-day-positioned-events.ts
 function columnHasConflict({ columns, columnIndex, event, allDay, date }) {
 	if (!columns[columnIndex]) return false;
@@ -16,7 +17,7 @@ function columnHasConflict({ columns, columnIndex, event, allDay, date }) {
 		return hasTimeConflict;
 	});
 }
-function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date }) {
+function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, eventOverlapMode = "columns" }) {
 	const columns = [];
 	const positioned = [];
 	const sorted = sortEvents(events);
@@ -56,14 +57,18 @@ function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, d
 			}
 		});
 	}
+	for (const positionedEvent of positioned) if (positionedEvent.position.allDay) {
+		positionedEvent.position.overlaps = 1;
+		positionedEvent.position.width = 100;
+		positionedEvent.position.offset = 0;
+	}
+	if (eventOverlapMode === "cascade") {
+		applyCascadeLayout(positioned);
+		return positioned;
+	}
 	for (const positionedEvent of positioned) {
 		const { allDay, column } = positionedEvent.position;
-		if (allDay) {
-			positionedEvent.position.overlaps = 1;
-			positionedEvent.position.width = 100;
-			positionedEvent.position.offset = 0;
-			continue;
-		}
+		if (allDay) continue;
 		const directlyOverlapping = [];
 		for (const otherEvent of positioned) {
 			if (otherEvent === positionedEvent || otherEvent.position.allDay) continue;

package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-day-positioned-events.mjs","names":[],"sources":["../../../../src/components/DayView/get-day-view-events/get-day-positioned-events.ts"],"sourcesContent":["import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';\nimport { getDayPosition, isAllDayEvent, isEventsOverlap, sortEvents } from '../../../utils';\n\ninterface ColumnHasConflictOptions {\n  columns: ScheduleEventData[][];\n  columnIndex: number;\n  event: ScheduleEventData;\n  allDay: boolean;\n  date: AnyDateValue;\n}\n\nfunction columnHasConflict({\n  columns,\n  columnIndex,\n  event,\n  allDay,\n  date,\n}: ColumnHasConflictOptions): boolean {\n  if (!columns[columnIndex]) {\n    return false;\n  }\n\n  return columns[columnIndex].some((e) => {\n    const eAllDay = isAllDayEvent({ event: e, date });\n    const hasTimeConflict = isEventsOverlap(e, event);\n\n    // Don't count all-day events as overlaps\n    if (allDay || eAllDay) {\n      return false;\n    }\n\n    return hasTimeConflict;\n  });\n}\n\ninterface GetDayPositionedEventsInput {\n  /** Date at which events are positioned, used to check if events are all-day */\n  date: AnyDateValue;\n\n  /** List of all events that belong to the given date, extra events must be filtered out before passing to the function */\n  events: ScheduleEventData[];\n\n  /** Start time of the day view, used to calculate event positions */\n  startTime?: string;\n\n  /** End time of the day view, used to calculate event positions */\n  endTime?: string;\n\n  /** Number of minutes per time slot, used to align the canvas to whole slots */\n  intervalMinutes?: number;\n}\n\nexport function getDayPositionedEvents({\n  events,\n  startTime,\n  endTime,\n  intervalMinutes,\n  date,\n}: GetDayPositionedEventsInput) {\n  const columns: ScheduleEventData[][] = [];\n  const positioned: DayPositionedEventData[] = [];\n\n  const sorted = sortEvents(events);\n\n  for (const event of sorted) {\n    const allDay = isAllDayEvent({ event, date });\n\n    let column = 0;\n\n    while (columnHasConflict({ columns, columnIndex: column, event, allDay, date })) {\n      column++;\n    }\n\n    if (!columns[column]) {\n      columns[column] = [];\n    }\n\n    columns[column].push(event);\n\n    const verticalPosition = allDay\n      ? { top: 0, height: 100 }\n      : getDayPosition({ event, startTime, endTime, intervalMinutes });\n\n    positioned.push({\n      ...event,\n      position: {\n        ...verticalPosition,\n        allDay,\n        column,\n\n        // set later\n        width: 0,\n        offset: 0,\n        overlaps: 0,\n      },\n    });\n  }\n  for (const positionedEvent of positioned) {\n    const { allDay, column } = positionedEvent.position;\n\n    if (allDay) {\n      positionedEvent.position.overlaps = 1;\n      positionedEvent.position.width = 100;\n      positionedEvent.position.offset = 0;\n      continue;\n    }\n\n    // Find events that directly overlap with this event\n    const directlyOverlapping: DayPositionedEventData[] = [];\n\n    for (const otherEvent of positioned) {\n      if (otherEvent === positionedEvent || otherEvent.position.allDay) {\n        continue;\n      }\n\n      if (isEventsOverlap(otherEvent, positionedEvent)) {\n        directlyOverlapping.push(otherEvent);\n      }\n    }\n\n    // Find the max column by also checking overlaps of overlapping events\n    // This ensures we account for the full column group\n    let maxColumn = column;\n\n    for (const overlappingEvent of directlyOverlapping) {\n      maxColumn = Math.max(maxColumn, overlappingEvent.position.column);\n\n      // Check what overlaps with each overlapping event\n      for (const otherEvent of positioned) {\n        if (otherEvent === overlappingEvent || otherEvent.position.allDay) {\n          continue;\n        }\n\n        if (isEventsOverlap(otherEvent, overlappingEvent)) {\n          maxColumn = Math.max(maxColumn, otherEvent.position.column);\n        }\n      }\n    }\n\n    const totalColumns = maxColumn + 1;\n\n    // Find the first occupied column to the right of this event\n    // Events expand to fill empty columns but stop at the next occupied column\n    let nextOccupiedColumn = totalColumns;\n\n    for (const other of directlyOverlapping) {\n      if (other.position.column > column && other.position.column < nextOccupiedColumn) {\n        nextOccupiedColumn = other.position.column;\n      }\n    }\n\n    const columnsSpanned = nextOccupiedColumn - column;\n\n    positionedEvent.position.overlaps = totalColumns;\n    positionedEvent.position.width = (columnsSpanned / totalColumns) * 100;\n    positionedEvent.position.offset = (column * 100) / totalColumns;\n  }\n\n  return positioned;\n}\n"],"mappings":";;;;;;AAWA,SAAS,kBAAkB,EACzB,SACA,aACA,OACA,QACA,QACoC;CACpC,IAAI,CAAC,QAAQ,cACX,OAAO;CAGT,OAAO,QAAQ,YAAY,CAAC,MAAM,MAAM;EACtC,MAAM,UAAU,cAAc;GAAE,OAAO;GAAG;EAAK,CAAC;EAChD,MAAM,kBAAkB,gBAAgB,GAAG,KAAK;EAGhD,IAAI,UAAU,SACZ,OAAO;EAGT,OAAO;CACT,CAAC;AACH;AAmBA,SAAgB,uBAAuB,EACrC,QACA,WACA,SACA,iBACA,QAC8B;CAC9B,MAAM,UAAiC,CAAC;CACxC,MAAM,aAAuC,CAAC;CAE9C,MAAM,SAAS,WAAW,MAAM;CAEhC,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,SAAS,cAAc;GAAE;GAAO;EAAK,CAAC;EAE5C,IAAI,SAAS;EAEb,OAAO,kBAAkB;GAAE;GAAS,aAAa;GAAQ;GAAO;GAAQ;EAAK,CAAC,GAC5E;EAGF,IAAI,CAAC,QAAQ,SACX,QAAQ,UAAU,CAAC;EAGrB,QAAQ,OAAO,CAAC,KAAK,KAAK;EAE1B,MAAM,mBAAmB,SACrB;GAAE,KAAK;GAAG,QAAQ;EAAI,IACtB,eAAe;GAAE;GAAO;GAAW;GAAS;EAAgB,CAAC;EAEjE,WAAW,KAAK;GACd,GAAG;GACH,UAAU;IACR,GAAG;IACH;IACA;IAGA,OAAO;IACP,QAAQ;IACR,UAAU;GACZ;EACF,CAAC;CACH;CACA,KAAK,MAAM,mBAAmB,YAAY;EACxC,MAAM,EAAE,QAAQ,WAAW,gBAAgB;EAE3C,IAAI,QAAQ;GACV,gBAAgB,SAAS,WAAW;GACpC,gBAAgB,SAAS,QAAQ;GACjC,gBAAgB,SAAS,SAAS;GAClC;EACF;EAGA,MAAM,sBAAgD,CAAC;EAEvD,KAAK,MAAM,cAAc,YAAY;GACnC,IAAI,eAAe,mBAAmB,WAAW,SAAS,QACxD;GAGF,IAAI,gBAAgB,YAAY,eAAe,GAC7C,oBAAoB,KAAK,UAAU;EAEvC;EAIA,IAAI,YAAY;EAEhB,KAAK,MAAM,oBAAoB,qBAAqB;GAClD,YAAY,KAAK,IAAI,WAAW,iBAAiB,SAAS,MAAM;GAGhE,KAAK,MAAM,cAAc,YAAY;IACnC,IAAI,eAAe,oBAAoB,WAAW,SAAS,QACzD;IAGF,IAAI,gBAAgB,YAAY,gBAAgB,GAC9C,YAAY,KAAK,IAAI,WAAW,WAAW,SAAS,MAAM;GAE9D;EACF;EAEA,MAAM,eAAe,YAAY;EAIjC,IAAI,qBAAqB;EAEzB,KAAK,MAAM,SAAS,qBAClB,IAAI,MAAM,SAAS,SAAS,UAAU,MAAM,SAAS,SAAS,oBAC5D,qBAAqB,MAAM,SAAS;EAIxC,MAAM,iBAAiB,qBAAqB;EAE5C,gBAAgB,SAAS,WAAW;EACpC,gBAAgB,SAAS,QAAS,iBAAiB,eAAgB;EACnE,gBAAgB,SAAS,SAAU,SAAS,MAAO;CACrD;CAEA,OAAO;AACT"}
+{"version":3,"file":"get-day-positioned-events.mjs","names":[],"sources":["../../../../src/components/DayView/get-day-view-events/get-day-positioned-events.ts"],"sourcesContent":["import {\n  AnyDateValue,\n  DayPositionedEventData,\n  ScheduleEventData,\n  ScheduleEventOverlapMode,\n} from '../../../types';\nimport {\n  applyCascadeLayout,\n  getDayPosition,\n  isAllDayEvent,\n  isEventsOverlap,\n  sortEvents,\n} from '../../../utils';\n\ninterface ColumnHasConflictOptions {\n  columns: ScheduleEventData[][];\n  columnIndex: number;\n  event: ScheduleEventData;\n  allDay: boolean;\n  date: AnyDateValue;\n}\n\nfunction columnHasConflict({\n  columns,\n  columnIndex,\n  event,\n  allDay,\n  date,\n}: ColumnHasConflictOptions): boolean {\n  if (!columns[columnIndex]) {\n    return false;\n  }\n\n  return columns[columnIndex].some((e) => {\n    const eAllDay = isAllDayEvent({ event: e, date });\n    const hasTimeConflict = isEventsOverlap(e, event);\n\n    // Don't count all-day events as overlaps\n    if (allDay || eAllDay) {\n      return false;\n    }\n\n    return hasTimeConflict;\n  });\n}\n\ninterface GetDayPositionedEventsInput {\n  /** Date at which events are positioned, used to check if events are all-day */\n  date: AnyDateValue;\n\n  /** List of all events that belong to the given date, extra events must be filtered out before passing to the function */\n  events: ScheduleEventData[];\n\n  /** Start time of the day view, used to calculate event positions */\n  startTime?: string;\n\n  /** End time of the day view, used to calculate event positions */\n  endTime?: string;\n\n  /** Number of minutes per time slot, used to align the canvas to whole slots */\n  intervalMinutes?: number;\n\n  /** Determines how events that overlap in time are laid out @default 'columns' */\n  eventOverlapMode?: ScheduleEventOverlapMode;\n}\n\nexport function getDayPositionedEvents({\n  events,\n  startTime,\n  endTime,\n  intervalMinutes,\n  date,\n  eventOverlapMode = 'columns',\n}: GetDayPositionedEventsInput) {\n  const columns: ScheduleEventData[][] = [];\n  const positioned: DayPositionedEventData[] = [];\n\n  const sorted = sortEvents(events);\n\n  for (const event of sorted) {\n    const allDay = isAllDayEvent({ event, date });\n\n    let column = 0;\n\n    while (columnHasConflict({ columns, columnIndex: column, event, allDay, date })) {\n      column++;\n    }\n\n    if (!columns[column]) {\n      columns[column] = [];\n    }\n\n    columns[column].push(event);\n\n    const verticalPosition = allDay\n      ? { top: 0, height: 100 }\n      : getDayPosition({ event, startTime, endTime, intervalMinutes });\n\n    positioned.push({\n      ...event,\n      position: {\n        ...verticalPosition,\n        allDay,\n        column,\n\n        // set later\n        width: 0,\n        offset: 0,\n        overlaps: 0,\n      },\n    });\n  }\n  for (const positionedEvent of positioned) {\n    if (positionedEvent.position.allDay) {\n      positionedEvent.position.overlaps = 1;\n      positionedEvent.position.width = 100;\n      positionedEvent.position.offset = 0;\n    }\n  }\n\n  if (eventOverlapMode === 'cascade') {\n    applyCascadeLayout(positioned);\n    return positioned;\n  }\n\n  for (const positionedEvent of positioned) {\n    const { allDay, column } = positionedEvent.position;\n\n    if (allDay) {\n      continue;\n    }\n\n    // Find events that directly overlap with this event\n    const directlyOverlapping: DayPositionedEventData[] = [];\n\n    for (const otherEvent of positioned) {\n      if (otherEvent === positionedEvent || otherEvent.position.allDay) {\n        continue;\n      }\n\n      if (isEventsOverlap(otherEvent, positionedEvent)) {\n        directlyOverlapping.push(otherEvent);\n      }\n    }\n\n    // Find the max column by also checking overlaps of overlapping events\n    // This ensures we account for the full column group\n    let maxColumn = column;\n\n    for (const overlappingEvent of directlyOverlapping) {\n      maxColumn = Math.max(maxColumn, overlappingEvent.position.column);\n\n      // Check what overlaps with each overlapping event\n      for (const otherEvent of positioned) {\n        if (otherEvent === overlappingEvent || otherEvent.position.allDay) {\n          continue;\n        }\n\n        if (isEventsOverlap(otherEvent, overlappingEvent)) {\n          maxColumn = Math.max(maxColumn, otherEvent.position.column);\n        }\n      }\n    }\n\n    const totalColumns = maxColumn + 1;\n\n    // Find the first occupied column to the right of this event\n    // Events expand to fill empty columns but stop at the next occupied column\n    let nextOccupiedColumn = totalColumns;\n\n    for (const other of directlyOverlapping) {\n      if (other.position.column > column && other.position.column < nextOccupiedColumn) {\n        nextOccupiedColumn = other.position.column;\n      }\n    }\n\n    const columnsSpanned = nextOccupiedColumn - column;\n\n    positionedEvent.position.overlaps = totalColumns;\n    positionedEvent.position.width = (columnsSpanned / totalColumns) * 100;\n    positionedEvent.position.offset = (column * 100) / totalColumns;\n  }\n\n  return positioned;\n}\n"],"mappings":";;;;;;;AAsBA,SAAS,kBAAkB,EACzB,SACA,aACA,OACA,QACA,QACoC;CACpC,IAAI,CAAC,QAAQ,cACX,OAAO;CAGT,OAAO,QAAQ,YAAY,CAAC,MAAM,MAAM;EACtC,MAAM,UAAU,cAAc;GAAE,OAAO;GAAG;EAAK,CAAC;EAChD,MAAM,kBAAkB,gBAAgB,GAAG,KAAK;EAGhD,IAAI,UAAU,SACZ,OAAO;EAGT,OAAO;CACT,CAAC;AACH;AAsBA,SAAgB,uBAAuB,EACrC,QACA,WACA,SACA,iBACA,MACA,mBAAmB,aACW;CAC9B,MAAM,UAAiC,CAAC;CACxC,MAAM,aAAuC,CAAC;CAE9C,MAAM,SAAS,WAAW,MAAM;CAEhC,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,SAAS,cAAc;GAAE;GAAO;EAAK,CAAC;EAE5C,IAAI,SAAS;EAEb,OAAO,kBAAkB;GAAE;GAAS,aAAa;GAAQ;GAAO;GAAQ;EAAK,CAAC,GAC5E;EAGF,IAAI,CAAC,QAAQ,SACX,QAAQ,UAAU,CAAC;EAGrB,QAAQ,OAAO,CAAC,KAAK,KAAK;EAE1B,MAAM,mBAAmB,SACrB;GAAE,KAAK;GAAG,QAAQ;EAAI,IACtB,eAAe;GAAE;GAAO;GAAW;GAAS;EAAgB,CAAC;EAEjE,WAAW,KAAK;GACd,GAAG;GACH,UAAU;IACR,GAAG;IACH;IACA;IAGA,OAAO;IACP,QAAQ;IACR,UAAU;GACZ;EACF,CAAC;CACH;CACA,KAAK,MAAM,mBAAmB,YAC5B,IAAI,gBAAgB,SAAS,QAAQ;EACnC,gBAAgB,SAAS,WAAW;EACpC,gBAAgB,SAAS,QAAQ;EACjC,gBAAgB,SAAS,SAAS;CACpC;CAGF,IAAI,qBAAqB,WAAW;EAClC,mBAAmB,UAAU;EAC7B,OAAO;CACT;CAEA,KAAK,MAAM,mBAAmB,YAAY;EACxC,MAAM,EAAE,QAAQ,WAAW,gBAAgB;EAE3C,IAAI,QACF;EAIF,MAAM,sBAAgD,CAAC;EAEvD,KAAK,MAAM,cAAc,YAAY;GACnC,IAAI,eAAe,mBAAmB,WAAW,SAAS,QACxD;GAGF,IAAI,gBAAgB,YAAY,eAAe,GAC7C,oBAAoB,KAAK,UAAU;EAEvC;EAIA,IAAI,YAAY;EAEhB,KAAK,MAAM,oBAAoB,qBAAqB;GAClD,YAAY,KAAK,IAAI,WAAW,iBAAiB,SAAS,MAAM;GAGhE,KAAK,MAAM,cAAc,YAAY;IACnC,IAAI,eAAe,oBAAoB,WAAW,SAAS,QACzD;IAGF,IAAI,gBAAgB,YAAY,gBAAgB,GAC9C,YAAY,KAAK,IAAI,WAAW,WAAW,SAAS,MAAM;GAE9D;EACF;EAEA,MAAM,eAAe,YAAY;EAIjC,IAAI,qBAAqB;EAEzB,KAAK,MAAM,SAAS,qBAClB,IAAI,MAAM,SAAS,SAAS,UAAU,MAAM,SAAS,SAAS,oBAC5D,qBAAqB,MAAM,SAAS;EAIxC,MAAM,iBAAiB,qBAAqB;EAE5C,gBAAgB,SAAS,WAAW;EACpC,gBAAgB,SAAS,QAAS,iBAAiB,eAAgB;EACnE,gBAAgB,SAAS,SAAU,SAAS,MAAO;CACrD;CAEA,OAAO;AACT"}

package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs

@@ -6,7 +6,7 @@ import { getDayPosition } from "../../../utils/get-day-position/get-day-position
 import { getDayPositionedEvents } from "./get-day-positioned-events.mjs";
 import dayjs from "dayjs";
 //#region packages/@mantine/schedule/src/components/DayView/get-day-view-events/get-day-view-events.ts
-function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes }) {
+function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, eventOverlapMode }) {
 	if (events === void 0) return {
 		allDayEvents: [],
 		regularEvents: [],
@@ -41,7 +41,8 @@ function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes })
 		startTime,
 		endTime,
 		intervalMinutes,
-		date
+		date,
+		eventOverlapMode
 	});
 	const allDayEvents = [];
 	const regularEvents = [];

package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-day-view-events.mjs","names":[],"sources":["../../../../src/components/DayView/get-day-view-events/get-day-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';\nimport { getDayPosition, isAllDayEvent, isEventInTimeRange, validateEvent } from '../../../utils';\nimport { getDayPositionedEvents } from './get-day-positioned-events';\n\ninterface GetDayViewEventsInput {\n  events: ScheduleEventData[] | undefined;\n  date: AnyDateValue;\n  startTime?: string;\n  endTime?: string;\n  intervalMinutes?: number;\n}\n\nexport function getDayViewEvents({\n  events,\n  date,\n  startTime,\n  endTime,\n  intervalMinutes,\n}: GetDayViewEventsInput) {\n  if (events === undefined) {\n    return {\n      allDayEvents: [],\n      regularEvents: [],\n      backgroundTimedEvents: [],\n      backgroundAllDayEvents: [],\n    };\n  }\n\n  const ids = new Set<string | number>();\n  const filteredEvents: ScheduleEventData[] = [];\n  const backgroundFiltered: ScheduleEventData[] = [];\n  const dayStart = dayjs(date).startOf('day');\n  const dayEnd = dayjs(date).endOf('day');\n\n  for (const event of events) {\n    const eventStart = dayjs(event.start);\n    const eventEnd = dayjs(event.end);\n    const isOnDay = eventStart.isSame(dayStart, 'day');\n    const spansIntoDay =\n      !isOnDay &&\n      event.display === 'background' &&\n      eventStart.isBefore(dayEnd) &&\n      eventEnd.isAfter(dayStart);\n\n    if (isOnDay || spansIntoDay) {\n      if (isOnDay && !isEventInTimeRange({ event, startTime, endTime })) {\n        continue;\n      }\n\n      const validated = validateEvent(event);\n\n      if (!ids.has(event.id)) {\n        ids.add(event.id);\n      } else {\n        throw new Error(`[@mantine/schedule] DayView: Duplicated event ids found: ${event.id}`);\n      }\n\n      if (event.display === 'background') {\n        backgroundFiltered.push(validated);\n      } else {\n        filteredEvents.push(validated);\n      }\n    }\n  }\n\n  const positionedEvents = getDayPositionedEvents({\n    events: filteredEvents,\n    startTime,\n    endTime,\n    intervalMinutes,\n    date,\n  });\n\n  const allDayEvents: DayPositionedEventData[] = [];\n  const regularEvents: DayPositionedEventData[] = [];\n\n  for (const event of positionedEvents) {\n    if (event.position.allDay) {\n      allDayEvents.push(event);\n    } else {\n      regularEvents.push(event);\n    }\n  }\n\n  const backgroundTimedEvents: DayPositionedEventData[] = [];\n  const backgroundAllDayEvents: DayPositionedEventData[] = [];\n  for (const event of backgroundFiltered) {\n    const eventStart = dayjs(event.start);\n    const eventEnd = dayjs(event.end);\n    const clippedStart = eventStart.isBefore(dayStart) ? dayStart : eventStart;\n    const clippedEnd = eventEnd.isAfter(dayEnd) ? dayEnd : eventEnd;\n\n    const clippedEvent = {\n      ...event,\n      start: clippedStart.format('YYYY-MM-DD HH:mm:ss'),\n      end: clippedEnd.format('YYYY-MM-DD HH:mm:ss'),\n    };\n\n    const allDay = isAllDayEvent({ event: clippedEvent, date });\n\n    if (allDay) {\n      backgroundAllDayEvents.push({\n        ...event,\n        position: {\n          top: 0,\n          height: 100,\n          allDay: true,\n          width: 100,\n          offset: 0,\n          column: 0,\n          overlaps: 1,\n        },\n      });\n    } else {\n      const { top, height } = getDayPosition({\n        event: clippedEvent,\n        startTime,\n        endTime,\n        intervalMinutes,\n      });\n      if (height <= 0) {\n        continue;\n      }\n      backgroundTimedEvents.push({\n        ...event,\n        position: { top, height, allDay: false, width: 100, offset: 0, column: 0, overlaps: 1 },\n      });\n    }\n  }\n\n  return { allDayEvents, regularEvents, backgroundTimedEvents, backgroundAllDayEvents };\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,iBAAiB,EAC/B,QACA,MACA,WACA,SACA,mBACwB;CACxB,IAAI,WAAW,KAAA,GACb,OAAO;EACL,cAAc,CAAC;EACf,eAAe,CAAC;EAChB,uBAAuB,CAAC;EACxB,wBAAwB,CAAC;CAC3B;CAGF,MAAM,sBAAM,IAAI,IAAqB;CACrC,MAAM,iBAAsC,CAAC;CAC7C,MAAM,qBAA0C,CAAC;CACjD,MAAM,WAAW,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK;CAC1C,MAAM,SAAS,MAAM,IAAI,CAAC,CAAC,MAAM,KAAK;CAEtC,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,aAAa,MAAM,MAAM,KAAK;EACpC,MAAM,WAAW,MAAM,MAAM,GAAG;EAChC,MAAM,UAAU,WAAW,OAAO,UAAU,KAAK;EACjD,MAAM,eACJ,CAAC,WACD,MAAM,YAAY,gBAClB,WAAW,SAAS,MAAM,KAC1B,SAAS,QAAQ,QAAQ;EAE3B,IAAI,WAAW,cAAc;GAC3B,IAAI,WAAW,CAAC,mBAAmB;IAAE;IAAO;IAAW;GAAQ,CAAC,GAC9D;GAGF,MAAM,YAAY,cAAc,KAAK;GAErC,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,GACnB,IAAI,IAAI,MAAM,EAAE;QAEhB,MAAM,IAAI,MAAM,4DAA4D,MAAM,IAAI;GAGxF,IAAI,MAAM,YAAY,cACpB,mBAAmB,KAAK,SAAS;QAEjC,eAAe,KAAK,SAAS;EAEjC;CACF;CAEA,MAAM,mBAAmB,uBAAuB;EAC9C,QAAQ;EACR;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAyC,CAAC;CAChD,MAAM,gBAA0C,CAAC;CAEjD,KAAK,MAAM,SAAS,kBAClB,IAAI,MAAM,SAAS,QACjB,aAAa,KAAK,KAAK;MAEvB,cAAc,KAAK,KAAK;CAI5B,MAAM,wBAAkD,CAAC;CACzD,MAAM,yBAAmD,CAAC;CAC1D,KAAK,MAAM,SAAS,oBAAoB;EACtC,MAAM,aAAa,MAAM,MAAM,KAAK;EACpC,MAAM,WAAW,MAAM,MAAM,GAAG;EAChC,MAAM,eAAe,WAAW,SAAS,QAAQ,IAAI,WAAW;EAChE,MAAM,aAAa,SAAS,QAAQ,MAAM,IAAI,SAAS;EAEvD,MAAM,eAAe;GACnB,GAAG;GACH,OAAO,aAAa,OAAO,qBAAqB;GAChD,KAAK,WAAW,OAAO,qBAAqB;EAC9C;EAIA,IAFe,cAAc;GAAE,OAAO;GAAc;EAAK,CAEhD,GACP,uBAAuB,KAAK;GAC1B,GAAG;GACH,UAAU;IACR,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,UAAU;GACZ;EACF,CAAC;OACI;GACL,MAAM,EAAE,KAAK,WAAW,eAAe;IACrC,OAAO;IACP;IACA;IACA;GACF,CAAC;GACD,IAAI,UAAU,GACZ;GAEF,sBAAsB,KAAK;IACzB,GAAG;IACH,UAAU;KAAE;KAAK;KAAQ,QAAQ;KAAO,OAAO;KAAK,QAAQ;KAAG,QAAQ;KAAG,UAAU;IAAE;GACxF,CAAC;EACH;CACF;CAEA,OAAO;EAAE;EAAc;EAAe;EAAuB;CAAuB;AACtF"}
+{"version":3,"file":"get-day-view-events.mjs","names":[],"sources":["../../../../src/components/DayView/get-day-view-events/get-day-view-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport {\n  AnyDateValue,\n  DayPositionedEventData,\n  ScheduleEventData,\n  ScheduleEventOverlapMode,\n} from '../../../types';\nimport { getDayPosition, isAllDayEvent, isEventInTimeRange, validateEvent } from '../../../utils';\nimport { getDayPositionedEvents } from './get-day-positioned-events';\n\ninterface GetDayViewEventsInput {\n  events: ScheduleEventData[] | undefined;\n  date: AnyDateValue;\n  startTime?: string;\n  endTime?: string;\n  intervalMinutes?: number;\n  eventOverlapMode?: ScheduleEventOverlapMode;\n}\n\nexport function getDayViewEvents({\n  events,\n  date,\n  startTime,\n  endTime,\n  intervalMinutes,\n  eventOverlapMode,\n}: GetDayViewEventsInput) {\n  if (events === undefined) {\n    return {\n      allDayEvents: [],\n      regularEvents: [],\n      backgroundTimedEvents: [],\n      backgroundAllDayEvents: [],\n    };\n  }\n\n  const ids = new Set<string | number>();\n  const filteredEvents: ScheduleEventData[] = [];\n  const backgroundFiltered: ScheduleEventData[] = [];\n  const dayStart = dayjs(date).startOf('day');\n  const dayEnd = dayjs(date).endOf('day');\n\n  for (const event of events) {\n    const eventStart = dayjs(event.start);\n    const eventEnd = dayjs(event.end);\n    const isOnDay = eventStart.isSame(dayStart, 'day');\n    const spansIntoDay =\n      !isOnDay &&\n      event.display === 'background' &&\n      eventStart.isBefore(dayEnd) &&\n      eventEnd.isAfter(dayStart);\n\n    if (isOnDay || spansIntoDay) {\n      if (isOnDay && !isEventInTimeRange({ event, startTime, endTime })) {\n        continue;\n      }\n\n      const validated = validateEvent(event);\n\n      if (!ids.has(event.id)) {\n        ids.add(event.id);\n      } else {\n        throw new Error(`[@mantine/schedule] DayView: Duplicated event ids found: ${event.id}`);\n      }\n\n      if (event.display === 'background') {\n        backgroundFiltered.push(validated);\n      } else {\n        filteredEvents.push(validated);\n      }\n    }\n  }\n\n  const positionedEvents = getDayPositionedEvents({\n    events: filteredEvents,\n    startTime,\n    endTime,\n    intervalMinutes,\n    date,\n    eventOverlapMode,\n  });\n\n  const allDayEvents: DayPositionedEventData[] = [];\n  const regularEvents: DayPositionedEventData[] = [];\n\n  for (const event of positionedEvents) {\n    if (event.position.allDay) {\n      allDayEvents.push(event);\n    } else {\n      regularEvents.push(event);\n    }\n  }\n\n  const backgroundTimedEvents: DayPositionedEventData[] = [];\n  const backgroundAllDayEvents: DayPositionedEventData[] = [];\n  for (const event of backgroundFiltered) {\n    const eventStart = dayjs(event.start);\n    const eventEnd = dayjs(event.end);\n    const clippedStart = eventStart.isBefore(dayStart) ? dayStart : eventStart;\n    const clippedEnd = eventEnd.isAfter(dayEnd) ? dayEnd : eventEnd;\n\n    const clippedEvent = {\n      ...event,\n      start: clippedStart.format('YYYY-MM-DD HH:mm:ss'),\n      end: clippedEnd.format('YYYY-MM-DD HH:mm:ss'),\n    };\n\n    const allDay = isAllDayEvent({ event: clippedEvent, date });\n\n    if (allDay) {\n      backgroundAllDayEvents.push({\n        ...event,\n        position: {\n          top: 0,\n          height: 100,\n          allDay: true,\n          width: 100,\n          offset: 0,\n          column: 0,\n          overlaps: 1,\n        },\n      });\n    } else {\n      const { top, height } = getDayPosition({\n        event: clippedEvent,\n        startTime,\n        endTime,\n        intervalMinutes,\n      });\n      if (height <= 0) {\n        continue;\n      }\n      backgroundTimedEvents.push({\n        ...event,\n        position: { top, height, allDay: false, width: 100, offset: 0, column: 0, overlaps: 1 },\n      });\n    }\n  }\n\n  return { allDayEvents, regularEvents, backgroundTimedEvents, backgroundAllDayEvents };\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,iBAAiB,EAC/B,QACA,MACA,WACA,SACA,iBACA,oBACwB;CACxB,IAAI,WAAW,KAAA,GACb,OAAO;EACL,cAAc,CAAC;EACf,eAAe,CAAC;EAChB,uBAAuB,CAAC;EACxB,wBAAwB,CAAC;CAC3B;CAGF,MAAM,sBAAM,IAAI,IAAqB;CACrC,MAAM,iBAAsC,CAAC;CAC7C,MAAM,qBAA0C,CAAC;CACjD,MAAM,WAAW,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK;CAC1C,MAAM,SAAS,MAAM,IAAI,CAAC,CAAC,MAAM,KAAK;CAEtC,KAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,aAAa,MAAM,MAAM,KAAK;EACpC,MAAM,WAAW,MAAM,MAAM,GAAG;EAChC,MAAM,UAAU,WAAW,OAAO,UAAU,KAAK;EACjD,MAAM,eACJ,CAAC,WACD,MAAM,YAAY,gBAClB,WAAW,SAAS,MAAM,KAC1B,SAAS,QAAQ,QAAQ;EAE3B,IAAI,WAAW,cAAc;GAC3B,IAAI,WAAW,CAAC,mBAAmB;IAAE;IAAO;IAAW;GAAQ,CAAC,GAC9D;GAGF,MAAM,YAAY,cAAc,KAAK;GAErC,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE,GACnB,IAAI,IAAI,MAAM,EAAE;QAEhB,MAAM,IAAI,MAAM,4DAA4D,MAAM,IAAI;GAGxF,IAAI,MAAM,YAAY,cACpB,mBAAmB,KAAK,SAAS;QAEjC,eAAe,KAAK,SAAS;EAEjC;CACF;CAEA,MAAM,mBAAmB,uBAAuB;EAC9C,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAyC,CAAC;CAChD,MAAM,gBAA0C,CAAC;CAEjD,KAAK,MAAM,SAAS,kBAClB,IAAI,MAAM,SAAS,QACjB,aAAa,KAAK,KAAK;MAEvB,cAAc,KAAK,KAAK;CAI5B,MAAM,wBAAkD,CAAC;CACzD,MAAM,yBAAmD,CAAC;CAC1D,KAAK,MAAM,SAAS,oBAAoB;EACtC,MAAM,aAAa,MAAM,MAAM,KAAK;EACpC,MAAM,WAAW,MAAM,MAAM,GAAG;EAChC,MAAM,eAAe,WAAW,SAAS,QAAQ,IAAI,WAAW;EAChE,MAAM,aAAa,SAAS,QAAQ,MAAM,IAAI,SAAS;EAEvD,MAAM,eAAe;GACnB,GAAG;GACH,OAAO,aAAa,OAAO,qBAAqB;GAChD,KAAK,WAAW,OAAO,qBAAqB;EAC9C;EAIA,IAFe,cAAc;GAAE,OAAO;GAAc;EAAK,CAEhD,GACP,uBAAuB,KAAK;GAC1B,GAAG;GACH,UAAU;IACR,KAAK;IACL,QAAQ;IACR,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,UAAU;GACZ;EACF,CAAC;OACI;GACL,MAAM,EAAE,KAAK,WAAW,eAAe;IACrC,OAAO;IACP;IACA;IACA;GACF,CAAC;GACD,IAAI,UAAU,GACZ;GAEF,sBAAsB,KAAK;IACzB,GAAG;IACH,UAAU;KAAE;KAAK;KAAQ,QAAQ;KAAO,OAAO;KAAK,QAAQ;KAAG,QAAQ;KAAG,UAAU;IAAE;GACxF,CAAC;EACH;CACF;CAEA,OAAO;EAAE;EAAc;EAAe;EAAuB;CAAuB;AACtF"}

package/esm/components/MobileMonthView/MobileMonthView.mjs

@@ -172,7 +172,7 @@ const MobileMonthView = factory((_props) => {
 				children: event.title
 			}), /* @__PURE__ */ jsx(Text, {
 				...getStyles("mobileMonthViewEventTime"),
-				children: isAllDay ? "All day" : `${startTime} – ${endTime}`
+				children: isAllDay ? getLabel("allDay", labels) : `${startTime} – ${endTime}`
 			})] })]
 		});
 		const rootProps = {

package/esm/components/MobileMonthView/MobileMonthView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMonthView.mjs","names":["classes"],"sources":["../../../src/components/MobileMonthView/MobileMonthView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React, { useRef } from 'react';\nimport {\n  AccordionChevron,\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineRadius,\n  StylesApiProps,\n  Text,\n  UnstyledButton,\n  useDirection,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateLabelFormat,\n  DateStringValue,\n  DayOfWeek,\n  ScheduleEventData,\n  ScheduleMode,\n} from '../../types';\nimport {\n  expandRecurringEvents,\n  formatDate,\n  getMonthDays,\n  getWeekdaysNames,\n  getWeekNumber,\n  isSameMonth,\n  sortEvents,\n  toDateString,\n} from '../../utils';\nimport {\n  handleMonthViewKeyDown,\n  MonthViewControlsRef,\n} from '../MonthView/handle-month-view-key-down';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getMobileMonthViewEvents } from './get-mobile-month-view-events';\nimport classes from './MobileMonthView.module.css';\n\nexport type MobileMonthViewStylesNames =\n  | 'mobileMonthView'\n  | 'mobileMonthViewHeader'\n  | 'mobileMonthViewHeaderBackButton'\n  | 'mobileMonthViewHeaderLabel'\n  | 'mobileMonthViewCalendar'\n  | 'mobileMonthViewWeekdays'\n  | 'mobileMonthViewWeekday'\n  | 'mobileMonthViewWeekdaysCorner'\n  | 'mobileMonthViewWeek'\n  | 'mobileMonthViewWeekNumber'\n  | 'mobileMonthViewDay'\n  | 'mobileMonthViewDayIndicators'\n  | 'mobileMonthViewDayIndicator'\n  | 'mobileMonthViewEventsList'\n  | 'mobileMonthViewEventsHeader'\n  | 'mobileMonthViewEvent'\n  | 'mobileMonthViewEventColor'\n  | 'mobileMonthViewEventBody'\n  | 'mobileMonthViewEventTitle'\n  | 'mobileMonthViewEventTime'\n  | 'mobileMonthViewNoEvents';\n\nexport type MobileMonthViewCssVariables = {\n  mobileMonthView: '--mobile-month-view-radius';\n};\n\nexport interface MobileMonthViewRenderHeaderInput {\n  /** Current interaction mode */\n  mode: ScheduleMode;\n  /** Current date displayed in the view */\n  date: Date | string;\n  /** Default header element */\n  defaultHeader: React.ReactNode;\n}\n\nexport interface MobileMonthViewProps\n  extends BoxProps, StylesApiProps<MobileMonthViewFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */\n  date: Date | string;\n\n  /** Called with the new date value when a date is selected */\n  onDateChange?: (value: DateStringValue) => void;\n\n  /** Currently selected date (controlled) */\n  selectedDate?: Date | string | null;\n\n  /** Default selected date (uncontrolled) */\n  defaultSelectedDate?: Date | string | null;\n\n  /** Called when selected date changes */\n  onSelectedDateChange?: (value: DateStringValue | null) => void;\n\n  /** If set, week numbers are displayed in the first column @default false */\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 1 – Monday */\n  firstDayOfWeek?: DayOfWeek;\n\n  /** `dayjs` format for weekdays names. By default, the first letter of the weekday. */\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  /** 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  /** If set, always renders 6 weeks in the month view @default true */\n  consistentWeeks?: boolean;\n\n  /** If set, highlights the current day @default true */\n  highlightToday?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, days from the previous and next months are displayed to fill the weeks @default false */\n  withOutsideDays?: boolean;\n\n  /** Events to display */\n  events?: ScheduleEventData[];\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n  renderEvent?: RenderEvent;\n\n  /** Format for the events list header date @default 'dddd, MMMM D' */\n  eventsHeaderFormat?: DateLabelFormat;\n\n  /** Called when the year back button in the header is clicked */\n  onYearClick?: () => void;\n\n  /** Called when event is clicked */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Custom header renderer, receives object with mode, date, and default header element */\n  renderHeader?: (input: MobileMonthViewRenderHeaderInput) => React.ReactNode;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n}\n\nexport type MobileMonthViewFactory = Factory<{\n  props: MobileMonthViewProps;\n  ref: HTMLDivElement;\n  stylesNames: MobileMonthViewStylesNames;\n  vars: MobileMonthViewCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'MobileMonthView',\n  withWeekDays: true,\n  consistentWeeks: true,\n  highlightToday: true,\n  mode: 'default',\n  eventsHeaderFormat: 'dddd, MMMM D',\n} satisfies Partial<MobileMonthViewProps>;\n\nconst varsResolver = createVarsResolver<MobileMonthViewFactory>((_theme, { radius }) => ({\n  mobileMonthView: {\n    '--mobile-month-view-radius': getRadius(radius),\n  },\n}));\n\nexport const MobileMonthView = factory<MobileMonthViewFactory>((_props) => {\n  const props = useProps('MobileMonthView', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    date,\n    onDateChange,\n    selectedDate,\n    defaultSelectedDate,\n    onSelectedDateChange,\n    withWeekNumbers,\n    withWeekDays,\n    locale,\n    firstDayOfWeek,\n    weekdayFormat,\n    weekendDays,\n    getWeekNumberProps,\n    getDayProps,\n    onDayClick,\n    onWeekNumberClick,\n    consistentWeeks,\n    highlightToday,\n    radius,\n    withOutsideDays,\n    events,\n    labels,\n    mode,\n    renderEvent,\n    eventsHeaderFormat,\n    onYearClick,\n    onEventClick,\n    renderHeader,\n    recurrenceExpansionLimit,\n    ...others\n  } = props;\n\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n  const today = dayjs();\n\n  const [_selectedDate, _setSelectedDate] = useUncontrolled<Date | string | null>({\n    value: selectedDate,\n    defaultValue: defaultSelectedDate ?? toDateString(today),\n    onChange: (value) => onSelectedDateChange?.(value ? toDateString(dayjs(value)) : null),\n  });\n\n  const getStyles = useStyles<MobileMonthViewFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'mobileMonthView',\n  });\n\n  const daysRef: MonthViewControlsRef = useRef<HTMLButtonElement[][]>([]);\n  const firstDayPosition = useRef<{ weekIndex: number; dayIndex: number } | null>(null);\n\n  const expandedEvents = expandRecurringEvents({\n    events,\n    rangeStart: dayjs(date).startOf('month').toDate(),\n    rangeEnd: dayjs(date).endOf('month').toDate(),\n    expansionLimit: recurrenceExpansionLimit,\n  });\n\n  const groupedEvents = getMobileMonthViewEvents({ date, events: expandedEvents });\n\n  const weekdays = withWeekDays\n    ? getWeekdaysNames({\n        locale: ctx.getLocale(locale),\n        format: weekdayFormat,\n        firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n      }).map((day, index) => (\n        <div {...getStyles('mobileMonthViewWeekday')} key={index}>\n          {day}\n        </div>\n      ))\n    : null;\n\n  const weeks = getMonthDays({\n    month: dayjs(date).format('YYYY-MM-DD'),\n    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n    consistentWeeks,\n  }).map((week, weekIndex) => {\n    const days = week.map((dayDate, dayIndex) => {\n      const outside = !isSameMonth(dayDate, date);\n      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(dayDate).day());\n      const ariaLabel = dayjs(dayDate)\n        .locale(locale || ctx.locale)\n        .format('MMMM D, YYYY');\n\n      const dayProps = getDayProps?.(dayjs(dayDate).format('YYYY-MM-DD')) || {};\n      const isToday = dayjs(dayDate).isSame(today, 'day') && highlightToday;\n      const isSelected = _selectedDate && dayjs(dayDate).isSame(dayjs(_selectedDate), 'day');\n      const dayEvents = groupedEvents[dayjs(dayDate).format('YYYY-MM-DD')] || [];\n\n      const shouldRender = withOutsideDays || !outside;\n\n      if (shouldRender && firstDayPosition.current === null) {\n        firstDayPosition.current = { weekIndex, dayIndex };\n      }\n\n      const isFirstDay =\n        firstDayPosition.current?.weekIndex === weekIndex &&\n        firstDayPosition.current?.dayIndex === dayIndex;\n\n      const indicators = dayEvents.slice(0, 3).map((event) => (\n        <div\n          {...getStyles('mobileMonthViewDayIndicator', {\n            style: { backgroundColor: getThemeColor(event.color, theme) },\n          })}\n          key={event.id}\n        />\n      ));\n\n      const handleDayClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        const dateStr = dayjs(dayDate).format('YYYY-MM-DD');\n        _setSelectedDate(dateStr);\n        onDayClick?.(dateStr, event);\n        dayProps.onClick?.(event);\n      };\n\n      const handleDayKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        handleMonthViewKeyDown({\n          controlsRef: daysRef,\n          weekIndex,\n          dayIndex,\n          event,\n        });\n      };\n\n      return (\n        <UnstyledButton\n          aria-label={ariaLabel}\n          aria-selected={isSelected || undefined}\n          {...dayProps}\n          {...getStyles('mobileMonthViewDay', {\n            className: dayProps.className,\n            style: dayProps.style,\n          })}\n          key={dayDate}\n          ref={(node) => {\n            if (node) {\n              if (!daysRef.current[weekIndex]) {\n                daysRef.current[weekIndex] = [];\n              }\n              daysRef.current[weekIndex][dayIndex] = node;\n            }\n          }}\n          mod={[\n            {\n              outside,\n              weekend,\n              today: isToday,\n              selected: isSelected,\n              static: mode === 'static',\n              hidden: !shouldRender,\n            },\n            dayProps.mod,\n          ]}\n          tabIndex={mode === 'static' || !shouldRender ? -1 : isFirstDay ? 0 : -1}\n          onClick={mode === 'static' || !shouldRender ? undefined : handleDayClick}\n          onKeyDown={mode === 'static' || !shouldRender ? undefined : handleDayKeyDown}\n        >\n          {shouldRender ? dayjs(dayDate).format('D') : null}\n          {shouldRender && <div {...getStyles('mobileMonthViewDayIndicators')}>{indicators}</div>}\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('mobileMonthViewWeek')} key={weekIndex}>\n        {withWeekNumbers && (\n          <UnstyledButton\n            key={weekNumber}\n            aria-label={`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('mobileMonthViewWeekNumber', {\n              className: weekNumberProps.className,\n              style: weekNumberProps.style,\n            })}\n          >\n            {weekNumber}\n          </UnstyledButton>\n        )}\n        {days}\n      </div>\n    );\n  });\n\n  const selectedDateEvents = _selectedDate\n    ? sortEvents(groupedEvents[dayjs(_selectedDate).format('YYYY-MM-DD')] || [])\n    : [];\n\n  const eventsList = selectedDateEvents.map((event) => {\n    const startTime = dayjs(event.start).format('HH:mm');\n    const endTime = dayjs(event.end).format('HH:mm');\n    const isAllDay = startTime === '00:00' && endTime === '00:00';\n\n    const eventChildren = (\n      <Box {...getStyles('mobileMonthViewEventBody')}>\n        <div\n          {...getStyles('mobileMonthViewEventColor', {\n            style: { backgroundColor: getThemeColor(event.color, theme) },\n          })}\n        />\n        <div>\n          <Text {...getStyles('mobileMonthViewEventTitle')}>{event.title}</Text>\n          <Text {...getStyles('mobileMonthViewEventTime')}>\n            {isAllDay ? 'All day' : `${startTime} – ${endTime}`}\n          </Text>\n        </div>\n      </Box>\n    );\n\n    const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n      ...getStyles('mobileMonthViewEvent'),\n      onClick:\n        mode === 'static'\n          ? undefined\n          : (e: React.MouseEvent<HTMLButtonElement>) => {\n              onEventClick?.(event, e);\n            },\n      tabIndex: mode === 'static' ? -1 : 0,\n      children: eventChildren,\n    };\n\n    if (typeof renderEvent === 'function') {\n      return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n    }\n\n    return <UnstyledButton {...rootProps} key={event.id} />;\n  });\n\n  const eventsHeader = _selectedDate\n    ? formatDate({\n        locale: ctx.getLocale(locale),\n        date: _selectedDate,\n        format: eventsHeaderFormat,\n      })\n    : '';\n\n  const { dir } = useDirection();\n\n  const headerLabel = formatDate({ locale: ctx.getLocale(locale), date, format: 'MMMM YYYY' });\n\n  const defaultHeader = (\n    <>\n      <UnstyledButton\n        {...getStyles('mobileMonthViewHeaderBackButton')}\n        onClick={onYearClick}\n        mod={{ static: mode === 'static' }}\n        tabIndex={mode === 'static' ? -1 : 0}\n      >\n        <AccordionChevron\n          style={{ transform: `rotate(${dir === 'rtl' ? -90 : 90}deg)` }}\n          size={20}\n        />\n        {dayjs(date).format('YYYY')}\n      </UnstyledButton>\n      <Text {...getStyles('mobileMonthViewHeaderLabel')}>{headerLabel}</Text>\n    </>\n  );\n\n  return (\n    <Box\n      {...getStyles('mobileMonthView')}\n      mod={{ 'with-week-numbers': withWeekNumbers }}\n      {...others}\n    >\n      <div {...getStyles('mobileMonthViewHeader')}>\n        {typeof renderHeader === 'function'\n          ? renderHeader({ mode: mode!, date, defaultHeader })\n          : defaultHeader}\n      </div>\n\n      <Box {...getStyles('mobileMonthViewCalendar')} mod={{ 'with-weekdays': withWeekDays }}>\n        {weekdays && (\n          <div {...getStyles('mobileMonthViewWeekdays')}>\n            {withWeekNumbers && <div {...getStyles('mobileMonthViewWeekdaysCorner')} />}\n            {weekdays}\n          </div>\n        )}\n        {weeks}\n      </Box>\n\n      <Box {...getStyles('mobileMonthViewEventsList')}>\n        <Text {...getStyles('mobileMonthViewEventsHeader')}>{eventsHeader}</Text>\n\n        {eventsList.length > 0 ? (\n          eventsList\n        ) : (\n          <Text {...getStyles('mobileMonthViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nMobileMonthView.displayName = '@mantine/schedule/MobileMonthView';\nMobileMonthView.classes = classes;\nMobileMonthView.varsResolver = varsResolver;\n\nexport namespace MobileMonthView {\n  export type Props = MobileMonthViewProps;\n  export type Factory = MobileMonthViewFactory;\n  export type StylesNames = MobileMonthViewStylesNames;\n  export type CssVariables = MobileMonthViewCssVariables;\n}\n"],"mappings":"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"}
+{"version":3,"file":"MobileMonthView.mjs","names":["classes"],"sources":["../../../src/components/MobileMonthView/MobileMonthView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React, { useRef } from 'react';\nimport {\n  AccordionChevron,\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineRadius,\n  StylesApiProps,\n  Text,\n  UnstyledButton,\n  useDirection,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateLabelFormat,\n  DateStringValue,\n  DayOfWeek,\n  ScheduleEventData,\n  ScheduleMode,\n} from '../../types';\nimport {\n  expandRecurringEvents,\n  formatDate,\n  getMonthDays,\n  getWeekdaysNames,\n  getWeekNumber,\n  isSameMonth,\n  sortEvents,\n  toDateString,\n} from '../../utils';\nimport {\n  handleMonthViewKeyDown,\n  MonthViewControlsRef,\n} from '../MonthView/handle-month-view-key-down';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getMobileMonthViewEvents } from './get-mobile-month-view-events';\nimport classes from './MobileMonthView.module.css';\n\nexport type MobileMonthViewStylesNames =\n  | 'mobileMonthView'\n  | 'mobileMonthViewHeader'\n  | 'mobileMonthViewHeaderBackButton'\n  | 'mobileMonthViewHeaderLabel'\n  | 'mobileMonthViewCalendar'\n  | 'mobileMonthViewWeekdays'\n  | 'mobileMonthViewWeekday'\n  | 'mobileMonthViewWeekdaysCorner'\n  | 'mobileMonthViewWeek'\n  | 'mobileMonthViewWeekNumber'\n  | 'mobileMonthViewDay'\n  | 'mobileMonthViewDayIndicators'\n  | 'mobileMonthViewDayIndicator'\n  | 'mobileMonthViewEventsList'\n  | 'mobileMonthViewEventsHeader'\n  | 'mobileMonthViewEvent'\n  | 'mobileMonthViewEventColor'\n  | 'mobileMonthViewEventBody'\n  | 'mobileMonthViewEventTitle'\n  | 'mobileMonthViewEventTime'\n  | 'mobileMonthViewNoEvents';\n\nexport type MobileMonthViewCssVariables = {\n  mobileMonthView: '--mobile-month-view-radius';\n};\n\nexport interface MobileMonthViewRenderHeaderInput {\n  /** Current interaction mode */\n  mode: ScheduleMode;\n  /** Current date displayed in the view */\n  date: Date | string;\n  /** Default header element */\n  defaultHeader: React.ReactNode;\n}\n\nexport interface MobileMonthViewProps\n  extends BoxProps, StylesApiProps<MobileMonthViewFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */\n  date: Date | string;\n\n  /** Called with the new date value when a date is selected */\n  onDateChange?: (value: DateStringValue) => void;\n\n  /** Currently selected date (controlled) */\n  selectedDate?: Date | string | null;\n\n  /** Default selected date (uncontrolled) */\n  defaultSelectedDate?: Date | string | null;\n\n  /** Called when selected date changes */\n  onSelectedDateChange?: (value: DateStringValue | null) => void;\n\n  /** If set, week numbers are displayed in the first column @default false */\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 1 – Monday */\n  firstDayOfWeek?: DayOfWeek;\n\n  /** `dayjs` format for weekdays names. By default, the first letter of the weekday. */\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  /** 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  /** If set, always renders 6 weeks in the month view @default true */\n  consistentWeeks?: boolean;\n\n  /** If set, highlights the current day @default true */\n  highlightToday?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set, days from the previous and next months are displayed to fill the weeks @default false */\n  withOutsideDays?: boolean;\n\n  /** Events to display */\n  events?: ScheduleEventData[];\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n  renderEvent?: RenderEvent;\n\n  /** Format for the events list header date @default 'dddd, MMMM D' */\n  eventsHeaderFormat?: DateLabelFormat;\n\n  /** Called when the year back button in the header is clicked */\n  onYearClick?: () => void;\n\n  /** Called when event is clicked */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Custom header renderer, receives object with mode, date, and default header element */\n  renderHeader?: (input: MobileMonthViewRenderHeaderInput) => React.ReactNode;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n}\n\nexport type MobileMonthViewFactory = Factory<{\n  props: MobileMonthViewProps;\n  ref: HTMLDivElement;\n  stylesNames: MobileMonthViewStylesNames;\n  vars: MobileMonthViewCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'MobileMonthView',\n  withWeekDays: true,\n  consistentWeeks: true,\n  highlightToday: true,\n  mode: 'default',\n  eventsHeaderFormat: 'dddd, MMMM D',\n} satisfies Partial<MobileMonthViewProps>;\n\nconst varsResolver = createVarsResolver<MobileMonthViewFactory>((_theme, { radius }) => ({\n  mobileMonthView: {\n    '--mobile-month-view-radius': getRadius(radius),\n  },\n}));\n\nexport const MobileMonthView = factory<MobileMonthViewFactory>((_props) => {\n  const props = useProps('MobileMonthView', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    date,\n    onDateChange,\n    selectedDate,\n    defaultSelectedDate,\n    onSelectedDateChange,\n    withWeekNumbers,\n    withWeekDays,\n    locale,\n    firstDayOfWeek,\n    weekdayFormat,\n    weekendDays,\n    getWeekNumberProps,\n    getDayProps,\n    onDayClick,\n    onWeekNumberClick,\n    consistentWeeks,\n    highlightToday,\n    radius,\n    withOutsideDays,\n    events,\n    labels,\n    mode,\n    renderEvent,\n    eventsHeaderFormat,\n    onYearClick,\n    onEventClick,\n    renderHeader,\n    recurrenceExpansionLimit,\n    ...others\n  } = props;\n\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n  const today = dayjs();\n\n  const [_selectedDate, _setSelectedDate] = useUncontrolled<Date | string | null>({\n    value: selectedDate,\n    defaultValue: defaultSelectedDate ?? toDateString(today),\n    onChange: (value) => onSelectedDateChange?.(value ? toDateString(dayjs(value)) : null),\n  });\n\n  const getStyles = useStyles<MobileMonthViewFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'mobileMonthView',\n  });\n\n  const daysRef: MonthViewControlsRef = useRef<HTMLButtonElement[][]>([]);\n  const firstDayPosition = useRef<{ weekIndex: number; dayIndex: number } | null>(null);\n\n  const expandedEvents = expandRecurringEvents({\n    events,\n    rangeStart: dayjs(date).startOf('month').toDate(),\n    rangeEnd: dayjs(date).endOf('month').toDate(),\n    expansionLimit: recurrenceExpansionLimit,\n  });\n\n  const groupedEvents = getMobileMonthViewEvents({ date, events: expandedEvents });\n\n  const weekdays = withWeekDays\n    ? getWeekdaysNames({\n        locale: ctx.getLocale(locale),\n        format: weekdayFormat,\n        firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n      }).map((day, index) => (\n        <div {...getStyles('mobileMonthViewWeekday')} key={index}>\n          {day}\n        </div>\n      ))\n    : null;\n\n  const weeks = getMonthDays({\n    month: dayjs(date).format('YYYY-MM-DD'),\n    firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),\n    consistentWeeks,\n  }).map((week, weekIndex) => {\n    const days = week.map((dayDate, dayIndex) => {\n      const outside = !isSameMonth(dayDate, date);\n      const weekend = ctx.getWeekendDays(weekendDays).includes(dayjs(dayDate).day());\n      const ariaLabel = dayjs(dayDate)\n        .locale(locale || ctx.locale)\n        .format('MMMM D, YYYY');\n\n      const dayProps = getDayProps?.(dayjs(dayDate).format('YYYY-MM-DD')) || {};\n      const isToday = dayjs(dayDate).isSame(today, 'day') && highlightToday;\n      const isSelected = _selectedDate && dayjs(dayDate).isSame(dayjs(_selectedDate), 'day');\n      const dayEvents = groupedEvents[dayjs(dayDate).format('YYYY-MM-DD')] || [];\n\n      const shouldRender = withOutsideDays || !outside;\n\n      if (shouldRender && firstDayPosition.current === null) {\n        firstDayPosition.current = { weekIndex, dayIndex };\n      }\n\n      const isFirstDay =\n        firstDayPosition.current?.weekIndex === weekIndex &&\n        firstDayPosition.current?.dayIndex === dayIndex;\n\n      const indicators = dayEvents.slice(0, 3).map((event) => (\n        <div\n          {...getStyles('mobileMonthViewDayIndicator', {\n            style: { backgroundColor: getThemeColor(event.color, theme) },\n          })}\n          key={event.id}\n        />\n      ));\n\n      const handleDayClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        const dateStr = dayjs(dayDate).format('YYYY-MM-DD');\n        _setSelectedDate(dateStr);\n        onDayClick?.(dateStr, event);\n        dayProps.onClick?.(event);\n      };\n\n      const handleDayKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        handleMonthViewKeyDown({\n          controlsRef: daysRef,\n          weekIndex,\n          dayIndex,\n          event,\n        });\n      };\n\n      return (\n        <UnstyledButton\n          aria-label={ariaLabel}\n          aria-selected={isSelected || undefined}\n          {...dayProps}\n          {...getStyles('mobileMonthViewDay', {\n            className: dayProps.className,\n            style: dayProps.style,\n          })}\n          key={dayDate}\n          ref={(node) => {\n            if (node) {\n              if (!daysRef.current[weekIndex]) {\n                daysRef.current[weekIndex] = [];\n              }\n              daysRef.current[weekIndex][dayIndex] = node;\n            }\n          }}\n          mod={[\n            {\n              outside,\n              weekend,\n              today: isToday,\n              selected: isSelected,\n              static: mode === 'static',\n              hidden: !shouldRender,\n            },\n            dayProps.mod,\n          ]}\n          tabIndex={mode === 'static' || !shouldRender ? -1 : isFirstDay ? 0 : -1}\n          onClick={mode === 'static' || !shouldRender ? undefined : handleDayClick}\n          onKeyDown={mode === 'static' || !shouldRender ? undefined : handleDayKeyDown}\n        >\n          {shouldRender ? dayjs(dayDate).format('D') : null}\n          {shouldRender && <div {...getStyles('mobileMonthViewDayIndicators')}>{indicators}</div>}\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('mobileMonthViewWeek')} key={weekIndex}>\n        {withWeekNumbers && (\n          <UnstyledButton\n            key={weekNumber}\n            aria-label={`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('mobileMonthViewWeekNumber', {\n              className: weekNumberProps.className,\n              style: weekNumberProps.style,\n            })}\n          >\n            {weekNumber}\n          </UnstyledButton>\n        )}\n        {days}\n      </div>\n    );\n  });\n\n  const selectedDateEvents = _selectedDate\n    ? sortEvents(groupedEvents[dayjs(_selectedDate).format('YYYY-MM-DD')] || [])\n    : [];\n\n  const eventsList = selectedDateEvents.map((event) => {\n    const startTime = dayjs(event.start).format('HH:mm');\n    const endTime = dayjs(event.end).format('HH:mm');\n    const isAllDay = startTime === '00:00' && endTime === '00:00';\n\n    const eventChildren = (\n      <Box {...getStyles('mobileMonthViewEventBody')}>\n        <div\n          {...getStyles('mobileMonthViewEventColor', {\n            style: { backgroundColor: getThemeColor(event.color, theme) },\n          })}\n        />\n        <div>\n          <Text {...getStyles('mobileMonthViewEventTitle')}>{event.title}</Text>\n          <Text {...getStyles('mobileMonthViewEventTime')}>\n            {isAllDay ? getLabel('allDay', labels) : `${startTime} – ${endTime}`}\n          </Text>\n        </div>\n      </Box>\n    );\n\n    const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n      ...getStyles('mobileMonthViewEvent'),\n      onClick:\n        mode === 'static'\n          ? undefined\n          : (e: React.MouseEvent<HTMLButtonElement>) => {\n              onEventClick?.(event, e);\n            },\n      tabIndex: mode === 'static' ? -1 : 0,\n      children: eventChildren,\n    };\n\n    if (typeof renderEvent === 'function') {\n      return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n    }\n\n    return <UnstyledButton {...rootProps} key={event.id} />;\n  });\n\n  const eventsHeader = _selectedDate\n    ? formatDate({\n        locale: ctx.getLocale(locale),\n        date: _selectedDate,\n        format: eventsHeaderFormat,\n      })\n    : '';\n\n  const { dir } = useDirection();\n\n  const headerLabel = formatDate({ locale: ctx.getLocale(locale), date, format: 'MMMM YYYY' });\n\n  const defaultHeader = (\n    <>\n      <UnstyledButton\n        {...getStyles('mobileMonthViewHeaderBackButton')}\n        onClick={onYearClick}\n        mod={{ static: mode === 'static' }}\n        tabIndex={mode === 'static' ? -1 : 0}\n      >\n        <AccordionChevron\n          style={{ transform: `rotate(${dir === 'rtl' ? -90 : 90}deg)` }}\n          size={20}\n        />\n        {dayjs(date).format('YYYY')}\n      </UnstyledButton>\n      <Text {...getStyles('mobileMonthViewHeaderLabel')}>{headerLabel}</Text>\n    </>\n  );\n\n  return (\n    <Box\n      {...getStyles('mobileMonthView')}\n      mod={{ 'with-week-numbers': withWeekNumbers }}\n      {...others}\n    >\n      <div {...getStyles('mobileMonthViewHeader')}>\n        {typeof renderHeader === 'function'\n          ? renderHeader({ mode: mode!, date, defaultHeader })\n          : defaultHeader}\n      </div>\n\n      <Box {...getStyles('mobileMonthViewCalendar')} mod={{ 'with-weekdays': withWeekDays }}>\n        {weekdays && (\n          <div {...getStyles('mobileMonthViewWeekdays')}>\n            {withWeekNumbers && <div {...getStyles('mobileMonthViewWeekdaysCorner')} />}\n            {weekdays}\n          </div>\n        )}\n        {weeks}\n      </Box>\n\n      <Box {...getStyles('mobileMonthViewEventsList')}>\n        <Text {...getStyles('mobileMonthViewEventsHeader')}>{eventsHeader}</Text>\n\n        {eventsList.length > 0 ? (\n          eventsList\n        ) : (\n          <Text {...getStyles('mobileMonthViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nMobileMonthView.displayName = '@mantine/schedule/MobileMonthView';\nMobileMonthView.classes = classes;\nMobileMonthView.varsResolver = varsResolver;\n\nexport namespace MobileMonthView {\n  export type Props = MobileMonthViewProps;\n  export type Factory = MobileMonthViewFactory;\n  export type StylesNames = MobileMonthViewStylesNames;\n  export type CssVariables = MobileMonthViewCssVariables;\n}\n"],"mappings":"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"}

package/esm/components/ResourcesDayView/ResourcesDayView.mjs

@@ -15,6 +15,7 @@ import { getOrderedResources } from "../../utils/get-ordered-resources/get-order
 import { handleResourcesGridKeyDown } from "../../utils/handle-resources-grid-key-down/handle-resources-grid-key-down.mjs";
 import { getGroupToResourceIdMap } from "../../utils/get-group-to-resource-id-map/get-group-to-resource-id-map.mjs";
 import { getIndexFromDragPoint } from "../../utils/get-index-from-drag-point/get-index-from-drag-point.mjs";
+import { getOverlapClusters } from "../../utils/get-overlap-clusters/get-overlap-clusters.mjs";
 import { useDragDropHandlers } from "../../hooks/use-drag-drop-handlers.mjs";
 import { useSlotDragSelect } from "../../hooks/use-slot-drag-select.mjs";
 import { DragContext } from "../DragContext/DragContext.mjs";
@@ -23,7 +24,6 @@ import { MoreEvents } from "../MoreEvents/MoreEvents.mjs";
 import { ScheduleBackgroundEvent } from "../ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
 import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
 import { useHorizontalEventResize } from "../../hooks/use-horizontal-event-resize.mjs";
-import { getOverlapClusters } from "./get-overlap-clusters/get-overlap-clusters.mjs";
 import { getResourcesDayViewEvents } from "./get-resources-day-view-events/get-resources-day-view-events.mjs";
 import { ResourcesDayViewRow } from "./ResourcesDayViewColumn.mjs";
 import ResourcesDayView_module_default from "./ResourcesDayView.module.mjs";
@@ -207,7 +207,8 @@ const ResourcesDayView = factory((_props) => {
 		intervalMinutes,
 		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
-		canResizeEvent
+		canResizeEvent,
+		withBackgroundEvents: withInteractiveBackgroundEvents
 	});
 	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
 	const handleTimeSlotClick = (resourceId, slotTime, e) => {
@@ -342,19 +343,43 @@ const ResourcesDayView = factory((_props) => {
 	};
 	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const rows = orderedResources.map((resource, resourceIndex) => {
-		const backgroundEventNodes = [...resourceEvents.backgroundTimedEvents[resource.id] || [], ...resourceEvents.backgroundAllDayEvents[resource.id] || []].map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
-			event,
-			renderEvent,
-			renderEventBody,
-			interactive: interactiveBackgroundEvents,
-			onEventClick,
-			...getStyles("resourcesDayViewBackgroundEvent", { style: {
-				left: `${event.position.top}%`,
-				width: `${event.position.height}%`,
-				top: 0,
-				height: "100%"
-			} })
-		}, `bg-${event.id}`));
+		const renderBackgroundEvent = (event, allDay) => {
+			const isResizable = !allDay && eventResize.isResizableEvent(event);
+			const resizePosition = eventResize.getResizePosition(event.id);
+			return /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
+				event,
+				renderEvent,
+				renderEventBody,
+				interactive: interactiveBackgroundEvents,
+				onEventClick: onEventClick ? (clickedEvent, e) => {
+					if (!eventResize.wasResizing()) onEventClick(clickedEvent, e);
+				} : void 0,
+				withResize: isResizable,
+				isResizing: resizePosition !== null,
+				activeResizeEdge: eventResize.resizingEdge,
+				resizeAxis: "horizontal",
+				resizeHandleProps: getStyles("resourcesDayViewResizeHandle"),
+				onResizeStart: isResizable ? (edge, e) => {
+					const container = rowSlotsContainersRef.current[resourceIndex];
+					if (container) eventResize.handleResizeStart({
+						event,
+						edge,
+						container,
+						originalLeft: event.position.top,
+						originalWidth: event.position.height,
+						eventDate: dateStr,
+						pointerEvent: e
+					});
+				} : void 0,
+				...getStyles("resourcesDayViewBackgroundEvent", { style: {
+					left: `${resizePosition ? resizePosition.left : event.position.top}%`,
+					width: `${resizePosition ? resizePosition.width : event.position.height}%`,
+					top: 0,
+					height: "100%"
+				} })
+			}, `bg-${event.id}`);
+		};
+		const backgroundEventNodes = [...(resourceEvents.backgroundTimedEvents[resource.id] || []).map((event) => renderBackgroundEvent(event, false)), ...(resourceEvents.backgroundAllDayEvents[resource.id] || []).map((event) => renderBackgroundEvent(event, true))];
 		const allRegularEvents = (resourceEvents.regularEvents[resource.id] || []).filter((event) => !isAllDayEvent({
 			event,
 			date