Big Calendar

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setCalendarContext, type CalendarEvent, type DateRange } from './ctx';
4	import type { Snippet } from 'svelte';
5 
6	let {
7		class: className,
8		date = $bindable(new Date()),
9		selected = $bindable({ start: undefined, end: undefined }),
10		events = [],
11		weekStartsOn = 1,
12		showWeekends = true,
13		isDateDisabled = () => false,
14		children
15	}: {
16		class?: string;
17		date?: Date;
18		selected?: DateRange;
19		events?: CalendarEvent[];
20		weekStartsOn?: 0 | 1;
21		showWeekends?: boolean;
22		isDateDisabled?: (date: Date) => boolean;
23		children: Snippet;
24	} = $props();
25 
26	let isDragging = $state(false);
27 
28	let layoutMap = $derived.by(() => {
29		const map = new Map<string, number>();
30		const takenSlots = new Map<string, number[]>();
31 
32		const sorted = [...events].sort((a, b) => {
33			const lenA = a.end.getTime() - a.start.getTime();
34			const lenB = b.end.getTime() - b.start.getTime();
35			if (lenA !== lenB) return lenB - lenA;
36			return a.start.getTime() - b.start.getTime();
37		});
38 
39		const getKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
40 
41		for (const ev of sorted) {
42			let s = new Date(ev.start);
43			s.setHours(0, 0, 0, 0);
44			let e = new Date(ev.end);
45			e.setHours(0, 0, 0, 0);
46 
47			let row = 0;
48			let isRowFree = false;
49 
50			while (!isRowFree) {
51				isRowFree = true;
52				let curr = new Date(s);
53				while (curr <= e) {
54					const key = getKey(curr);
55					const taken = takenSlots.get(key) || [];
56					if (taken.includes(row)) {
57						isRowFree = false;
58						break;
59					}
60					curr.setDate(curr.getDate() + 1);
61				}
62				if (!isRowFree) row++;
63			}
64 
65			let curr = new Date(s);
66			while (curr <= e) {
67				const key = getKey(curr);
68				const taken = takenSlots.get(key) || [];
69				taken.push(row);
70				takenSlots.set(key, taken);
71 
72				map.set(`${key}::${ev.id}`, row);
73 
74				curr.setDate(curr.getDate() + 1);
75			}
76		}
77		return map;
78	});
79 
80	function getEventSlot(d: Date, id: string) {
81		const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}::${id}`;
82		return layoutMap.get(key) ?? 0;
83	}
84 
85	function setDate(d: Date) {
86		date = d;
87	}
88 
89	function startSelection(d: Date, e?: MouseEvent) {
90		if (isDateDisabled(d)) return;
91		if (e?.shiftKey && selected.start) {
92			isDragging = false;
93			const currentStart = selected.start;
94			const newEnd = d;
95			selected =
96				newEnd < currentStart
97					? { start: newEnd, end: currentStart }
98					: { start: currentStart, end: newEnd };
99			return;
100		}
101		isDragging = true;
102// … truncated