@mantine-vue/schedule 3.2.0 → 3.3.0

package/cjs/index.cjs

@@ -364,12 +364,24 @@ function sortEvents(events) {
 }
 //#endregion
 //#region src/utils/is-events-overlap/is-events-overlap.ts
+var timestampsCache = /* @__PURE__ */ new WeakMap();
+function getTimestamps(event) {
+	const cached = timestampsCache.get(event);
+	if (cached && cached.start === event.start && cached.end === event.end) return cached;
+	const next = {
+		start: event.start,
+		end: event.end,
+		startTimestamp: (0, dayjs.default)(event.start).valueOf(),
+		endTimestamp: (0, dayjs.default)(event.end).valueOf()
+	};
+	timestampsCache.set(event, next);
+	return next;
+}
 /** Returns true if two events overlap in time */
 function isEventsOverlap(event1, event2) {
-	const start1 = (0, dayjs.default)(event1.start).valueOf();
-	const end1 = (0, dayjs.default)(event1.end).valueOf();
-	const start2 = (0, dayjs.default)(event2.start).valueOf();
-	return start1 < (0, dayjs.default)(event2.end).valueOf() && start2 < end1;
+	const first = getTimestamps(event1);
+	const second = getTimestamps(event2);
+	return first.startTimestamp < second.endTimestamp && second.startTimestamp < first.endTimestamp;
 }
 //#endregion
 //#region src/utils/get-visible-events/get-visible-events.ts
@@ -463,13 +475,33 @@ function getDayPosition({ event, startTime = "00:00:00", endTime = "23:59:59", i
 }
 //#endregion
 //#region src/utils/calculate-drop-time/calculate-drop-time.ts
-function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15 }) {
+function calculateDropTime({ draggedEvent, targetDate, targetSlotTime, mouseYOffset = 0, slotHeight = 64, intervalMinutes = 15, slotOffset, slotSize, dragIntervalMinutes, startTime, endTime }) {
 	const eventDuration = (0, dayjs.default)(draggedEvent.end).diff((0, dayjs.default)(draggedEvent.start), "millisecond");
 	const parsedTime = parseTimeString(targetSlotTime);
-	const baseTargetTime = (0, dayjs.default)(targetDate).startOf("day").hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
+	const targetDay = (0, dayjs.default)(targetDate).startOf("day");
+	const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
 	let finalTargetTime = baseTargetTime;
-	if (mouseYOffset > 0 && slotHeight > 0) {
-		const offsetRatio = mouseYOffset / slotHeight;
+	const offset = slotOffset ?? mouseYOffset;
+	const size = slotSize ?? slotHeight;
+	if (dragIntervalMinutes != null) {
+		const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);
+		const gridInterval = clampIntervalMinutes(intervalMinutes);
+		const rawStartMinutes = parsedTime.hours * 60 + parsedTime.minutes + (size > 0 ? offset / size : 0) * gridInterval;
+		let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;
+		const parsedEnd = endTime ? parseTimeString(endTime) : null;
+		const parsedStart = startTime ? parseTimeString(startTime) : null;
+		const maxStart = parsedEnd ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag : null;
+		const minStart = parsedStart ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag : null;
+		if (minStart !== null && maxStart !== null && minStart > maxStart) snappedStartMinutes = parsedStart.hours * 60 + parsedStart.minutes;
+		else {
+			if (maxStart !== null) snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);
+			if (minStart !== null) snappedStartMinutes = Math.max(snappedStartMinutes, minStart);
+		}
+		const dayOffset = Math.floor(snappedStartMinutes / 1440);
+		const minutesInDay = snappedStartMinutes - dayOffset * 1440;
+		finalTargetTime = targetDay.add(dayOffset, "day").hour(Math.floor(minutesInDay / 60)).minute(minutesInDay % 60).second(0);
+	} else if (offset > 0 && size > 0) {
+		const offsetRatio = offset / size;
 		const offsetMinutes = Math.round(offsetRatio * intervalMinutes);
 		finalTargetTime = baseTargetTime.add(offsetMinutes, "minute");
 	}
@@ -545,6 +577,18 @@ function getExdateSet(recurrence) {
 	const values = recurrence.exdate.map((value) => (0, dayjs.default)(value)).filter((value) => value.isValid()).map((value) => value.format("YYYY-MM-DD HH:mm:ss"));
 	return new Set(values);
 }
+function toWallClockDate(value) {
+	return new Date(Date.UTC(value.year(), value.month(), value.date(), value.hour(), value.minute(), value.second(), value.millisecond()));
+}
+function fromWallClockDate(value) {
+	const result = new Date(2e3, 0, 1, 12);
+	result.setFullYear(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate());
+	result.setHours(value.getUTCHours(), value.getUTCMinutes(), value.getUTCSeconds(), value.getUTCMilliseconds());
+	return (0, dayjs.default)(result);
+}
+function getWallClockDurationMs(start, end) {
+	return toWallClockDate(end).getTime() - toWallClockDate(start).getTime();
+}
 function getRRuleString(rule) {
 	const normalized = rule.trim();
 	if (!normalized.includes("\n")) return normalized.startsWith("RRULE:") ? normalized.replace(/^RRULE:/, "") : normalized;
@@ -556,10 +600,10 @@ function getOccurrenceStartsInRange(event, rangeStart, rangeEnd, expansionLimit,
 	if (!dtstart.isValid() || !event.recurrence) return [];
 	try {
 		const options = RRule.parseString(getRRuleString(event.recurrence.rrule));
-		options.dtstart = dtstart.toDate();
+		options.dtstart = toWallClockDate(dtstart);
 		const rule = new RRule(options);
-		const searchStart = rangeStart.subtract(Math.max(0, durationMs), "millisecond").toDate();
-		return rule.between(searchStart, rangeEnd.toDate(), true).slice(0, expansionLimit).map((value) => (0, dayjs.default)(value));
+		const searchStart = new Date(toWallClockDate(rangeStart).getTime() - Math.max(0, durationMs));
+		return rule.between(searchStart, toWallClockDate(rangeEnd), true).slice(0, expansionLimit);
 	} catch {
 		return [];
 	}
@@ -570,8 +614,7 @@ function isEventInRange(event, rangeStart, rangeEnd) {
 	if (!start.isValid() || !end.isValid()) return false;
 	return overlapsRange(start, end, rangeStart, rangeEnd);
 }
-function createGeneratedInstance(event, occurrenceStart, durationMs) {
-	const occurrenceEnd = occurrenceStart.add(durationMs, "millisecond");
+function createGeneratedInstance(event, occurrenceStart, occurrenceEnd) {
 	const recurrenceId = occurrenceStart.format("YYYY-MM-DD HH:mm:ss");
 	const { recurrence: _recurrence, ...eventWithoutRecurrence } = event;
 	return {
@@ -617,11 +660,12 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 		const eventStart = (0, dayjs.default)(event.recurrence?.dtstart || event.start);
 		const eventEnd = (0, dayjs.default)(event.end);
 		if (!eventStart.isValid() || !eventEnd.isValid()) continue;
-		const durationMs = eventEnd.diff((0, dayjs.default)(event.start), "millisecond");
+		const durationMs = getWallClockDurationMs((0, dayjs.default)(event.start), eventEnd);
 		if (durationMs < 0) continue;
 		const exdate = getExdateSet(event.recurrence);
 		const starts = getOccurrenceStartsInRange(event, start, end, expansionLimit, durationMs);
-		for (const occurrenceStart of starts) {
+		for (const wallClockStart of starts) {
+			const occurrenceStart = fromWallClockDate(wallClockStart);
 			const recurrenceId = occurrenceStart.format("YYYY-MM-DD HH:mm:ss");
 			if (exdate.has(recurrenceId)) continue;
 			const overrideKey = getRecurrenceKey(event.id, recurrenceId);
@@ -633,7 +677,7 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 				}
 				continue;
 			}
-			const generated = createGeneratedInstance(event, occurrenceStart, durationMs);
+			const generated = createGeneratedInstance(event, occurrenceStart, fromWallClockDate(new Date(wallClockStart.getTime() + durationMs)));
 			if (overlapsRange((0, dayjs.default)(generated.start), (0, dayjs.default)(generated.end), start, end)) output.push(validateEvent(generated));
 		}
 	}
@@ -957,7 +1001,7 @@ function useEventResize(input) {
 		const parsedEndTime = parseTimeString(input.endTime());
 		const startMinutes = parsedStartTime.hours * 60 + parsedStartTime.minutes;
 		const endMinutes = parsedEndTime.hours * 60 + parsedEndTime.minutes;
-		const intervalMinutes = clampIntervalMinutes(input.intervalMinutes());
+		const intervalMinutes = clampIntervalMinutes(input.resizeIntervalMinutes?.() ?? input.intervalMinutes());
 		const literalRange = endMinutes - startMinutes;
 		const totalMinutes = Math.ceil(literalRange / intervalMinutes) * intervalMinutes;
 		resizeState.value = {
@@ -1589,6 +1633,90 @@ var MoreEvents_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/MoreEvents/MoreEvents.ts
 var MoreEvents = (0, _mantine_vue_core.factory)(MoreEvents_default, { classes: MoreEvents_module_default });
 //#endregion
+//#region src/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.vue
+var ScheduleBackgroundEvent_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "ScheduleBackgroundEvent",
+	inheritAttrs: false,
+	__name: "ScheduleBackgroundEvent",
+	props: {
+		event: {},
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		renderEvent: {
+			type: Function,
+			default: void 0
+		},
+		renderEventBody: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["eventClick"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
+		const theme = (0, _mantine_vue_core.useMantineTheme)();
+		const dragPassthrough = (0, vue.ref)(false);
+		const resetDragPassthrough = () => {
+			dragPassthrough.value = false;
+		};
+		const enableDragPassthrough = () => {
+			if (!props.interactive || dragPassthrough.value) return;
+			dragPassthrough.value = true;
+			document.addEventListener("dragend", resetDragPassthrough, { once: true });
+			document.addEventListener("drop", resetDragPassthrough, { once: true });
+			document.addEventListener("pointermove", resetDragPassthrough, { once: true });
+		};
+		(0, vue.onBeforeUnmount)(() => {
+			document.removeEventListener("dragend", resetDragPassthrough);
+			document.removeEventListener("drop", resetDragPassthrough);
+			document.removeEventListener("pointermove", resetDragPassthrough);
+		});
+		const rootProps = (0, vue.computed)(() => {
+			const colors = theme.value.variantColorResolver({
+				color: props.event.color || theme.value.primaryColor,
+				theme: theme.value,
+				variant: "light",
+				autoContrast: true
+			});
+			const style = [attrs.style, {
+				"--bg-event-bg": colors.background,
+				"--bg-event-color": colors.color,
+				"--bg-event-hover": colors.hover,
+				...dragPassthrough.value ? { pointerEvents: "none" } : {}
+			}];
+			return {
+				...attrs,
+				style,
+				mod: [attrs.mod, { interactive: props.interactive }],
+				...props.interactive ? {
+					"data-event-id": props.event.id,
+					title: props.event.title,
+					onClick: (event) => emit("eventClick", props.event, event),
+					onDragenter: enableDragPassthrough,
+					onDragover: enableDragPassthrough
+				} : {}
+			};
+		});
+		const content = () => slots.default?.({ event: props.event }) ?? props.renderEventBody?.(props.event) ?? props.event.title;
+		const render = () => {
+			const component = props.interactive ? _mantine_vue_core.UnstyledButton : _mantine_vue_core.Box;
+			if (props.renderEvent) return props.renderEvent(props.event, {
+				...rootProps.value,
+				children: content()
+			});
+			return (0, vue.h)(component, rootProps.value, { default: content });
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(render);
+		};
+	}
+});
+//#endregion
 //#region src/components/ScheduleHeader/ScheduleHeader.context.ts
 var ScheduleHeaderLabelsKey = Symbol("mantine-schedule-header-labels");
 /**
@@ -2528,6 +2656,23 @@ function resolveSlotIndex({ container, intervals }, clientY, eventTarget) {
 		return clientY >= rect.top && clientY <= rect.bottom;
 	});
 }
+function resolveTarget(input, slotIndex, clientY) {
+	const interval = input.intervals[slotIndex];
+	if (!interval) return void 0;
+	if (input.dragIntervalMinutes == null) return `${input.date} ${interval.startTime}`;
+	const rect = (input.container?.querySelectorAll("[data-time-slot-index]"))?.[slotIndex]?.getBoundingClientRect();
+	const parsed = parseTimeString(interval.startTime);
+	const gridInterval = clampIntervalMinutes(input.intervalMinutes ?? 15);
+	const dragInterval = clampIntervalMinutes(input.dragIntervalMinutes);
+	const offsetRatio = rect && rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+	let minutes = Math.round((parsed.hours * 60 + parsed.minutes + offsetRatio * gridInterval) / dragInterval) * dragInterval;
+	const start = input.startTime ? parseTimeString(input.startTime) : null;
+	const end = input.endTime ? parseTimeString(input.endTime) : null;
+	const min = start ? Math.ceil((start.hours * 60 + start.minutes) / dragInterval) * dragInterval : 0;
+	const max = end ? Math.floor((end.hours * 60 + end.minutes - 1) / dragInterval) * dragInterval : 1439;
+	minutes = min > max ? start.hours * 60 + start.minutes : Math.max(min, Math.min(max, minutes));
+	return `${input.date} ${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}:00`;
+}
 /**
 * Tracks the time slot a drag is hovering over.
 *
@@ -2574,10 +2719,10 @@ function useSlotDropTarget() {
 		drop: (nativeEvent, input) => {
 			const slotIndex = resolveSlotIndex(input, nativeEvent.clientY, nativeEvent.target instanceof Element ? nativeEvent.target : null);
 			reset();
-			const interval = input.intervals[slotIndex];
-			return interval ? {
+			const target = resolveTarget(input, slotIndex, nativeEvent.clientY);
+			return target ? {
 				slotIndex,
-				target: `${input.date} ${interval.startTime}`
+				target
 			} : void 0;
 		},
 		reset
@@ -2768,17 +2913,17 @@ function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes })
 	};
 }
 var DayView_module_default = {
-	dayView: "_dayView_r6otq_1",
-	dayViewScrollArea: "_dayViewScrollArea_r6otq_22",
-	dayViewInner: "_dayViewInner_r6otq_32",
-	dayViewTimeSlots: "_dayViewTimeSlots_r6otq_36",
-	dayViewSlot: "_dayViewSlot_r6otq_39",
-	dayViewSlotLabels: "_dayViewSlotLabels_r6otq_44",
-	dayViewSlotLabel: "_dayViewSlotLabel_r6otq_44",
-	dayViewSlots: "_dayViewSlots_r6otq_74",
-	dayViewBackgroundEvent: "_dayViewBackgroundEvent_r6otq_178",
-	dayViewAllDay: "_dayViewAllDay_r6otq_191",
-	dayViewAllDayEvents: "_dayViewAllDayEvents_r6otq_196"
+	dayView: "_dayView_1nebu_1",
+	dayViewScrollArea: "_dayViewScrollArea_1nebu_22",
+	dayViewInner: "_dayViewInner_1nebu_32",
+	dayViewTimeSlots: "_dayViewTimeSlots_1nebu_36",
+	dayViewSlot: "_dayViewSlot_1nebu_39",
+	dayViewSlotLabels: "_dayViewSlotLabels_1nebu_44",
+	dayViewSlotLabel: "_dayViewSlotLabel_1nebu_44",
+	dayViewSlots: "_dayViewSlots_1nebu_74",
+	dayViewBackgroundEvent: "_dayViewBackgroundEvent_1nebu_178",
+	dayViewAllDay: "_dayViewAllDay_1nebu_201",
+	dayViewAllDayEvents: "_dayViewAllDayEvents_1nebu_206"
 };
 //#endregion
 //#region src/components/DayView/DayView.vue?vue&type=script&setup=true&lang.ts
@@ -2824,6 +2969,8 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		scrollAreaProps: { default: void 0 },
 		startTime: { default: void 0 },
 		endTime: { default: void 0 },
+		eventDragInterval: { default: void 0 },
+		eventResizeInterval: { default: void 0 },
 		slotLabelFormat: {
 			type: [String, Function],
 			default: void 0
@@ -2879,6 +3026,10 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -2965,6 +3116,7 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -3030,7 +3182,11 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const dropInput = () => ({
 			container: timeSlotsContainer.value,
 			date: datePart.value,
-			intervals: intervals.value
+			intervals: intervals.value,
+			intervalMinutes: props.intervalMinutes,
+			dragIntervalMinutes: props.eventDragInterval,
+			startTime: props.startTime,
+			endTime: props.endTime
 		});
 		const handleGridDragOver = (nativeEvent) => slotDropTarget.dragOver(nativeEvent, dropInput());
 		const handleGridDragLeave = (nativeEvent) => slotDropTarget.dragLeave(nativeEvent, timeSlotsContainer.value);
@@ -3142,7 +3298,21 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, 1040);
 						}), 128))], 16), (0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("dayViewSlots"))), [(0, vue.unref)(props).withAllDaySlot ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 0 }, (0, vue.unref)(getStyles)("dayViewAllDay"))), [
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(dayEvents.value.backgroundAllDayEvents, (event) => {
-								return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: event.id }, { ref_for: true }, (0, vue.unref)(staticStyles)("dayViewBackgroundEvent")), null, 16);
+								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+									key: event.id,
+									event,
+									interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...(0, vue.unref)(staticStyles)("dayViewBackgroundEvent")
+								}, {
+									style: {
+										top: 0,
+										height: "100%",
+										width: "100%"
+									},
+									onEventClick: clickEvent
+								}), null, 16, ["event", "interactive"]);
 							}), 128)),
 							(0, vue.createElementVNode)("div", (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(getStyles)("dayViewAllDayEvents"))), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleAllDayEvents.value, (event) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
@@ -3204,7 +3374,21 @@ var DayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							onDrop: _cache[7] || (_cache[7] = ($event) => withDragHandlers.value ? handleGridDrop($event) : void 0)
 						}), [
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(dayEvents.value.backgroundTimedEvents, (event) => {
-								return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: event.id }, { ref_for: true }, (0, vue.unref)(staticStyles)("dayViewBackgroundEvent"), { style: backgroundEventStyle(event.position) }), null, 16);
+								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+									key: event.id,
+									event,
+									interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...(0, vue.unref)(staticStyles)("dayViewBackgroundEvent")
+								}, {
+									style: backgroundEventStyle(event.position),
+									onEventClick: clickEvent
+								}), null, 16, [
+									"event",
+									"interactive",
+									"style"
+								]);
 							}), 128)),
 							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(dayEvents.value.regularEvents, (event) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
@@ -3445,6 +3629,7 @@ var MobileMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -3977,16 +4162,16 @@ function getRenderableMonthEventSegments({ events, groupedByDay, maxEventsPerDay
 	});
 }
 var MonthView_module_default = {
-	monthView: "_monthView_2aohq_1",
-	monthViewWeekdays: "_monthViewWeekdays_2aohq_21",
-	monthViewWeek: "_monthViewWeek_2aohq_21",
-	monthViewWeekNumber: "_monthViewWeekNumber_2aohq_31",
-	monthViewWeekday: "_monthViewWeekday_2aohq_21",
-	monthViewWeekdaysCorner: "_monthViewWeekdaysCorner_2aohq_107",
-	monthViewDay: "_monthViewDay_2aohq_114",
-	monthViewDayLabel: "_monthViewDayLabel_2aohq_255",
-	monthViewBackgroundEvent: "_monthViewBackgroundEvent_2aohq_271",
-	monthViewEvents: "_monthViewEvents_2aohq_286"
+	monthView: "_monthView_hbhp2_1",
+	monthViewWeekdays: "_monthViewWeekdays_hbhp2_21",
+	monthViewWeek: "_monthViewWeek_hbhp2_21",
+	monthViewWeekNumber: "_monthViewWeekNumber_hbhp2_31",
+	monthViewWeekday: "_monthViewWeekday_hbhp2_21",
+	monthViewWeekdaysCorner: "_monthViewWeekdaysCorner_hbhp2_107",
+	monthViewDay: "_monthViewDay_hbhp2_114",
+	monthViewDayLabel: "_monthViewDayLabel_hbhp2_255",
+	monthViewBackgroundEvent: "_monthViewBackgroundEvent_hbhp2_271",
+	monthViewEvents: "_monthViewEvents_hbhp2_296"
 };
 //#endregion
 //#region src/components/MonthView/MonthView.vue?vue&type=script&setup=true&lang.ts
@@ -4097,6 +4282,10 @@ var MonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -4267,6 +4456,10 @@ var MonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			width: `${position.width}%`,
 			top: `${28 + position.row * 22}px`
 		});
+		const backgroundSegmentStyle = (position) => ({
+			insetInlineStart: `calc(${position.startOffset}% + 2px)`,
+			width: `calc(${position.width}% - 3px)`
+		});
 		const isDraggableEvent = (event) => !isStatic.value && props.withEventsDragAndDrop === true && (props.canDragEvent?.(event) ?? true);
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
@@ -4383,7 +4576,23 @@ var MonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									"mode"
 								])) : (0, vue.createCommentVNode)("", true)], 16, _hoisted_1$5);
 							}), 128)),
-							(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("monthViewEvents")), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekSegments.value[weekIndex], (segment) => {
+							(0, vue.createElementVNode)("div", (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("monthViewEvents")), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grouped.value.backgroundByWeek[String(weekIndex)] || [], (event) => {
+								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+									key: `background-${event.id}-${weekIndex}`,
+									event,
+									interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...(0, vue.unref)(staticStyles)("monthViewBackgroundEvent")
+								}, {
+									style: backgroundSegmentStyle(event.position),
+									onEventClick: clickEvent
+								}), null, 16, [
+									"event",
+									"interactive",
+									"style"
+								]);
+							}), 128)), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(weekSegments.value[weekIndex], (segment) => {
 								return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
 									key: segment.key,
 									event: segment.event,
@@ -4528,17 +4737,13 @@ function calculateRegularEventOverlaps(events) {
 }
 //#endregion
 //#region src/components/WeekView/get-week-view-events/find-available-column.ts
-function columnHasConflict({ columns, columnIndex, event, allDay, allWeekDays }) {
+function columnHasConflict({ columns, columnIndex, event, allDay }) {
 	const columnKey = `col-${columnIndex}`;
 	if (!columns.has(columnKey)) return false;
-	return columns.get(columnKey).some((e) => {
-		const eAllDay = allWeekDays.some((day) => isAllDayEvent({
-			event: e,
-			date: day
-		}));
-		const hasTimeConflict = isEventsOverlap(e, event);
-		if (allDay && eAllDay) return hasTimeConflict;
-		if (allDay || eAllDay) return false;
+	return columns.get(columnKey).some((columnEvent) => {
+		const hasTimeConflict = isEventsOverlap(columnEvent.event, event);
+		if (allDay && columnEvent.allDay) return hasTimeConflict;
+		if (allDay || columnEvent.allDay) return false;
 		return hasTimeConflict;
 	});
 }
@@ -4672,12 +4877,14 @@ function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMin
 		const column = findAvailableColumn({
 			columns: columnMap,
 			event,
-			allDay,
-			allWeekDays: weekDays
+			allDay
 		});
 		const columnKey = `col-${column}`;
 		if (!columnMap.has(columnKey)) columnMap.set(columnKey, []);
-		columnMap.get(columnKey).push(event);
+		columnMap.get(columnKey).push({
+			event,
+			allDay: isActuallyAllDay
+		});
 		const verticalPosition = allDay ? {
 			top: 0,
 			height: 100
@@ -4763,27 +4970,27 @@ function getWeekViewEvents(input) {
 	});
 }
 var WeekView_module_default = {
-	weekView: "_weekView_16qgh_1",
-	weekViewRoot: "_weekViewRoot_16qgh_22",
-	weekViewInner: "_weekViewInner_16qgh_30",
-	weekViewScrollArea: "_weekViewScrollArea_16qgh_36",
-	weekViewHeader: "_weekViewHeader_16qgh_42",
-	weekViewCorner: "_weekViewCorner_16qgh_57",
-	weekViewSlotLabels: "_weekViewSlotLabels_16qgh_68",
-	weekViewSlotLabel: "_weekViewSlotLabel_16qgh_68",
-	weekViewDay: "_weekViewDay_16qgh_95",
-	weekViewDayLabel: "_weekViewDayLabel_16qgh_100",
-	weekViewDayNumber: "_weekViewDayNumber_16qgh_138",
-	weekViewDayWeekday: "_weekViewDayWeekday_16qgh_154",
-	weekViewBackgroundEvent: "_weekViewBackgroundEvent_16qgh_160",
-	weekViewDaySlots: "_weekViewDaySlots_16qgh_173",
-	weekViewDaySlot: "_weekViewDaySlot_16qgh_173",
-	weekViewWeekLabel: "_weekViewWeekLabel_16qgh_271",
-	weekViewWeekNumber: "_weekViewWeekNumber_16qgh_277",
-	weekViewAllDaySlots: "_weekViewAllDaySlots_16qgh_283",
-	weekViewAllDaySlotsLabel: "_weekViewAllDaySlotsLabel_16qgh_288",
-	weekViewAllDaySlotsEvents: "_weekViewAllDaySlotsEvents_16qgh_295",
-	weekViewAllDaySlotsList: "_weekViewAllDaySlotsList_16qgh_302"
+	weekView: "_weekView_1f3zt_1",
+	weekViewRoot: "_weekViewRoot_1f3zt_22",
+	weekViewInner: "_weekViewInner_1f3zt_30",
+	weekViewScrollArea: "_weekViewScrollArea_1f3zt_36",
+	weekViewHeader: "_weekViewHeader_1f3zt_42",
+	weekViewCorner: "_weekViewCorner_1f3zt_57",
+	weekViewSlotLabels: "_weekViewSlotLabels_1f3zt_68",
+	weekViewSlotLabel: "_weekViewSlotLabel_1f3zt_68",
+	weekViewDay: "_weekViewDay_1f3zt_95",
+	weekViewDayLabel: "_weekViewDayLabel_1f3zt_100",
+	weekViewDayNumber: "_weekViewDayNumber_1f3zt_138",
+	weekViewDayWeekday: "_weekViewDayWeekday_1f3zt_154",
+	weekViewBackgroundEvent: "_weekViewBackgroundEvent_1f3zt_160",
+	weekViewDaySlots: "_weekViewDaySlots_1f3zt_183",
+	weekViewDaySlot: "_weekViewDaySlot_1f3zt_183",
+	weekViewWeekLabel: "_weekViewWeekLabel_1f3zt_281",
+	weekViewWeekNumber: "_weekViewWeekNumber_1f3zt_287",
+	weekViewAllDaySlots: "_weekViewAllDaySlots_1f3zt_293",
+	weekViewAllDaySlotsLabel: "_weekViewAllDaySlotsLabel_1f3zt_298",
+	weekViewAllDaySlotsEvents: "_weekViewAllDaySlotsEvents_1f3zt_305",
+	weekViewAllDaySlotsList: "_weekViewAllDaySlotsList_1f3zt_312"
 };
 //#endregion
 //#region src/components/WeekView/WeekView.vue?vue&type=script&setup=true&lang.ts
@@ -4875,6 +5082,8 @@ var WeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		scrollAreaProps: { default: void 0 },
 		startTime: { default: void 0 },
 		endTime: { default: void 0 },
+		eventDragInterval: { default: void 0 },
+		eventResizeInterval: { default: void 0 },
 		slotLabelFormat: {
 			type: [String, Function],
 			default: void 0
@@ -4926,6 +5135,10 @@ var WeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -5070,6 +5283,7 @@ var WeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -5171,7 +5385,11 @@ var WeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const dropInput = (date) => ({
 			container: daySlotsContainers.get(date),
 			date: (0, dayjs.default)(date).format("YYYY-MM-DD"),
-			intervals: intervals.value
+			intervals: intervals.value,
+			intervalMinutes: props.intervalMinutes,
+			dragIntervalMinutes: props.eventDragInterval,
+			startTime: props.startTime,
+			endTime: props.endTime
 		});
 		const handleDayDragOver = (nativeEvent, date) => slotDropTarget.dragOver(nativeEvent, dropInput(date));
 		const handleDayDragLeave = (nativeEvent, date) => slotDropTarget.dragLeave(nativeEvent, daySlotsContainers.get(date));
@@ -5405,7 +5623,21 @@ var WeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 												]);
 											}), 128)),
 											((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grouped.value.backgroundEvents[column.date] || [], (event) => {
-												return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ key: `background-${event.id}` }, { ref_for: true }, (0, vue.unref)(staticStyles)("weekViewBackgroundEvent"), { style: backgroundEventStyle(event.position) }), null, 16);
+												return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+													key: `background-${event.id}`,
+													event,
+													interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+												}, { ref_for: true }, {
+													...eventRenderers.value,
+													...(0, vue.unref)(staticStyles)("weekViewBackgroundEvent")
+												}, {
+													style: backgroundEventStyle(event.position),
+													onEventClick: clickEvent
+												}), null, 16, [
+													"event",
+													"interactive",
+													"style"
+												]);
 											}), 128)),
 											((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(grouped.value.regularEvents[column.date] || [], (event) => {
 												return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
@@ -5486,18 +5718,18 @@ function getYearViewEvents({ date, events }) {
 	return groupedEvents;
 }
 var YearView_module_default = {
-	yearView: "_yearView_1y6ar_1",
-	yearViewMonths: "_yearViewMonths_1y6ar_15",
-	yearViewMonth: "_yearViewMonth_1y6ar_15",
-	yearViewWeekdays: "_yearViewWeekdays_1y6ar_92",
-	yearViewWeek: "_yearViewWeek_1y6ar_92",
-	yearViewWeekNumber: "_yearViewWeekNumber_1y6ar_100",
-	yearViewWeekday: "_yearViewWeekday_1y6ar_92",
-	yearViewWeekdaysCorner: "_yearViewWeekdaysCorner_1y6ar_154",
-	yearViewDay: "_yearViewDay_1y6ar_158",
-	yearViewMonthCaption: "_yearViewMonthCaption_1y6ar_217",
-	yearViewDayIndicators: "_yearViewDayIndicators_1y6ar_243",
-	yearViewDayIndicator: "_yearViewDayIndicator_1y6ar_243"
+	yearView: "_yearView_1ww3l_1",
+	yearViewMonths: "_yearViewMonths_1ww3l_16",
+	yearViewMonth: "_yearViewMonth_1ww3l_16",
+	yearViewWeekdays: "_yearViewWeekdays_1ww3l_93",
+	yearViewWeek: "_yearViewWeek_1ww3l_93",
+	yearViewWeekNumber: "_yearViewWeekNumber_1ww3l_101",
+	yearViewWeekday: "_yearViewWeekday_1ww3l_93",
+	yearViewWeekdaysCorner: "_yearViewWeekdaysCorner_1ww3l_156",
+	yearViewDay: "_yearViewDay_1ww3l_160",
+	yearViewMonthCaption: "_yearViewMonthCaption_1ww3l_220",
+	yearViewDayIndicators: "_yearViewDayIndicators_1ww3l_246",
+	yearViewDayIndicator: "_yearViewDayIndicator_1ww3l_246"
 };
 //#endregion
 //#region src/components/YearView/YearView.vue?vue&type=script&setup=true&lang.ts
@@ -5509,6 +5741,7 @@ var defaultProps$5 = {
 	firstDayOfWeek: 1,
 	weekdayFormat: "dd",
 	weekendDays: [0, 6],
+	withWeekendDays: true,
 	withWeekDays: true,
 	highlightToday: true,
 	withOutsideDays: true,
@@ -5528,6 +5761,10 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		weekendDays: { default: void 0 },
+		withWeekendDays: {
+			type: Boolean,
+			default: void 0
+		},
 		withWeekNumbers: { type: Boolean },
 		withWeekDays: {
 			type: Boolean,
@@ -5553,6 +5790,10 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		renderDay: {
+			type: Function,
+			default: void 0
+		},
 		getWeekNumberProps: {
 			type: Function,
 			default: void 0
@@ -5581,6 +5822,7 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -5638,7 +5880,13 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			locale: props.locale || "en",
 			format: props.weekdayFormat,
 			firstDayOfWeek: props.firstDayOfWeek
-		}));
+		}).filter((_, index) => !hiddenWeekendColumns.value.has(index)));
+		const hiddenWeekendColumns = (0, vue.computed)(() => {
+			if (props.withWeekendDays !== false) return /* @__PURE__ */ new Set();
+			return new Set(Array.from({ length: 7 }, (_, index) => index).filter((index) => props.weekendDays.includes((props.firstDayOfWeek + index) % 7)));
+		});
+		const columnsCount = (0, vue.computed)(() => 7 - hiddenWeekendColumns.value.size);
+		const visibleWeek = (week) => props.withWeekendDays === false ? week.filter((date) => !props.weekendDays.includes((0, dayjs.default)(date).day())) : week;
 		/**
 		* Every month with the grid offset its cells start at, so a single roving tabindex can walk
 		* the whole year rather than restarting in each month.
@@ -5658,11 +5906,11 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					weeks,
 					offset
 				};
-				offset += weeks.length * 7;
+				offset += weeks.length * columnsCount.value;
 				return entry;
 			});
 		});
-		const totalYearGridCells = (0, vue.computed)(() => months.value.reduce((total, { weeks }) => total + weeks.length * 7, 0));
+		const totalYearGridCells = (0, vue.computed)(() => months.value.reduce((total, { weeks }) => total + weeks.length * columnsCount.value, 0));
 		const headerControl = (0, vue.computed)(() => ({ monthYearSelect: {
 			locale: props.locale,
 			yearValue: year.value.year(),
@@ -5675,13 +5923,13 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const dayProps = (date) => props.getDayProps?.(toDateString(date)) ?? {};
 		const weekNumberProps = (weekStart) => props.getWeekNumberProps?.(toDateString(weekStart)) ?? {};
 		const isOutside = (date, month) => !(0, dayjs.default)(date).isSame(month, "month");
-		const dayEvents = (date) => (eventsByDay.value[(0, dayjs.default)(date).format("YYYY-MM-DD")] || []).slice(0, 3);
+		const dayEvents = (date) => eventsByDay.value[(0, dayjs.default)(date).format("YYYY-MM-DD")] || [];
 		const indicatorStyle = (event) => ({ background: `var(--mantine-color-${event.color}-6, ${event.color})` });
 		const handleDayKeydown = (nativeEvent, gridIndex) => {
 			handleGridKeydown({
 				event: nativeEvent,
 				index: gridIndex,
-				columns: 7,
+				columns: columnsCount.value,
 				total: totalYearGridCells.value,
 				getControl: (index) => {
 					const control = yearGrid.value?.querySelector(`[data-year-grid-index="${index}"]`) ?? null;
@@ -5690,10 +5938,17 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			});
 		};
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.normalizeProps)((0, vue.guardReactiveProps)({
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
 				...(0, vue.unref)(attrs),
 				...(0, vue.unref)(getStyles)("yearView")
-			})), {
+			}, {
+				style: [
+					(0, vue.unref)(getStyles)("yearView").style,
+					{ "--year-view-columns": columnsCount.value },
+					(0, vue.unref)(attrs).style
+				],
+				"data-without-weekend-days": hiddenWeekendColumns.value.size > 0 || void 0
+			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.unref)(props).withHeader ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleHeaderBase), (0, vue.mergeProps)({
 					key: 0,
 					view: "year",
@@ -5747,7 +6002,7 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							}, { onClick: ($event) => emit("weekNumberClick", (0, vue.unref)(toDateString)(week[0]), $event) }), {
 								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(getWeekNumber)(week)), 1)]),
 								_: 2
-							}, 1040, ["onClick"])) : (0, vue.createCommentVNode)("", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(week, (date, dayIndex) => {
+							}, 1040, ["onClick"])) : (0, vue.createCommentVNode)("", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleWeek(week), (date, dayIndex) => {
 								return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: (0, vue.unref)(toDateString)(date) }, [isOutside(date, month) && !(0, vue.unref)(props).withOutsideDays ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
 									key: 0,
 									ref_for: true
@@ -5759,7 +6014,7 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									...(0, vue.unref)(getStyles)("yearViewDay", { className: dayProps(date).class })
 								}, {
 									disabled: isStatic.value,
-									"data-year-grid-index": offset + weekIndex * 7 + dayIndex,
+									"data-year-grid-index": offset + weekIndex * columnsCount.value + dayIndex,
 									"data-outside": isOutside(date, month) || void 0,
 									"data-weekend": (0, vue.unref)(props).weekendDays.includes((0, vue.unref)(dayjs.default)(date).day()) || void 0,
 									"data-today": (0, vue.unref)(props).highlightToday && (0, vue.unref)(dayjs.default)(date).isSame((0, vue.unref)(dayjs.default)(), "day") || void 0,
@@ -5769,15 +6024,18 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 										format: "MMMM D, YYYY"
 									}),
 									tabindex: isStatic.value || isOutside(date, month) ? -1 : (0, vue.unref)(dayjs.default)(date).date() === 1 ? 0 : -1,
-									onKeydown: ($event) => isStatic.value ? void 0 : handleDayKeydown($event, offset + weekIndex * 7 + dayIndex),
+									onKeydown: ($event) => isStatic.value ? void 0 : handleDayKeydown($event, offset + weekIndex * columnsCount.value + dayIndex),
 									onClick: ($event) => emit("dayClick", (0, vue.unref)(toDateString)(date), $event)
 								}), {
-									default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(dayjs.default)(date).date()) + " ", 1), dayEvents(date).length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({
+									default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "day", {
+										date: (0, vue.unref)(toDateString)(date),
+										events: dayEvents(date)
+									}, () => [(0, vue.unref)(props).renderDay ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => (0, vue.unref)(props).renderDay((0, vue.unref)(toDateString)(date), dayEvents(date))), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(dayjs.default)(date).date()) + " ", 1), dayEvents(date).length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({
 										key: 0,
 										ref_for: true
-									}, (0, vue.unref)(getStyles)("yearViewDayIndicators")), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(dayEvents(date), (event) => {
+									}, (0, vue.unref)(getStyles)("yearViewDayIndicators")), [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(dayEvents(date).slice(0, 3), (event) => {
 										return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", (0, vue.mergeProps)({ key: event.id }, { ref_for: true }, (0, vue.unref)(getStyles)("yearViewDayIndicator"), { style: indicatorStyle(event) }), null, 16);
-									}), 128))], 16)) : (0, vue.createCommentVNode)("", true)]),
+									}), 128))], 16)) : (0, vue.createCommentVNode)("", true)], 64))])]),
 									_: 2
 								}, 1040, [
 									"disabled",
@@ -5794,8 +6052,8 @@ var YearView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						}), 128))
 					], 16, _hoisted_1$3);
 				}), 128))], 16)]),
-				_: 1
-			}, 16);
+				_: 3
+			}, 16, ["style", "data-without-weekend-days"]);
 		};
 	}
 });
@@ -5850,6 +6108,10 @@ var Schedule_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		recurrenceExpansionLimit: { default: void 0 },
 		layout: { default: void 0 },
 		dayViewProps: { default: void 0 },
@@ -5936,6 +6198,7 @@ var Schedule_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			withExternalEventDrop: props.withExternalEventDrop,
 			withEventResize: props.withEventResize,
 			canResizeEvent: props.canResizeEvent,
+			withInteractiveBackgroundEvents: props.mode === "static" ? false : props.withInteractiveBackgroundEvents,
 			recurrenceExpansionLimit: props.recurrenceExpansionLimit,
 			...eventRenderers.value,
 			...stylesApi.value
@@ -6038,7 +6301,7 @@ function useHorizontalEventResize(input) {
 		const end = parseTimeString(input.endTime());
 		const startMinutes = start.hours * 60 + start.minutes;
 		const literalRange = end.hours * 60 + end.minutes - startMinutes;
-		const interval = clampIntervalMinutes(input.intervalMinutes());
+		const interval = clampIntervalMinutes(input.resizeIntervalMinutes?.() ?? input.intervalMinutes());
 		const total = Math.ceil(literalRange / interval) * interval;
 		return {
 			startMinutes,
@@ -6244,27 +6507,27 @@ function getResourcesDayViewEvents({ events, resources, date, startTime, endTime
 	return result;
 }
 var ResourcesDayView_module_default = {
-	resourcesDayView: "_resourcesDayView_7b9z2_1",
-	resourcesDayViewRoot: "_resourcesDayViewRoot_7b9z2_22",
-	resourcesDayViewScrollArea: "_resourcesDayViewScrollArea_7b9z2_30",
-	resourcesDayViewInner: "_resourcesDayViewInner_7b9z2_39",
-	resourcesDayViewTimeLabelsRow: "_resourcesDayViewTimeLabelsRow_7b9z2_44",
-	resourcesDayViewCorner: "_resourcesDayViewCorner_7b9z2_57",
-	resourcesDayViewTimeLabel: "_resourcesDayViewTimeLabel_7b9z2_44",
-	resourcesDayViewRow: "_resourcesDayViewRow_7b9z2_96",
-	resourcesDayViewResourceLabel: "_resourcesDayViewResourceLabel_7b9z2_100",
-	resourcesDayViewGroupColumn: "_resourcesDayViewGroupColumn_7b9z2_124",
-	resourcesDayViewGroupColumnEmpty: "_resourcesDayViewGroupColumnEmpty_7b9z2_125",
-	resourcesDayViewRowSlots: "_resourcesDayViewRowSlots_7b9z2_153",
-	resourcesDayViewRowSlot: "_resourcesDayViewRowSlot_7b9z2_153",
-	resourcesDayViewCurrentTimeIndicator: "_resourcesDayViewCurrentTimeIndicator_7b9z2_231",
-	resourcesDayViewCurrentTimeIndicatorLine: "_resourcesDayViewCurrentTimeIndicatorLine_7b9z2_243",
-	resourcesDayViewCurrentTimeIndicatorThumb: "_resourcesDayViewCurrentTimeIndicatorThumb_7b9z2_249",
-	resourcesDayViewCurrentTimeIndicatorTimeBubble: "_resourcesDayViewCurrentTimeIndicatorTimeBubble_7b9z2_259",
-	resourcesDayViewBackgroundEvent: "_resourcesDayViewBackgroundEvent_7b9z2_278",
-	resourcesDayViewAllDayEvent: "_resourcesDayViewAllDayEvent_7b9z2_290",
-	resourcesDayViewEventWrapper: "_resourcesDayViewEventWrapper_7b9z2_296",
-	resourcesDayViewResizeHandle: "_resourcesDayViewResizeHandle_7b9z2_300"
+	resourcesDayView: "_resourcesDayView_wmj51_1",
+	resourcesDayViewRoot: "_resourcesDayViewRoot_wmj51_22",
+	resourcesDayViewScrollArea: "_resourcesDayViewScrollArea_wmj51_30",
+	resourcesDayViewInner: "_resourcesDayViewInner_wmj51_39",
+	resourcesDayViewTimeLabelsRow: "_resourcesDayViewTimeLabelsRow_wmj51_44",
+	resourcesDayViewCorner: "_resourcesDayViewCorner_wmj51_57",
+	resourcesDayViewTimeLabel: "_resourcesDayViewTimeLabel_wmj51_44",
+	resourcesDayViewRow: "_resourcesDayViewRow_wmj51_96",
+	resourcesDayViewResourceLabel: "_resourcesDayViewResourceLabel_wmj51_100",
+	resourcesDayViewGroupColumn: "_resourcesDayViewGroupColumn_wmj51_124",
+	resourcesDayViewGroupColumnEmpty: "_resourcesDayViewGroupColumnEmpty_wmj51_125",
+	resourcesDayViewRowSlots: "_resourcesDayViewRowSlots_wmj51_153",
+	resourcesDayViewRowSlot: "_resourcesDayViewRowSlot_wmj51_153",
+	resourcesDayViewCurrentTimeIndicator: "_resourcesDayViewCurrentTimeIndicator_wmj51_231",
+	resourcesDayViewCurrentTimeIndicatorLine: "_resourcesDayViewCurrentTimeIndicatorLine_wmj51_243",
+	resourcesDayViewCurrentTimeIndicatorThumb: "_resourcesDayViewCurrentTimeIndicatorThumb_wmj51_249",
+	resourcesDayViewCurrentTimeIndicatorTimeBubble: "_resourcesDayViewCurrentTimeIndicatorTimeBubble_wmj51_259",
+	resourcesDayViewBackgroundEvent: "_resourcesDayViewBackgroundEvent_wmj51_278",
+	resourcesDayViewAllDayEvent: "_resourcesDayViewAllDayEvent_wmj51_300",
+	resourcesDayViewEventWrapper: "_resourcesDayViewEventWrapper_wmj51_306",
+	resourcesDayViewResizeHandle: "_resourcesDayViewResizeHandle_wmj51_310"
 };
 //#endregion
 //#region src/components/ResourcesDayView/ResourcesDayView.vue?vue&type=script&setup=true&lang.ts
@@ -6315,6 +6578,8 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		startTime: { default: void 0 },
 		endTime: { default: void 0 },
 		intervalMinutes: { default: void 0 },
+		eventDragInterval: { default: void 0 },
+		eventResizeInterval: { default: void 0 },
 		slotLabelFormat: {
 			type: [String, Function],
 			default: void 0
@@ -6362,6 +6627,10 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		renderResourceLabel: {
 			type: Function,
 			default: void 0
@@ -6518,6 +6787,7 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -6549,9 +6819,8 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			nativeEvent.preventDefault();
 			resolveDropTarget.cancel();
 			setDropTarget(null);
-			const interval = intervals.value[slotIndex];
-			if (!interval) return;
-			const target = `${date.value} ${interval.startTime}`;
+			if (!intervals.value[slotIndex]) return;
+			const target = getSnappedDropTarget(nativeEvent, slotIndex);
 			const event = getDropEvent(expandedEvents.value, nativeEvent.dataTransfer);
 			if (event) emit("eventDrop", {
 				...moveEventTo(event, target),
@@ -6563,6 +6832,22 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				resourceId
 			});
 		};
+		const getSnappedDropTarget = (nativeEvent, slotIndex) => {
+			const interval = intervals.value[slotIndex];
+			if (!interval || props.eventDragInterval == null) return `${date.value} ${interval?.startTime ?? "00:00:00"}`;
+			const rect = (nativeEvent.currentTarget instanceof HTMLElement ? nativeEvent.currentTarget : null)?.getBoundingClientRect();
+			const slotSize = rect && rect.width > 0 ? rect.width / intervals.value.length : 0;
+			const slotOffset = rect ? nativeEvent.clientX - rect.left - slotIndex * slotSize : 0;
+			const parsed = parseTimeString(interval.startTime);
+			const dragInterval = clampIntervalMinutes(props.eventDragInterval);
+			const raw = parsed.hours * 60 + parsed.minutes + (slotSize > 0 ? slotOffset / slotSize : 0) * props.intervalMinutes;
+			const start = parseTimeString(props.startTime);
+			const end = parseTimeString(props.endTime);
+			const min = Math.ceil((start.hours * 60 + start.minutes) / dragInterval) * dragInterval;
+			const max = Math.floor((end.hours * 60 + end.minutes - 1) / dragInterval) * dragInterval;
+			const minutes = min > max ? start.hours * 60 + start.minutes : Math.max(min, Math.min(max, Math.round(raw / dragInterval) * dragInterval));
+			return `${date.value} ${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}:00`;
+		};
 		const setDropTarget = (next) => {
 			const current = dropTarget.value;
 			if (current === next) return;
@@ -6821,10 +7106,20 @@ var ResourcesDayView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 													return (0, vue.renderSlot)(_ctx.$slots, "backgroundEvent", {
 														key: `bg-${event.id}`,
 														event
-													}, () => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("resourcesDayViewBackgroundEvent", { style: backgroundEventStyle(event) })), {
-														default: (0, vue.withCtx)(() => [eventRenderers.value.renderEventBody ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => eventRenderers.value.renderEventBody(event)), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(event.title), 1)], 64))]),
-														_: 2
-													}, 1040)]);
+													}, () => [(0, vue.createVNode)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+														event,
+														interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+													}, { ref_for: true }, {
+														...eventRenderers.value,
+														...(0, vue.unref)(getStyles)("resourcesDayViewBackgroundEvent")
+													}, {
+														style: backgroundEventStyle(event),
+														onEventClick: clickEvent
+													}), null, 16, [
+														"event",
+														"interactive",
+														"style"
+													])]);
 												}), 128)),
 												((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(allDayEvents(resource.id), (event, index) => {
 													return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
@@ -7075,31 +7370,31 @@ function getResourcesWeekViewEvents({ events, resources, weekdays, startTime, en
 	};
 }
 var ResourcesWeekView_module_default = {
-	resourcesWeekView: "_resourcesWeekView_jzd1a_1",
-	resourcesWeekViewRoot: "_resourcesWeekViewRoot_jzd1a_19",
-	resourcesWeekViewScrollArea: "_resourcesWeekViewScrollArea_jzd1a_26",
-	resourcesWeekViewInner: "_resourcesWeekViewInner_jzd1a_34",
-	resourcesWeekViewHeaderRows: "_resourcesWeekViewHeaderRows_jzd1a_39",
-	resourcesWeekViewCorner: "_resourcesWeekViewCorner_jzd1a_48",
-	resourcesWeekViewHeaderContent: "_resourcesWeekViewHeaderContent_jzd1a_63",
-	resourcesWeekViewDayLabelsRow: "_resourcesWeekViewDayLabelsRow_jzd1a_67",
-	resourcesWeekViewDayLabel: "_resourcesWeekViewDayLabel_jzd1a_67",
-	resourcesWeekViewTimeLabelsRow: "_resourcesWeekViewTimeLabelsRow_jzd1a_94",
-	resourcesWeekViewTimeLabel: "_resourcesWeekViewTimeLabel_jzd1a_94",
-	resourcesWeekViewRow: "_resourcesWeekViewRow_jzd1a_121",
-	resourcesWeekViewResourceLabel: "_resourcesWeekViewResourceLabel_jzd1a_125",
-	resourcesWeekViewGroupColumn: "_resourcesWeekViewGroupColumn_jzd1a_149",
-	resourcesWeekViewGroupColumnEmpty: "_resourcesWeekViewGroupColumnEmpty_jzd1a_150",
-	resourcesWeekViewRowSlots: "_resourcesWeekViewRowSlots_jzd1a_178",
-	resourcesWeekViewRowSlot: "_resourcesWeekViewRowSlot_jzd1a_178",
-	resourcesWeekViewBackgroundEvent: "_resourcesWeekViewBackgroundEvent_jzd1a_250",
-	resourcesWeekViewAllDayEvent: "_resourcesWeekViewAllDayEvent_jzd1a_262",
-	resourcesWeekViewEventWrapper: "_resourcesWeekViewEventWrapper_jzd1a_267",
-	resourcesWeekViewResizeHandle: "_resourcesWeekViewResizeHandle_jzd1a_271",
-	resourcesWeekViewCurrentTimeIndicator: "_resourcesWeekViewCurrentTimeIndicator_jzd1a_312",
-	resourcesWeekViewCurrentTimeIndicatorLine: "_resourcesWeekViewCurrentTimeIndicatorLine_jzd1a_324",
-	resourcesWeekViewCurrentTimeIndicatorThumb: "_resourcesWeekViewCurrentTimeIndicatorThumb_jzd1a_330",
-	resourcesWeekViewCurrentTimeIndicatorTimeBubble: "_resourcesWeekViewCurrentTimeIndicatorTimeBubble_jzd1a_340"
+	resourcesWeekView: "_resourcesWeekView_1komm_1",
+	resourcesWeekViewRoot: "_resourcesWeekViewRoot_1komm_19",
+	resourcesWeekViewScrollArea: "_resourcesWeekViewScrollArea_1komm_26",
+	resourcesWeekViewInner: "_resourcesWeekViewInner_1komm_34",
+	resourcesWeekViewHeaderRows: "_resourcesWeekViewHeaderRows_1komm_39",
+	resourcesWeekViewCorner: "_resourcesWeekViewCorner_1komm_48",
+	resourcesWeekViewHeaderContent: "_resourcesWeekViewHeaderContent_1komm_63",
+	resourcesWeekViewDayLabelsRow: "_resourcesWeekViewDayLabelsRow_1komm_67",
+	resourcesWeekViewDayLabel: "_resourcesWeekViewDayLabel_1komm_67",
+	resourcesWeekViewTimeLabelsRow: "_resourcesWeekViewTimeLabelsRow_1komm_94",
+	resourcesWeekViewTimeLabel: "_resourcesWeekViewTimeLabel_1komm_94",
+	resourcesWeekViewRow: "_resourcesWeekViewRow_1komm_121",
+	resourcesWeekViewResourceLabel: "_resourcesWeekViewResourceLabel_1komm_125",
+	resourcesWeekViewGroupColumn: "_resourcesWeekViewGroupColumn_1komm_149",
+	resourcesWeekViewGroupColumnEmpty: "_resourcesWeekViewGroupColumnEmpty_1komm_150",
+	resourcesWeekViewRowSlots: "_resourcesWeekViewRowSlots_1komm_178",
+	resourcesWeekViewRowSlot: "_resourcesWeekViewRowSlot_1komm_178",
+	resourcesWeekViewBackgroundEvent: "_resourcesWeekViewBackgroundEvent_1komm_250",
+	resourcesWeekViewAllDayEvent: "_resourcesWeekViewAllDayEvent_1komm_272",
+	resourcesWeekViewEventWrapper: "_resourcesWeekViewEventWrapper_1komm_277",
+	resourcesWeekViewResizeHandle: "_resourcesWeekViewResizeHandle_1komm_281",
+	resourcesWeekViewCurrentTimeIndicator: "_resourcesWeekViewCurrentTimeIndicator_1komm_322",
+	resourcesWeekViewCurrentTimeIndicatorLine: "_resourcesWeekViewCurrentTimeIndicatorLine_1komm_334",
+	resourcesWeekViewCurrentTimeIndicatorThumb: "_resourcesWeekViewCurrentTimeIndicatorThumb_1komm_340",
+	resourcesWeekViewCurrentTimeIndicatorTimeBubble: "_resourcesWeekViewCurrentTimeIndicatorTimeBubble_1komm_350"
 };
 //#endregion
 //#region src/components/ResourcesWeekView/ResourcesWeekView.vue?vue&type=script&setup=true&lang.ts
@@ -7155,6 +7450,8 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		startTime: { default: void 0 },
 		endTime: { default: void 0 },
 		intervalMinutes: { default: void 0 },
+		eventDragInterval: { default: void 0 },
+		eventResizeInterval: { default: void 0 },
 		slotLabelFormat: {
 			type: [String, Function],
 			default: void 0
@@ -7206,6 +7503,10 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		renderResourceLabel: {
 			type: Function,
 			default: void 0
@@ -7388,6 +7689,7 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -7429,7 +7731,7 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			const day = weekdays.value[Math.floor(flatIndex / count)];
 			const interval = intervals.value[flatIndex % count];
 			if (!day || !interval) return;
-			const target = `${day} ${interval.startTime}`;
+			const target = getSnappedDropTarget(nativeEvent, day, flatIndex, interval.startTime);
 			const event = getDropEvent(props.events, nativeEvent.dataTransfer);
 			if (event) emit("eventDrop", {
 				...moveEventTo(event, target),
@@ -7441,6 +7743,22 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				resourceId
 			});
 		};
+		const getSnappedDropTarget = (nativeEvent, day, flatIndex, slotStartTime) => {
+			if (props.eventDragInterval == null) return `${day} ${slotStartTime}`;
+			const rect = (nativeEvent.currentTarget instanceof HTMLElement ? nativeEvent.currentTarget : null)?.getBoundingClientRect();
+			const totalSlots = slotsPerDay.value * dayCount.value;
+			const slotSize = rect && rect.width > 0 ? rect.width / totalSlots : 0;
+			const slotOffset = rect ? nativeEvent.clientX - rect.left - flatIndex * slotSize : 0;
+			const parsed = parseTimeString(slotStartTime);
+			const dragInterval = clampIntervalMinutes(props.eventDragInterval);
+			const raw = parsed.hours * 60 + parsed.minutes + (slotSize > 0 ? slotOffset / slotSize : 0) * props.intervalMinutes;
+			const start = parseTimeString(props.startTime);
+			const end = parseTimeString(props.endTime);
+			const min = Math.ceil((start.hours * 60 + start.minutes) / dragInterval) * dragInterval;
+			const max = Math.floor((end.hours * 60 + end.minutes - 1) / dragInterval) * dragInterval;
+			const minutes = min > max ? start.hours * 60 + start.minutes : Math.max(min, Math.min(max, Math.round(raw / dragInterval) * dragInterval));
+			return `${day} ${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}:00`;
+		};
 		const setDropTarget = (next) => {
 			const current = dropTarget.value;
 			if (current === next) return;
@@ -7743,10 +8061,20 @@ var ResourcesWeekView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 														key: `bg-${entry.day}-${entry.event.id}`,
 														event: entry.event,
 														date: entry.day
-													}, () => [(0, vue.createVNode)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ ref_for: true }, (0, vue.unref)(getStyles)("resourcesWeekViewBackgroundEvent", { style: backgroundEventStyle(entry.event, entry.dayIndex) })), {
-														default: (0, vue.withCtx)(() => [eventRenderers.value.renderEventBody ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(() => eventRenderers.value.renderEventBody(entry.event)), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(entry.event.title), 1)], 64))]),
-														_: 2
-													}, 1040)]);
+													}, () => [(0, vue.createVNode)((0, vue.unref)(ScheduleBackgroundEvent_default), (0, vue.mergeProps)({
+														event: entry.event,
+														interactive: Boolean((0, vue.unref)(props).withInteractiveBackgroundEvents) && !isStatic.value
+													}, { ref_for: true }, {
+														...eventRenderers.value,
+														...(0, vue.unref)(getStyles)("resourcesWeekViewBackgroundEvent")
+													}, {
+														style: backgroundEventStyle(entry.event, entry.dayIndex),
+														onEventClick: clickEvent
+													}), null, 16, [
+														"event",
+														"interactive",
+														"style"
+													])]);
 												}), 128)),
 												((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(allDayBars(resource.id), (bar) => {
 													return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({
@@ -8014,27 +8342,33 @@ function getResourcesMonthViewLayout({ days, events, resourceId, maxRows }) {
 	};
 }
 var ResourcesMonthView_module_default = {
-	resourcesMonthView: "_resourcesMonthView_wgbmp_1",
-	resourcesMonthViewRoot: "_resourcesMonthViewRoot_wgbmp_17",
-	resourcesMonthViewScrollArea: "_resourcesMonthViewScrollArea_wgbmp_24",
-	resourcesMonthViewInner: "_resourcesMonthViewInner_wgbmp_33",
-	resourcesMonthViewDayLabelsRow: "_resourcesMonthViewDayLabelsRow_wgbmp_37",
-	resourcesMonthViewCorner: "_resourcesMonthViewCorner_wgbmp_46",
-	resourcesMonthViewDayLabel: "_resourcesMonthViewDayLabel_wgbmp_37",
-	resourcesMonthViewDayLabelWeekday: "_resourcesMonthViewDayLabelWeekday_wgbmp_85",
-	resourcesMonthViewDayLabelNumber: "_resourcesMonthViewDayLabelNumber_wgbmp_92",
-	resourcesMonthViewRow: "_resourcesMonthViewRow_wgbmp_97",
-	resourcesMonthViewResourceLabel: "_resourcesMonthViewResourceLabel_wgbmp_101",
-	resourcesMonthViewGroupColumn: "_resourcesMonthViewGroupColumn_wgbmp_120",
-	resourcesMonthViewGroupColumnEmpty: "_resourcesMonthViewGroupColumnEmpty_wgbmp_121",
-	resourcesMonthViewRowSlots: "_resourcesMonthViewRowSlots_wgbmp_149",
-	resourcesMonthViewCell: "_resourcesMonthViewCell_wgbmp_154"
+	resourcesMonthView: "_resourcesMonthView_uqbdi_1",
+	resourcesMonthViewRoot: "_resourcesMonthViewRoot_uqbdi_17",
+	resourcesMonthViewScrollArea: "_resourcesMonthViewScrollArea_uqbdi_24",
+	resourcesMonthViewInner: "_resourcesMonthViewInner_uqbdi_33",
+	resourcesMonthViewDayLabelsRow: "_resourcesMonthViewDayLabelsRow_uqbdi_37",
+	resourcesMonthViewCorner: "_resourcesMonthViewCorner_uqbdi_46",
+	resourcesMonthViewDayLabel: "_resourcesMonthViewDayLabel_uqbdi_37",
+	resourcesMonthViewDayLabelWeekday: "_resourcesMonthViewDayLabelWeekday_uqbdi_85",
+	resourcesMonthViewDayLabelNumber: "_resourcesMonthViewDayLabelNumber_uqbdi_92",
+	resourcesMonthViewRow: "_resourcesMonthViewRow_uqbdi_97",
+	resourcesMonthViewResourceLabel: "_resourcesMonthViewResourceLabel_uqbdi_101",
+	resourcesMonthViewGroupColumn: "_resourcesMonthViewGroupColumn_uqbdi_120",
+	resourcesMonthViewGroupColumnEmpty: "_resourcesMonthViewGroupColumnEmpty_uqbdi_121",
+	resourcesMonthViewRowSlots: "_resourcesMonthViewRowSlots_uqbdi_149",
+	resourcesMonthViewCell: "_resourcesMonthViewCell_uqbdi_154",
+	resourcesMonthViewEventWrapper: "_resourcesMonthViewEventWrapper_uqbdi_230",
+	resourcesMonthViewResizeHandle: "_resourcesMonthViewResizeHandle_uqbdi_231"
 };
 //#endregion
 //#region src/components/ResourcesMonthView/ResourcesMonthView.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-weekend", "data-today"];
 var _hoisted_2 = ["data-has-groups"];
 var _hoisted_3 = ["onDragover", "onDrop"];
+var _hoisted_4 = ["data-active", "onPointerdown"];
+var _hoisted_5 = ["data-active", "onPointerdown"];
+var _hoisted_6 = ["data-active", "onPointerdown"];
+var _hoisted_7 = ["data-active", "onPointerdown"];
 var defaultProps$1 = {
 	weekdayFormat: "ddd",
 	weekendDays: [0, 6],
@@ -8046,7 +8380,8 @@ var defaultProps$1 = {
 	groupLabelWidth: 80,
 	mode: "default",
 	maxEventsPerTimeSlot: 2,
-	recurrenceExpansionLimit: 2e3
+	recurrenceExpansionLimit: 2e3,
+	withEventResize: false
 };
 /** View levels the header offers – a resource schedule has no year view. */
 var RESOURCE_VIEWS = [
@@ -8124,6 +8459,14 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		withEventResize: {
+			type: Boolean,
+			default: void 0
+		},
+		canResizeEvent: {
+			type: Function,
+			default: void 0
+		},
 		withExternalEventDrop: { type: Boolean },
 		withDragSlotSelect: { type: Boolean },
 		labels: { default: void 0 },
@@ -8146,7 +8489,8 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		"eventDragStart",
 		"eventDragEnd",
 		"slotDragEnd",
-		"externalEventDrop"
+		"externalEventDrop",
+		"eventResize"
 	],
 	setup(__props, { emit: __emit }) {
 		const rawProps = __props;
@@ -8154,6 +8498,7 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const slots = (0, vue.useSlots)();
 		const attrs = (0, vue.useAttrs)();
 		const props = (0, _mantine_vue_core.useProps)("ResourcesMonthView", defaultProps$1, rawProps);
+		const theme = (0, _mantine_vue_core.useSafeMantineTheme)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "ResourcesMonthView",
 			props,
@@ -8203,9 +8548,19 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			rangeEnd: month.value.endOf("month").toDate(),
 			expansionLimit: props.recurrenceExpansionLimit
 		}));
+		const resizeState = (0, vue.shallowRef)(null);
+		let justResized = false;
+		const effectiveEvents = (0, vue.computed)(() => {
+			const state = resizeState.value;
+			return state ? expandedEvents.value.map((event) => event.id === state.event.id ? {
+				...event,
+				start: state.start,
+				end: state.end
+			} : event) : expandedEvents.value;
+		});
 		const rowLayouts = (0, vue.computed)(() => ordered.value.orderedResources.map((resource) => getResourcesMonthViewLayout({
 			days: days.value,
-			events: expandedEvents.value,
+			events: effectiveEvents.value,
 			resourceId: resource.id,
 			maxRows: maxRows.value
 		})));
@@ -8375,6 +8730,106 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			emit("eventDragStart", event);
 		};
 		const dragEnd = () => dragState.endEventDrag();
+		const isResizableEvent = (event) => Boolean(props.withEventResize) && !isStatic.value && event.display !== "background" && (props.canResizeEvent?.(event) ?? true);
+		const isResizingEvent = (event) => resizeState.value?.event.id === event.id;
+		const calculateResizeDates = (event, edge, targetDay) => {
+			const originalStart = (0, dayjs.default)(event.start);
+			const originalEnd = (0, dayjs.default)(event.end);
+			const target = (0, dayjs.default)(targetDay).startOf("day");
+			const endAtMidnight = originalEnd.hour() === 0 && originalEnd.minute() === 0 && originalEnd.second() === 0;
+			const endDay = endAtMidnight ? originalEnd.subtract(1, "day").startOf("day") : originalEnd.startOf("day");
+			const withTime = (day, source) => day.startOf("day").hour(source.hour()).minute(source.minute()).second(source.second());
+			if (edge === "start") {
+				let start = withTime(target.isAfter(endDay) ? endDay : target, originalStart);
+				if (!start.isBefore(originalEnd)) start = start.subtract(1, "day");
+				return {
+					start: start.format("YYYY-MM-DD HH:mm:ss"),
+					end: originalEnd.format("YYYY-MM-DD HH:mm:ss")
+				};
+			}
+			const day = target.isBefore(originalStart.startOf("day")) ? originalStart.startOf("day") : target;
+			let end = endAtMidnight ? day.add(1, "day").startOf("day") : withTime(day, originalEnd);
+			if (!end.isAfter(originalStart)) end = end.add(1, "day");
+			return {
+				start: originalStart.format("YYYY-MM-DD HH:mm:ss"),
+				end: end.format("YYYY-MM-DD HH:mm:ss")
+			};
+		};
+		const handleResizeMove = (event) => {
+			const state = resizeState.value;
+			if (!state) return;
+			const dayIndex = (controls[state.resourceIndex] ?? []).findIndex((cell) => {
+				if (!cell) return false;
+				const rect = cell.getBoundingClientRect();
+				return event.clientX >= rect.left && event.clientX <= rect.right;
+			});
+			if (dayIndex < 0 || dayIndex === state.dayIndex || !days.value[dayIndex]) return;
+			resizeState.value = {
+				...state,
+				...calculateResizeDates(state.event, state.edge, days.value[dayIndex]),
+				dayIndex
+			};
+		};
+		const stopResizeListeners = () => {
+			document.removeEventListener("pointermove", handleResizeMove);
+			document.removeEventListener("pointerup", handleResizeEnd);
+			document.removeEventListener("pointercancel", handleResizeCancel);
+		};
+		const finishResize = (emitChange) => {
+			const state = resizeState.value;
+			stopResizeListeners();
+			resizeState.value = null;
+			if (emitChange && state && (state.start !== state.originalStart || state.end !== state.originalEnd)) emit("eventResize", {
+				eventId: state.event.id,
+				newStart: state.start,
+				newEnd: state.end,
+				event: state.event
+			});
+			justResized = true;
+			requestAnimationFrame(() => justResized = false);
+		};
+		function handleResizeEnd() {
+			finishResize(true);
+		}
+		function handleResizeCancel() {
+			finishResize(false);
+		}
+		const handleResizeStart = (event, edge, resourceIndex, pointerEvent) => {
+			if (!isResizableEvent(event)) return;
+			pointerEvent.preventDefault();
+			pointerEvent.stopPropagation();
+			const start = (0, dayjs.default)(event.start).format("YYYY-MM-DD HH:mm:ss");
+			const end = (0, dayjs.default)(event.end).format("YYYY-MM-DD HH:mm:ss");
+			resizeState.value = {
+				event,
+				edge,
+				resourceIndex,
+				originalStart: start,
+				originalEnd: end,
+				start,
+				end,
+				dayIndex: -1
+			};
+			document.addEventListener("pointermove", handleResizeMove);
+			document.addEventListener("pointerup", handleResizeEnd);
+			document.addEventListener("pointercancel", handleResizeCancel);
+		};
+		(0, vue.onBeforeUnmount)(stopResizeListeners);
+		const emitEventClick = (event, nativeEvent) => {
+			if (!isStatic.value && !justResized) emit("eventClick", event, nativeEvent);
+		};
+		const eventWrapperStyle = (event, style) => {
+			const colors = theme.value.variantColorResolver({
+				color: event.color || theme.value.primaryColor,
+				theme: theme.value,
+				variant: event.variant || "light",
+				autoContrast: true
+			});
+			return {
+				...style,
+				"--event-color": colors.color
+			};
+		};
 		const changeDate = (value) => emit("dateChange", value);
 		const changeView = (view) => emit("viewChange", view);
 		return (_ctx, _cache) => {
@@ -8383,7 +8838,8 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				...(0, vue.unref)(getStyles)("resourcesMonthView")
 			}, {
 				"root-ref": setRootElement,
-				"data-event-interaction": dropTarget.value ? true : void 0
+				"data-event-interaction": dropTarget.value || resizeState.value ? true : void 0,
+				"data-resizing": resizeState.value ? true : void 0
 			}), {
 				default: (0, vue.withCtx)(() => [(0, vue.unref)(props).withHeader ? (0, vue.renderSlot)(_ctx.$slots, "header", {
 					key: 0,
@@ -8469,58 +8925,112 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									onDrop: ($event) => withDragHandlers.value ? handleRowDrop($event, resource, resourceIndex) : void 0
 								}), [
 									((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(singleDayEvents(resourceIndex), (entry) => {
-										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
-											key: `${entry.event.id}-${entry.dayIndex}`,
-											event: entry.event,
-											"auto-size": "",
-											nowrap: "",
-											radius: (0, vue.unref)(props).radius,
-											mode: (0, vue.unref)(props).mode,
-											draggable: isDraggableEvent(entry.event),
-											style: singleEventStyle(entry)
-										}, { ref_for: true }, {
-											...eventRenderers.value,
-											...stylesApi.value
-										}, {
-											onEventDragStart: dragStart,
-											onEventDragEnd: dragEnd,
-											onClick: ($event) => isStatic.value ? void 0 : emit("eventClick", entry.event, $event)
-										}), null, 16, [
-											"event",
-											"radius",
-											"mode",
-											"draggable",
-											"style",
-											"onClick"
-										]);
+										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: `${entry.event.id}-${entry.dayIndex}` }, { ref_for: true }, (0, vue.unref)(getStyles)("resourcesMonthViewEventWrapper"), {
+											style: eventWrapperStyle(entry.event, singleEventStyle(entry)),
+											"data-resizing": isResizingEvent(entry.event) || void 0
+										}), {
+											default: (0, vue.withCtx)(() => [
+												(0, vue.createVNode)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
+													event: entry.event,
+													"auto-size": "",
+													nowrap: "",
+													radius: (0, vue.unref)(props).radius,
+													mode: (0, vue.unref)(props).mode,
+													draggable: isDraggableEvent(entry.event),
+													"is-resizing": isResizingEvent(entry.event),
+													style: {
+														"width": "100%",
+														"height": "100%"
+													}
+												}, { ref_for: true }, {
+													...eventRenderers.value,
+													...stylesApi.value
+												}, {
+													onEventDragStart: dragStart,
+													onEventDragEnd: dragEnd,
+													onClick: ($event) => emitEventClick(entry.event, $event)
+												}), null, 16, [
+													"event",
+													"radius",
+													"mode",
+													"draggable",
+													"is-resizing",
+													"onClick"
+												]),
+												isResizableEvent(entry.event) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+													key: 0,
+													ref_for: true
+												}, (0, vue.unref)(getStyles)("resourcesMonthViewResizeHandle"), {
+													"data-edge": "start",
+													"data-active": isResizingEvent(entry.event) && resizeState.value?.edge === "start" || void 0,
+													onPointerdown: ($event) => handleResizeStart(entry.event, "start", resourceIndex, $event)
+												}), null, 16, _hoisted_4)) : (0, vue.createCommentVNode)("", true),
+												isResizableEvent(entry.event) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+													key: 1,
+													ref_for: true
+												}, (0, vue.unref)(getStyles)("resourcesMonthViewResizeHandle"), {
+													"data-edge": "end",
+													"data-active": isResizingEvent(entry.event) && resizeState.value?.edge === "end" || void 0,
+													onPointerdown: ($event) => handleResizeStart(entry.event, "end", resourceIndex, $event)
+												}), null, 16, _hoisted_5)) : (0, vue.createCommentVNode)("", true)
+											]),
+											_: 2
+										}, 1040, ["style", "data-resizing"]);
 									}), 128)),
 									((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(rowLayouts.value[resourceIndex].segments, (segment) => {
-										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
-											key: `${segment.event.id}-${segment.start}`,
-											event: segment.event,
-											hanging: segment.hanging,
-											"auto-size": "",
-											nowrap: "",
-											radius: (0, vue.unref)(props).radius,
-											mode: (0, vue.unref)(props).mode,
-											draggable: isDraggableEvent(segment.event),
-											style: segmentStyle(segment)
-										}, { ref_for: true }, {
-											...eventRenderers.value,
-											...stylesApi.value
-										}, {
-											onEventDragStart: dragStart,
-											onEventDragEnd: dragEnd,
-											onClick: ($event) => isStatic.value ? void 0 : emit("eventClick", segment.event, $event)
-										}), null, 16, [
-											"event",
-											"hanging",
-											"radius",
-											"mode",
-											"draggable",
-											"style",
-											"onClick"
-										]);
+										return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_mantine_vue_core.Box), (0, vue.mergeProps)({ key: `${segment.event.id}-${segment.start}` }, { ref_for: true }, (0, vue.unref)(getStyles)("resourcesMonthViewEventWrapper"), {
+											style: eventWrapperStyle(segment.event, segmentStyle(segment)),
+											"data-resizing": isResizingEvent(segment.event) || void 0
+										}), {
+											default: (0, vue.withCtx)(() => [
+												(0, vue.createVNode)((0, vue.unref)(ScheduleEvent), (0, vue.mergeProps)({
+													event: segment.event,
+													hanging: segment.hanging,
+													"auto-size": "",
+													nowrap: "",
+													radius: (0, vue.unref)(props).radius,
+													mode: (0, vue.unref)(props).mode,
+													draggable: isDraggableEvent(segment.event),
+													"is-resizing": isResizingEvent(segment.event),
+													style: {
+														"width": "100%",
+														"height": "100%"
+													}
+												}, { ref_for: true }, {
+													...eventRenderers.value,
+													...stylesApi.value
+												}, {
+													onEventDragStart: dragStart,
+													onEventDragEnd: dragEnd,
+													onClick: ($event) => emitEventClick(segment.event, $event)
+												}), null, 16, [
+													"event",
+													"hanging",
+													"radius",
+													"mode",
+													"draggable",
+													"is-resizing",
+													"onClick"
+												]),
+												isResizableEvent(segment.event) && segment.hanging !== "start" && segment.hanging !== "both" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+													key: 0,
+													ref_for: true
+												}, (0, vue.unref)(getStyles)("resourcesMonthViewResizeHandle"), {
+													"data-edge": "start",
+													"data-active": isResizingEvent(segment.event) && resizeState.value?.edge === "start" || void 0,
+													onPointerdown: ($event) => handleResizeStart(segment.event, "start", resourceIndex, $event)
+												}), null, 16, _hoisted_6)) : (0, vue.createCommentVNode)("", true),
+												isResizableEvent(segment.event) && segment.hanging !== "end" && segment.hanging !== "both" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+													key: 1,
+													ref_for: true
+												}, (0, vue.unref)(getStyles)("resourcesMonthViewResizeHandle"), {
+													"data-edge": "end",
+													"data-active": isResizingEvent(segment.event) && resizeState.value?.edge === "end" || void 0,
+													onPointerdown: ($event) => handleResizeStart(segment.event, "end", resourceIndex, $event)
+												}), null, 16, _hoisted_7)) : (0, vue.createCommentVNode)("", true)
+											]),
+											_: 2
+										}, 1040, ["style", "data-resizing"]);
 									}), 128)),
 									((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(cellsWithHiddenEvents(resourceIndex), (entry) => {
 										return (0, vue.renderSlot)(_ctx.$slots, "moreEvents", {
@@ -8601,7 +9111,7 @@ var ResourcesMonthView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					_: 3
 				}, 16)]),
 				_: 3
-			}, 16, ["data-event-interaction"]);
+			}, 16, ["data-event-interaction", "data-resizing"]);
 		};
 	}
 });
@@ -8656,6 +9166,10 @@ var ResourcesSchedule_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		recurrenceExpansionLimit: { default: void 0 },
 		dayViewProps: { default: void 0 },
 		weekViewProps: { default: void 0 },
@@ -8742,6 +9256,7 @@ var ResourcesSchedule_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			canDragEvent: props.canDragEvent,
 			withDragSlotSelect: props.withDragSlotSelect,
 			recurrenceExpansionLimit: props.recurrenceExpansionLimit,
+			withInteractiveBackgroundEvents: isStatic.value ? false : props.withInteractiveBackgroundEvents,
 			onDateChange: setCurrentDate,
 			onViewChange: changeView,
 			onEventDrop: (data) => emit("eventDrop", data),
@@ -8775,6 +9290,9 @@ var ResourcesSchedule_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				};
 				case "month": return {
 					...sharedProps.value,
+					withEventResize: isStatic.value ? false : props.withEventResize,
+					canResizeEvent: props.canResizeEvent,
+					onEventResize: (data) => emit("eventResize", data),
 					onDayClick: (data) => emit("dayClick", data),
 					...props.monthViewProps
 				};
@@ -8830,6 +9348,7 @@ exports.ResourcesMonthView = ResourcesMonthView;
 exports.ResourcesSchedule = ResourcesSchedule;
 exports.ResourcesWeekView = ResourcesWeekView;
 exports.Schedule = Schedule;
+exports.ScheduleBackgroundEvent = ScheduleBackgroundEvent_default;
 exports.ScheduleEvent = ScheduleEvent;
 exports.ScheduleHeader = ScheduleHeader;
 exports.ScheduleHeaderBase = ScheduleHeaderBase;