@mantine-vue/schedule 3.2.0 → 3.4.0

package/esm/index.mjs

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import isoWeek from "dayjs/plugin/isoWeek.js";
 import * as rruleAll from "rrule";
-import { AccordionChevron, Box, Modal, NativeSelect, Popover, ScrollArea, Text, UnstyledButton, createScopedKeydownHandler, createVarsResolver, factory, getThemeColor, useDirection, useProps, useSafeMantineTheme, useStyles } from "@mantine-vue/core";
+import { AccordionChevron, Box, Modal, NativeSelect, Popover, ScrollArea, Text, UnstyledButton, createScopedKeydownHandler, createVarsResolver, factory, getThemeColor, useDirection, useMantineTheme, useProps, useSafeMantineTheme, useStyles } from "@mantine-vue/core";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useSlots, watch, withCtx, withModifiers } from "vue";
 import { useUncontrolled } from "@mantine-vue/hooks";
 //#region src/labels.ts
@@ -338,12 +338,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: dayjs(event.start).valueOf(),
+		endTimestamp: dayjs(event.end).valueOf()
+	};
+	timestampsCache.set(event, next);
+	return next;
+}
 /** Returns true if two events overlap in time */
 function isEventsOverlap(event1, event2) {
-	const start1 = dayjs(event1.start).valueOf();
-	const end1 = dayjs(event1.end).valueOf();
-	const start2 = dayjs(event2.start).valueOf();
-	return start1 < dayjs(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
@@ -437,13 +449,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 = dayjs(draggedEvent.end).diff(dayjs(draggedEvent.start), "millisecond");
 	const parsedTime = parseTimeString(targetSlotTime);
-	const baseTargetTime = dayjs(targetDate).startOf("day").hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
+	const targetDay = dayjs(targetDate).startOf("day");
+	const baseTargetTime = targetDay.hour(parsedTime.hours).minute(parsedTime.minutes).second(0);
 	let finalTargetTime = baseTargetTime;
-	if (mouseYOffset > 0 && slotHeight > 0) {
-		const offsetRatio = mouseYOffset / slotHeight;
+	const offset = slotOffset ?? mouseYOffset;
+	const size = slotSize ?? slotHeight;
+	if (dragIntervalMinutes != null) {
+		const clampedDrag = clampIntervalMinutes(dragIntervalMinutes);
+		const gridInterval = clampIntervalMinutes(intervalMinutes);
+		const rawStartMinutes = parsedTime.hours * 60 + parsedTime.minutes + (size > 0 ? offset / size : 0) * gridInterval;
+		let snappedStartMinutes = Math.round(rawStartMinutes / clampedDrag) * clampedDrag;
+		const parsedEnd = endTime ? parseTimeString(endTime) : null;
+		const parsedStart = startTime ? parseTimeString(startTime) : null;
+		const maxStart = parsedEnd ? Math.floor((parsedEnd.hours * 60 + parsedEnd.minutes - 1) / clampedDrag) * clampedDrag : null;
+		const minStart = parsedStart ? Math.ceil((parsedStart.hours * 60 + parsedStart.minutes) / clampedDrag) * clampedDrag : null;
+		if (minStart !== null && maxStart !== null && minStart > maxStart) snappedStartMinutes = parsedStart.hours * 60 + parsedStart.minutes;
+		else {
+			if (maxStart !== null) snappedStartMinutes = Math.min(snappedStartMinutes, maxStart);
+			if (minStart !== null) snappedStartMinutes = Math.max(snappedStartMinutes, minStart);
+		}
+		const dayOffset = Math.floor(snappedStartMinutes / 1440);
+		const minutesInDay = snappedStartMinutes - dayOffset * 1440;
+		finalTargetTime = targetDay.add(dayOffset, "day").hour(Math.floor(minutesInDay / 60)).minute(minutesInDay % 60).second(0);
+	} else if (offset > 0 && size > 0) {
+		const offsetRatio = offset / size;
 		const offsetMinutes = Math.round(offsetRatio * intervalMinutes);
 		finalTargetTime = baseTargetTime.add(offsetMinutes, "minute");
 	}
@@ -519,6 +551,18 @@ function getExdateSet(recurrence) {
 	const values = recurrence.exdate.map((value) => dayjs(value)).filter((value) => value.isValid()).map((value) => value.format("YYYY-MM-DD HH:mm:ss"));
 	return new Set(values);
 }
+function toWallClockDate(value) {
+	return new Date(Date.UTC(value.year(), value.month(), value.date(), value.hour(), value.minute(), value.second(), value.millisecond()));
+}
+function fromWallClockDate(value) {
+	const result = new Date(2e3, 0, 1, 12);
+	result.setFullYear(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate());
+	result.setHours(value.getUTCHours(), value.getUTCMinutes(), value.getUTCSeconds(), value.getUTCMilliseconds());
+	return dayjs(result);
+}
+function getWallClockDurationMs(start, end) {
+	return toWallClockDate(end).getTime() - toWallClockDate(start).getTime();
+}
 function getRRuleString(rule) {
 	const normalized = rule.trim();
 	if (!normalized.includes("\n")) return normalized.startsWith("RRULE:") ? normalized.replace(/^RRULE:/, "") : normalized;
@@ -530,10 +574,10 @@ function getOccurrenceStartsInRange(event, rangeStart, rangeEnd, expansionLimit,
 	if (!dtstart.isValid() || !event.recurrence) return [];
 	try {
 		const options = RRule.parseString(getRRuleString(event.recurrence.rrule));
-		options.dtstart = dtstart.toDate();
+		options.dtstart = toWallClockDate(dtstart);
 		const rule = new RRule(options);
-		const searchStart = rangeStart.subtract(Math.max(0, durationMs), "millisecond").toDate();
-		return rule.between(searchStart, rangeEnd.toDate(), true).slice(0, expansionLimit).map((value) => dayjs(value));
+		const searchStart = new Date(toWallClockDate(rangeStart).getTime() - Math.max(0, durationMs));
+		return rule.between(searchStart, toWallClockDate(rangeEnd), true).slice(0, expansionLimit);
 	} catch {
 		return [];
 	}
@@ -544,8 +588,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 {
@@ -591,11 +634,12 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 		const eventStart = dayjs(event.recurrence?.dtstart || event.start);
 		const eventEnd = dayjs(event.end);
 		if (!eventStart.isValid() || !eventEnd.isValid()) continue;
-		const durationMs = eventEnd.diff(dayjs(event.start), "millisecond");
+		const durationMs = getWallClockDurationMs(dayjs(event.start), eventEnd);
 		if (durationMs < 0) continue;
 		const exdate = getExdateSet(event.recurrence);
 		const starts = getOccurrenceStartsInRange(event, start, end, expansionLimit, durationMs);
-		for (const occurrenceStart of starts) {
+		for (const wallClockStart of starts) {
+			const occurrenceStart = fromWallClockDate(wallClockStart);
 			const recurrenceId = occurrenceStart.format("YYYY-MM-DD HH:mm:ss");
 			if (exdate.has(recurrenceId)) continue;
 			const overrideKey = getRecurrenceKey(event.id, recurrenceId);
@@ -607,7 +651,7 @@ function expandRecurringEvents({ events, rangeStart, rangeEnd, expansionLimit =
 				}
 				continue;
 			}
-			const generated = createGeneratedInstance(event, occurrenceStart, durationMs);
+			const generated = createGeneratedInstance(event, occurrenceStart, fromWallClockDate(new Date(wallClockStart.getTime() + durationMs)));
 			if (overlapsRange(dayjs(generated.start), dayjs(generated.end), start, end)) output.push(validateEvent(generated));
 		}
 	}
@@ -931,7 +975,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 = {
@@ -1554,6 +1598,90 @@ var MoreEvents = factory(/* @__PURE__ */ defineComponent({
 	}
 }), { classes: MoreEvents_module_default });
 //#endregion
+//#region src/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.vue
+var ScheduleBackgroundEvent_default = /* @__PURE__ */ 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 = useAttrs();
+		const slots = useSlots();
+		const theme = useMantineTheme();
+		const dragPassthrough = 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 });
+		};
+		onBeforeUnmount(() => {
+			document.removeEventListener("dragend", resetDragPassthrough);
+			document.removeEventListener("drop", resetDragPassthrough);
+			document.removeEventListener("pointermove", resetDragPassthrough);
+		});
+		const rootProps = 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 ? UnstyledButton : Box;
+			if (props.renderEvent) return props.renderEvent(props.event, {
+				...rootProps.value,
+				children: content()
+			});
+			return h(component, rootProps.value, { default: content });
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(render);
+		};
+	}
+});
+//#endregion
 //#region src/components/ScheduleHeader/ScheduleHeader.context.ts
 var ScheduleHeaderLabelsKey = Symbol("mantine-schedule-header-labels");
 /**
@@ -2487,6 +2615,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.
 *
@@ -2533,10 +2678,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
@@ -2727,17 +2872,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
@@ -2783,6 +2928,8 @@ var DayView = factory(/* @__PURE__ */ 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
@@ -2838,6 +2985,10 @@ var DayView = factory(/* @__PURE__ */ 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 },
@@ -2924,6 +3075,7 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -2989,7 +3141,11 @@ var DayView = factory(/* @__PURE__ */ 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);
@@ -3101,7 +3257,21 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
 							}, 1040);
 						}), 128))], 16), createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("dayViewSlots"))), [unref(props).withAllDaySlot ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, unref(getStyles)("dayViewAllDay"))), [
 							(openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents.value.backgroundAllDayEvents, (event) => {
-								return openBlock(), createElementBlock("div", mergeProps({ key: event.id }, { ref_for: true }, unref(staticStyles)("dayViewBackgroundEvent")), null, 16);
+								return openBlock(), createBlock(unref(ScheduleBackgroundEvent_default), mergeProps({
+									key: event.id,
+									event,
+									interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...unref(staticStyles)("dayViewBackgroundEvent")
+								}, {
+									style: {
+										top: 0,
+										height: "100%",
+										width: "100%"
+									},
+									onEventClick: clickEvent
+								}), null, 16, ["event", "interactive"]);
 							}), 128)),
 							createElementVNode("div", normalizeProps(guardReactiveProps(unref(getStyles)("dayViewAllDayEvents"))), [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleAllDayEvents.value, (event) => {
 								return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
@@ -3163,7 +3333,21 @@ var DayView = factory(/* @__PURE__ */ defineComponent({
 							onDrop: _cache[7] || (_cache[7] = ($event) => withDragHandlers.value ? handleGridDrop($event) : void 0)
 						}), [
 							(openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents.value.backgroundTimedEvents, (event) => {
-								return openBlock(), createElementBlock("div", mergeProps({ key: event.id }, { ref_for: true }, unref(staticStyles)("dayViewBackgroundEvent"), { style: backgroundEventStyle(event.position) }), null, 16);
+								return openBlock(), createBlock(unref(ScheduleBackgroundEvent_default), mergeProps({
+									key: event.id,
+									event,
+									interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...unref(staticStyles)("dayViewBackgroundEvent")
+								}, {
+									style: backgroundEventStyle(event.position),
+									onEventClick: clickEvent
+								}), null, 16, [
+									"event",
+									"interactive",
+									"style"
+								]);
 							}), 128)),
 							(openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents.value.regularEvents, (event) => {
 								return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
@@ -3401,6 +3585,7 @@ var MobileMonthView = factory(/* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -3930,16 +4115,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
@@ -4050,6 +4235,10 @@ var MonthView = factory(/* @__PURE__ */ 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 },
@@ -4220,6 +4409,10 @@ var MonthView = factory(/* @__PURE__ */ 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 openBlock(), createBlock(unref(Box), mergeProps({
@@ -4336,7 +4529,23 @@ var MonthView = factory(/* @__PURE__ */ defineComponent({
 									"mode"
 								])) : createCommentVNode("", true)], 16, _hoisted_1$5);
 							}), 128)),
-							createElementVNode("div", mergeProps({ ref_for: true }, unref(getStyles)("monthViewEvents")), [(openBlock(true), createElementBlock(Fragment, null, renderList(weekSegments.value[weekIndex], (segment) => {
+							createElementVNode("div", mergeProps({ ref_for: true }, unref(getStyles)("monthViewEvents")), [(openBlock(true), createElementBlock(Fragment, null, renderList(grouped.value.backgroundByWeek[String(weekIndex)] || [], (event) => {
+								return openBlock(), createBlock(unref(ScheduleBackgroundEvent_default), mergeProps({
+									key: `background-${event.id}-${weekIndex}`,
+									event,
+									interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+								}, { ref_for: true }, {
+									...eventRenderers.value,
+									...unref(staticStyles)("monthViewBackgroundEvent")
+								}, {
+									style: backgroundSegmentStyle(event.position),
+									onEventClick: clickEvent
+								}), null, 16, [
+									"event",
+									"interactive",
+									"style"
+								]);
+							}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(weekSegments.value[weekIndex], (segment) => {
 								return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
 									key: segment.key,
 									event: segment.event,
@@ -4478,17 +4687,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;
 	});
 }
@@ -4622,12 +4827,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
@@ -4713,27 +4920,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
@@ -4825,6 +5032,8 @@ var WeekView = factory(/* @__PURE__ */ 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
@@ -4876,6 +5085,10 @@ var WeekView = factory(/* @__PURE__ */ 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 },
@@ -5020,6 +5233,7 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -5121,7 +5335,11 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
 		const dropInput = (date) => ({
 			container: daySlotsContainers.get(date),
 			date: dayjs(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));
@@ -5355,7 +5573,21 @@ var WeekView = factory(/* @__PURE__ */ defineComponent({
 												]);
 											}), 128)),
 											(openBlock(true), createElementBlock(Fragment, null, renderList(grouped.value.backgroundEvents[column.date] || [], (event) => {
-												return openBlock(), createElementBlock("div", mergeProps({ key: `background-${event.id}` }, { ref_for: true }, unref(staticStyles)("weekViewBackgroundEvent"), { style: backgroundEventStyle(event.position) }), null, 16);
+												return openBlock(), createBlock(unref(ScheduleBackgroundEvent_default), mergeProps({
+													key: `background-${event.id}`,
+													event,
+													interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+												}, { ref_for: true }, {
+													...eventRenderers.value,
+													...unref(staticStyles)("weekViewBackgroundEvent")
+												}, {
+													style: backgroundEventStyle(event.position),
+													onEventClick: clickEvent
+												}), null, 16, [
+													"event",
+													"interactive",
+													"style"
+												]);
 											}), 128)),
 											(openBlock(true), createElementBlock(Fragment, null, renderList(grouped.value.regularEvents[column.date] || [], (event) => {
 												return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
@@ -5433,18 +5665,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
@@ -5456,6 +5688,7 @@ var defaultProps$5 = {
 	firstDayOfWeek: 1,
 	weekdayFormat: "dd",
 	weekendDays: [0, 6],
+	withWeekendDays: true,
 	withWeekDays: true,
 	highlightToday: true,
 	withOutsideDays: true,
@@ -5475,6 +5708,10 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		weekendDays: { default: void 0 },
+		withWeekendDays: {
+			type: Boolean,
+			default: void 0
+		},
 		withWeekNumbers: { type: Boolean },
 		withWeekDays: {
 			type: Boolean,
@@ -5500,6 +5737,10 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		renderDay: {
+			type: Function,
+			default: void 0
+		},
 		getWeekNumberProps: {
 			type: Function,
 			default: void 0
@@ -5528,6 +5769,7 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		recurrenceExpansionLimit: { default: void 0 },
+		withInteractiveBackgroundEvents: { type: Boolean },
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -5585,7 +5827,13 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 			locale: props.locale || "en",
 			format: props.weekdayFormat,
 			firstDayOfWeek: props.firstDayOfWeek
-		}));
+		}).filter((_, index) => !hiddenWeekendColumns.value.has(index)));
+		const hiddenWeekendColumns = 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 = computed(() => 7 - hiddenWeekendColumns.value.size);
+		const visibleWeek = (week) => props.withWeekendDays === false ? week.filter((date) => !props.weekendDays.includes(dayjs(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.
@@ -5605,11 +5853,11 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 					weeks,
 					offset
 				};
-				offset += weeks.length * 7;
+				offset += weeks.length * columnsCount.value;
 				return entry;
 			});
 		});
-		const totalYearGridCells = computed(() => months.value.reduce((total, { weeks }) => total + weeks.length * 7, 0));
+		const totalYearGridCells = computed(() => months.value.reduce((total, { weeks }) => total + weeks.length * columnsCount.value, 0));
 		const headerControl = computed(() => ({ monthYearSelect: {
 			locale: props.locale,
 			yearValue: year.value.year(),
@@ -5622,13 +5870,13 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 		const dayProps = (date) => props.getDayProps?.(toDateString(date)) ?? {};
 		const weekNumberProps = (weekStart) => props.getWeekNumberProps?.(toDateString(weekStart)) ?? {};
 		const isOutside = (date, month) => !dayjs(date).isSame(month, "month");
-		const dayEvents = (date) => (eventsByDay.value[dayjs(date).format("YYYY-MM-DD")] || []).slice(0, 3);
+		const dayEvents = (date) => eventsByDay.value[dayjs(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;
@@ -5637,10 +5885,17 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 			});
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Box), normalizeProps(guardReactiveProps({
+			return openBlock(), createBlock(unref(Box), mergeProps({
 				...unref(attrs),
 				...unref(getStyles)("yearView")
-			})), {
+			}, {
+				style: [
+					unref(getStyles)("yearView").style,
+					{ "--year-view-columns": columnsCount.value },
+					unref(attrs).style
+				],
+				"data-without-weekend-days": hiddenWeekendColumns.value.size > 0 || void 0
+			}), {
 				default: withCtx(() => [unref(props).withHeader ? (openBlock(), createBlock(unref(ScheduleHeaderBase), mergeProps({
 					key: 0,
 					view: "year",
@@ -5694,7 +5949,7 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 							}, { onClick: ($event) => emit("weekNumberClick", unref(toDateString)(week[0]), $event) }), {
 								default: withCtx(() => [createTextVNode(toDisplayString(unref(getWeekNumber)(week)), 1)]),
 								_: 2
-							}, 1040, ["onClick"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(week, (date, dayIndex) => {
+							}, 1040, ["onClick"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(visibleWeek(week), (date, dayIndex) => {
 								return openBlock(), createElementBlock(Fragment, { key: unref(toDateString)(date) }, [isOutside(date, month) && !unref(props).withOutsideDays ? (openBlock(), createElementBlock("div", mergeProps({
 									key: 0,
 									ref_for: true
@@ -5706,7 +5961,7 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 									...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": unref(props).weekendDays.includes(unref(dayjs)(date).day()) || void 0,
 									"data-today": unref(props).highlightToday && unref(dayjs)(date).isSame(unref(dayjs)(), "day") || void 0,
@@ -5716,15 +5971,18 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 										format: "MMMM D, YYYY"
 									}),
 									tabindex: isStatic.value || isOutside(date, month) ? -1 : unref(dayjs)(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", unref(toDateString)(date), $event)
 								}), {
-									default: withCtx(() => [createTextVNode(toDisplayString(unref(dayjs)(date).date()) + " ", 1), dayEvents(date).length ? (openBlock(), createElementBlock("span", mergeProps({
+									default: withCtx(() => [renderSlot(_ctx.$slots, "day", {
+										date: unref(toDateString)(date),
+										events: dayEvents(date)
+									}, () => [unref(props).renderDay ? (openBlock(), createBlock(resolveDynamicComponent(() => unref(props).renderDay(unref(toDateString)(date), dayEvents(date))), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(dayjs)(date).date()) + " ", 1), dayEvents(date).length ? (openBlock(), createElementBlock("span", mergeProps({
 										key: 0,
 										ref_for: true
-									}, unref(getStyles)("yearViewDayIndicators")), [(openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents(date), (event) => {
+									}, unref(getStyles)("yearViewDayIndicators")), [(openBlock(true), createElementBlock(Fragment, null, renderList(dayEvents(date).slice(0, 3), (event) => {
 										return openBlock(), createElementBlock("span", mergeProps({ key: event.id }, { ref_for: true }, unref(getStyles)("yearViewDayIndicator"), { style: indicatorStyle(event) }), null, 16);
-									}), 128))], 16)) : createCommentVNode("", true)]),
+									}), 128))], 16)) : createCommentVNode("", true)], 64))])]),
 									_: 2
 								}, 1040, [
 									"disabled",
@@ -5741,8 +5999,8 @@ var YearView = factory(/* @__PURE__ */ defineComponent({
 						}), 128))
 					], 16, _hoisted_1$3);
 				}), 128))], 16)]),
-				_: 1
-			}, 16);
+				_: 3
+			}, 16, ["style", "data-without-weekend-days"]);
 		};
 	}
 }), {
@@ -5794,6 +6052,10 @@ var Schedule = factory(/* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		recurrenceExpansionLimit: { default: void 0 },
 		layout: { default: void 0 },
 		dayViewProps: { default: void 0 },
@@ -5880,6 +6142,7 @@ var Schedule = factory(/* @__PURE__ */ defineComponent({
 			withExternalEventDrop: props.withExternalEventDrop,
 			withEventResize: props.withEventResize,
 			canResizeEvent: props.canResizeEvent,
+			withInteractiveBackgroundEvents: props.mode === "static" ? false : props.withInteractiveBackgroundEvents,
 			recurrenceExpansionLimit: props.recurrenceExpansionLimit,
 			...eventRenderers.value,
 			...stylesApi.value
@@ -5979,7 +6242,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,
@@ -6185,27 +6448,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
@@ -6256,6 +6519,8 @@ var ResourcesDayView = factory(/* @__PURE__ */ 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
@@ -6303,6 +6568,10 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		renderResourceLabel: {
 			type: Function,
 			default: void 0
@@ -6459,6 +6728,7 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -6490,9 +6760,8 @@ var ResourcesDayView = factory(/* @__PURE__ */ 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),
@@ -6504,6 +6773,22 @@ var ResourcesDayView = factory(/* @__PURE__ */ 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;
@@ -6762,10 +7047,20 @@ var ResourcesDayView = factory(/* @__PURE__ */ defineComponent({
 													return renderSlot(_ctx.$slots, "backgroundEvent", {
 														key: `bg-${event.id}`,
 														event
-													}, () => [createVNode(unref(Box), mergeProps({ ref_for: true }, unref(getStyles)("resourcesDayViewBackgroundEvent", { style: backgroundEventStyle(event) })), {
-														default: withCtx(() => [eventRenderers.value.renderEventBody ? (openBlock(), createBlock(resolveDynamicComponent(() => eventRenderers.value.renderEventBody(event)), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(event.title), 1)], 64))]),
-														_: 2
-													}, 1040)]);
+													}, () => [createVNode(unref(ScheduleBackgroundEvent_default), mergeProps({
+														event,
+														interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+													}, { ref_for: true }, {
+														...eventRenderers.value,
+														...unref(getStyles)("resourcesDayViewBackgroundEvent")
+													}, {
+														style: backgroundEventStyle(event),
+														onEventClick: clickEvent
+													}), null, 16, [
+														"event",
+														"interactive",
+														"style"
+													])]);
 												}), 128)),
 												(openBlock(true), createElementBlock(Fragment, null, renderList(allDayEvents(resource.id), (event, index) => {
 													return openBlock(), createBlock(unref(Box), mergeProps({
@@ -7013,31 +7308,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
@@ -7093,6 +7388,8 @@ var ResourcesWeekView = factory(/* @__PURE__ */ 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
@@ -7144,6 +7441,10 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		renderResourceLabel: {
 			type: Function,
 			default: void 0
@@ -7326,6 +7627,7 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
 			startTime: () => props.startTime,
 			endTime: () => props.endTime,
 			intervalMinutes: () => props.intervalMinutes,
+			resizeIntervalMinutes: () => props.eventResizeInterval,
 			onEventResize: (data) => emit("eventResize", data),
 			canResizeEvent: () => props.canResizeEvent
 		});
@@ -7367,7 +7669,7 @@ var ResourcesWeekView = factory(/* @__PURE__ */ 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),
@@ -7379,6 +7681,22 @@ var ResourcesWeekView = factory(/* @__PURE__ */ 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;
@@ -7681,10 +7999,20 @@ var ResourcesWeekView = factory(/* @__PURE__ */ defineComponent({
 														key: `bg-${entry.day}-${entry.event.id}`,
 														event: entry.event,
 														date: entry.day
-													}, () => [createVNode(unref(Box), mergeProps({ ref_for: true }, unref(getStyles)("resourcesWeekViewBackgroundEvent", { style: backgroundEventStyle(entry.event, entry.dayIndex) })), {
-														default: withCtx(() => [eventRenderers.value.renderEventBody ? (openBlock(), createBlock(resolveDynamicComponent(() => eventRenderers.value.renderEventBody(entry.event)), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(entry.event.title), 1)], 64))]),
-														_: 2
-													}, 1040)]);
+													}, () => [createVNode(unref(ScheduleBackgroundEvent_default), mergeProps({
+														event: entry.event,
+														interactive: Boolean(unref(props).withInteractiveBackgroundEvents) && !isStatic.value
+													}, { ref_for: true }, {
+														...eventRenderers.value,
+														...unref(getStyles)("resourcesWeekViewBackgroundEvent")
+													}, {
+														style: backgroundEventStyle(entry.event, entry.dayIndex),
+														onEventClick: clickEvent
+													}), null, 16, [
+														"event",
+														"interactive",
+														"style"
+													])]);
 												}), 128)),
 												(openBlock(true), createElementBlock(Fragment, null, renderList(allDayBars(resource.id), (bar) => {
 													return openBlock(), createBlock(unref(Box), mergeProps({
@@ -7949,27 +8277,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],
@@ -7981,7 +8315,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 = [
@@ -8059,6 +8394,14 @@ var ResourcesMonthView = factory(/* @__PURE__ */ 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 },
@@ -8081,7 +8424,8 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 		"eventDragStart",
 		"eventDragEnd",
 		"slotDragEnd",
-		"externalEventDrop"
+		"externalEventDrop",
+		"eventResize"
 	],
 	setup(__props, { emit: __emit }) {
 		const rawProps = __props;
@@ -8089,6 +8433,7 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 		const slots = useSlots();
 		const attrs = useAttrs();
 		const props = useProps("ResourcesMonthView", defaultProps$1, rawProps);
+		const theme = useSafeMantineTheme();
 		const getStyles = useStyles({
 			name: "ResourcesMonthView",
 			props,
@@ -8138,9 +8483,19 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 			rangeEnd: month.value.endOf("month").toDate(),
 			expansionLimit: props.recurrenceExpansionLimit
 		}));
+		const resizeState = shallowRef(null);
+		let justResized = false;
+		const effectiveEvents = 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 = computed(() => ordered.value.orderedResources.map((resource) => getResourcesMonthViewLayout({
 			days: days.value,
-			events: expandedEvents.value,
+			events: effectiveEvents.value,
 			resourceId: resource.id,
 			maxRows: maxRows.value
 		})));
@@ -8310,6 +8665,106 @@ var ResourcesMonthView = factory(/* @__PURE__ */ 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 = dayjs(event.start);
+			const originalEnd = dayjs(event.end);
+			const target = dayjs(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 = dayjs(event.start).format("YYYY-MM-DD HH:mm:ss");
+			const end = dayjs(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);
+		};
+		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) => {
@@ -8318,7 +8773,8 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 				...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: withCtx(() => [unref(props).withHeader ? renderSlot(_ctx.$slots, "header", {
 					key: 0,
@@ -8404,58 +8860,112 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 									onDrop: ($event) => withDragHandlers.value ? handleRowDrop($event, resource, resourceIndex) : void 0
 								}), [
 									(openBlock(true), createElementBlock(Fragment, null, renderList(singleDayEvents(resourceIndex), (entry) => {
-										return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
-											key: `${entry.event.id}-${entry.dayIndex}`,
-											event: entry.event,
-											"auto-size": "",
-											nowrap: "",
-											radius: unref(props).radius,
-											mode: 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 openBlock(), createBlock(unref(Box), mergeProps({ key: `${entry.event.id}-${entry.dayIndex}` }, { ref_for: true }, unref(getStyles)("resourcesMonthViewEventWrapper"), {
+											style: eventWrapperStyle(entry.event, singleEventStyle(entry)),
+											"data-resizing": isResizingEvent(entry.event) || void 0
+										}), {
+											default: withCtx(() => [
+												createVNode(unref(ScheduleEvent), mergeProps({
+													event: entry.event,
+													"auto-size": "",
+													nowrap: "",
+													radius: unref(props).radius,
+													mode: 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) ? (openBlock(), createElementBlock("div", mergeProps({
+													key: 0,
+													ref_for: true
+												}, 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)) : createCommentVNode("", true),
+												isResizableEvent(entry.event) ? (openBlock(), createElementBlock("div", mergeProps({
+													key: 1,
+													ref_for: true
+												}, 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)) : createCommentVNode("", true)
+											]),
+											_: 2
+										}, 1040, ["style", "data-resizing"]);
 									}), 128)),
 									(openBlock(true), createElementBlock(Fragment, null, renderList(rowLayouts.value[resourceIndex].segments, (segment) => {
-										return openBlock(), createBlock(unref(ScheduleEvent), mergeProps({
-											key: `${segment.event.id}-${segment.start}`,
-											event: segment.event,
-											hanging: segment.hanging,
-											"auto-size": "",
-											nowrap: "",
-											radius: unref(props).radius,
-											mode: 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 openBlock(), createBlock(unref(Box), mergeProps({ key: `${segment.event.id}-${segment.start}` }, { ref_for: true }, unref(getStyles)("resourcesMonthViewEventWrapper"), {
+											style: eventWrapperStyle(segment.event, segmentStyle(segment)),
+											"data-resizing": isResizingEvent(segment.event) || void 0
+										}), {
+											default: withCtx(() => [
+												createVNode(unref(ScheduleEvent), mergeProps({
+													event: segment.event,
+													hanging: segment.hanging,
+													"auto-size": "",
+													nowrap: "",
+													radius: unref(props).radius,
+													mode: 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" ? (openBlock(), createElementBlock("div", mergeProps({
+													key: 0,
+													ref_for: true
+												}, 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)) : createCommentVNode("", true),
+												isResizableEvent(segment.event) && segment.hanging !== "end" && segment.hanging !== "both" ? (openBlock(), createElementBlock("div", mergeProps({
+													key: 1,
+													ref_for: true
+												}, 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)) : createCommentVNode("", true)
+											]),
+											_: 2
+										}, 1040, ["style", "data-resizing"]);
 									}), 128)),
 									(openBlock(true), createElementBlock(Fragment, null, renderList(cellsWithHiddenEvents(resourceIndex), (entry) => {
 										return renderSlot(_ctx.$slots, "moreEvents", {
@@ -8536,7 +9046,7 @@ var ResourcesMonthView = factory(/* @__PURE__ */ defineComponent({
 					_: 3
 				}, 16)]),
 				_: 3
-			}, 16, ["data-event-interaction"]);
+			}, 16, ["data-event-interaction", "data-resizing"]);
 		};
 	}
 }), {
@@ -8588,6 +9098,10 @@ var ResourcesSchedule = factory(/* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		withInteractiveBackgroundEvents: {
+			type: Boolean,
+			default: void 0
+		},
 		recurrenceExpansionLimit: { default: void 0 },
 		dayViewProps: { default: void 0 },
 		weekViewProps: { default: void 0 },
@@ -8674,6 +9188,7 @@ var ResourcesSchedule = factory(/* @__PURE__ */ 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),
@@ -8707,6 +9222,9 @@ var ResourcesSchedule = factory(/* @__PURE__ */ 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
 				};
@@ -8745,6 +9263,6 @@ var ResourcesSchedule = factory(/* @__PURE__ */ defineComponent({
 	}
 }), { classes: ResourcesSchedule_module_default });
 //#endregion
-export { CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, HeaderControl, MobileMonthView, MonthView, MonthYearSelect, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleEvent, ScheduleHeader, ScheduleHeaderBase, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday, ViewSelect, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, compareMonthEvents, createHeaderNavigation, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayPositionedEvents, getDayTimeIntervals, getDayViewEvents, getEndOfWeek, getGroupToResourceIdMap, getLabel, getMonthDays, getMonthPositionedEvents, getMonthRange, getMonthViewEvents, getMonthsByQuarter, getMonthsList, getOrderedResources, getOverlapClusters, getRenderableMonthEventSegments, getResourcesDayViewEvents, getResourcesMonthViewLayout, getResourcesWeekViewEvents, getStartOfWeek, getVisibleEvents, getWeekDays, getWeekLabel, getWeekNumber, getWeekPositionedEvents, getWeekViewEvents, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultiDayEvent, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, provideDragContext, provideScheduleDragState, sortEvents, toDateString, toTimeString, useDragContext, useScheduleHeaderLabels, validateEvent };
+export { CurrentTimeIndicator, DEFAULT_SCHEDULE_LABELS, DayView, DragContext, HeaderControl, MobileMonthView, MonthView, MonthYearSelect, MoreEvents, ResourcesDayView, ResourcesMonthView, ResourcesSchedule, ResourcesWeekView, Schedule, ScheduleBackgroundEvent_default as ScheduleBackgroundEvent, ScheduleEvent, ScheduleHeader, ScheduleHeaderBase, ScheduleHeaderNext, ScheduleHeaderPrevious, ScheduleHeaderToday, ViewSelect, WeekView, YearView, calculateDropTime, calculateMonthDropDate, clampIntervalMinutes, compareMonthEvents, createHeaderNavigation, expandRecurringEvents, formatDate, getBusinessHoursMod, getCurrentTimePosition, getDayPosition, getDayPositionedEvents, getDayTimeIntervals, getDayViewEvents, getEndOfWeek, getGroupToResourceIdMap, getLabel, getMonthDays, getMonthPositionedEvents, getMonthRange, getMonthViewEvents, getMonthsByQuarter, getMonthsList, getOrderedResources, getOverlapClusters, getRenderableMonthEventSegments, getResourcesDayViewEvents, getResourcesMonthViewLayout, getResourcesWeekViewEvents, getStartOfWeek, getVisibleEvents, getWeekDays, getWeekLabel, getWeekNumber, getWeekPositionedEvents, getWeekViewEvents, getWeekdaysNames, getYearsList, handleResourcesGridKeyDown, isAfterMinDate, isAllDayEvent, isBeforeMaxDate, isEventInTimeRange, isEventsOverlap, isInTimeRange, isMultiDayEvent, isMultidayEvent, isSameMonth, isWithinWeek, nextWeek, parseTimeString, previousWeek, provideDragContext, provideScheduleDragState, sortEvents, toDateString, toTimeString, useDragContext, useScheduleHeaderLabels, validateEvent };
 
 //# sourceMappingURL=index.mjs.map