@nomideusz/svelte-calendar 0.5.2 → 0.6.0

package/dist/views/planner/PlannerDay.svelte

@@ -6,16 +6,16 @@
   Events are positioned as horizontal cards with overlap support.
 -->
 <script lang="ts">
-	import { getContext, onMount, tick, untrack } from 'svelte';
+	import { getContext, onMount, tick, untrack, type Snippet } from 'svelte';
 	import { fly } from 'svelte/transition';
 	import { createClock } from '../../core/clock.svelte.js';
-	import type { TimelineEvent } from '../../core/types.js';
+	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
 	import type { DragState } from '../../engine/drag.svelte.js';
 	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, HOUR_MS, sod } from '../../core/time.js';
 	import { isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
 	import type { DaySegment } from '../../core/time.js';
-	import { fmtH, fmtTime } from '../../core/locale.js';
+	import { fmtH, fmtTime, weekdayShort } from '../../core/locale.js';
 	import { getLabels } from '../../core/locale.js';
 
 	const L = $derived(getLabels());
@@ -62,8 +62,27 @@
 	const commitDragCtx = getContext<() => void>('calendar:commitDrag') as (() => void) | undefined;
 	const snapIntervalCtx = getContext<{ current: number }>('calendar:snapInterval');
 	const viewState = getContext<ViewState>('calendar:viewState') as ViewState | undefined;
+	const loadRangeCtx = getContext<{ current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void }>('calendar:loadRange') as { current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void } | undefined;
 
 	const clock = createClock();
+	const showNavCtx = getContext<{ current: boolean }>('calendar:showNavigation') as { current: boolean } | undefined;
+	const showDatesCtx = getContext<{ current: boolean }>('calendar:showDates') as { current: boolean } | undefined;
+	const showNav = $derived(showNavCtx?.current ?? true);
+	const showDates = $derived(showDatesCtx?.current ?? true);
+
+	// ── New feature contexts ──
+	const blockedSlotsCtx = getContext<{ current: BlockedSlot[] | undefined }>('calendar:blockedSlots') as { current: BlockedSlot[] | undefined } | undefined;
+	const dayHeaderSnippetCtx = getContext<{ current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined }>('calendar:dayHeaderSnippet') as { current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined } | undefined;
+	const minDurationCtx = getContext<{ current: number | undefined }>('calendar:minDuration') as { current: number | undefined } | undefined;
+	const callbacksCtx = getContext<{ oneventhover?: (event: TimelineEvent) => void }>('calendar:callbacks') as { oneventhover?: (event: TimelineEvent) => void } | undefined;
+	const disabledDatesCtx = getContext<{ current: Date[] | undefined }>('calendar:disabledDates') as { current: Date[] | undefined } | undefined;
+
+	const blockedSlots = $derived(blockedSlotsCtx?.current);
+	const dayHeaderSnippet = $derived(dayHeaderSnippetCtx?.current);
+	const minDuration = $derived(minDurationCtx?.current);
+	const oneventhover = $derived(callbacksCtx?.oneventhover);
+	const disabledDates = $derived(disabledDatesCtx?.current);
+	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
 
 	// ─── State ──────────────────────────────────────────
 	let following = $state(true);
@@ -96,16 +115,29 @@
 	const DAY_GAP = 2;
 
 	const dateLabel = $derived(
-		new Date(visibleDayMs).toLocaleDateString(locale ?? 'en-US', {
-			weekday: 'long',
-			month: 'long',
-			day: 'numeric',
-		})
+		showDates
+			? new Date(visibleDayMs).toLocaleDateString(locale ?? 'en-US', {
+				weekday: 'long',
+				month: 'long',
+				day: 'numeric',
+			})
+			: new Date(visibleDayMs).toLocaleDateString(locale ?? 'en-US', {
+				weekday: 'long',
+			})
 	);
 
 	const count = 1 + 2 * BUFFER_DAYS;
 	const origin = $derived(internalCenterMs - BUFFER_DAYS * DAY_MS);
 
+	// ─── Declare load range for entire visible buffer ────────
+	$effect(() => {
+		if (!loadRangeCtx) return;
+		const rangeStart = new Date(internalCenterMs - BUFFER_DAYS * DAY_MS);
+		const rangeEnd = new Date(internalCenterMs + (BUFFER_DAYS + 1) * DAY_MS);
+		loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
+		return () => loadRangeCtx.set(null);
+	});
+
 	// Auto-calculate hourWidth — minimum 60px so hours stay readable.
 	// When 24h × 60px exceeds the container, the timeline scrolls horizontally.
 	const MIN_HOUR_W = 60;
@@ -398,6 +430,15 @@
 	}
 
 	// ─── Click-to-create ────────────────────────────────
+	function isBlockedAt(dayMs: number, hour: number): boolean {
+		if (!blockedSlots?.length) return false;
+		const jsDay = new Date(dayMs).getDay();
+		const isoDay = jsDay === 0 ? 7 : jsDay;
+		return blockedSlots.some(slot => {
+			if (slot.day && slot.day !== isoDay) return false;
+			return hour >= slot.start && hour < slot.end;
+		});
+	}
 	function handleTrackClick(e: MouseEvent) {
 		if (wasDragging) { wasDragging = false; return; }
 		if (!oneventcreate || readOnly) return;
@@ -408,10 +449,16 @@
 
 		for (const d of days) {
 			if (clickX >= d.x && clickX < d.x + dayWidth) {
+				// Check disabled dates
+				if (disabledSet.has(d.ms)) return;
 				const frac = (clickX - d.x) / dayWidth;
-				const hour = Math.floor(startHour + frac * hourCount);
+				const clickHour = startHour + frac * hourCount;
+				// Check blocked slots
+				if (isBlockedAt(d.ms, clickHour)) return;
+				const hour = Math.floor(clickHour);
+				const durMin = minDuration ? Math.max(60, minDuration) : 60;
 				const start = new Date(d.ms + hour * HOUR_MS);
-				const end = new Date(d.ms + (hour + 1) * HOUR_MS);
+				const end = new Date(start.getTime() + durMin * 60_000);
 				oneventcreate({ start, end });
 				return;
 			}
@@ -498,6 +545,7 @@
 					class="fs-day"
 					class:fs-today={d.today}
 					class:fs-past={d.past}
+					class:fs-disabled={disabledSet.has(d.ms)}
 					style:left="{d.x}px"
 					style:width="{dayWidth}px"
 				>
@@ -509,6 +557,37 @@
 						</div>
 						<div class="fs-tick fs-tick--half" style:left="{x + hourWidth * 0.5}px"></div>
 					{/each}
+
+					<!-- Blocked slot overlays -->
+					{#if blockedSlots?.length}
+						{@const jsDay = new Date(d.ms).getDay()}
+						{@const isoDay = jsDay === 0 ? 7 : jsDay}
+						{#each blockedSlots as slot}
+							{#if !slot.day || slot.day === isoDay}
+								{@const s = Math.max(slot.start, startHour)}
+								{@const e = Math.min(slot.end, endHour)}
+								{#if e > s}
+									<div
+										class="fs-blocked"
+										style:left="{(s - startHour) * hourWidth}px"
+										style:width="{(e - s) * hourWidth}px"
+										aria-label={slot.label || 'Unavailable'}
+									>
+										{#if slot.label}
+											<span class="fs-blocked-label">{slot.label}</span>
+										{/if}
+									</div>
+								{/if}
+							{/if}
+						{/each}
+					{/if}
+
+					<!-- Custom day header snippet -->
+					{#if dayHeaderSnippet}
+						<div class="fs-day-header-custom">
+							{@render dayHeaderSnippet({ date: new Date(d.ms), isToday: d.today, dayName: weekdayShort(d.ms, locale) })}
+						</div>
+					{/if}
 				</div>
 			{/each}
 
@@ -534,6 +613,7 @@
 					tabindex="0"
 					aria-label="{p.ev.title}{p.isCurrent ? ` (${L.inProgress})` : ''}"
 					onpointerdown={(e) => onEventPointerDown(e, p.ev)}
+					onpointerenter={() => oneventhover?.(p.ev)}
 					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(p.ev); } }}
 				>
 					<div class="fs-ev-inner">
@@ -589,6 +669,7 @@
 
 	<div class="fs-date-label">{dateLabel}</div>
 
+	{#if showNav}
 	<nav class="fs-nav" aria-label={L.dayNavigation}>
 		<button
 			class="fs-nav-pill fs-nav-today"
@@ -614,6 +695,7 @@
 			<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
 		</button>
 	</nav>
+	{/if}
 </div>
 
 <style>
@@ -662,6 +744,58 @@
 	.fs-today { background: var(--dt-today-bg, rgba(239, 68, 68, 0.025)); }
 	.fs-past { opacity: 0.7; }
 
+	/* ─── Disabled day ───────────────────────────────── */
+	.fs-disabled {
+		opacity: 0.35;
+		background: repeating-linear-gradient(
+			45deg,
+			transparent,
+			transparent 6px,
+			var(--dt-border, rgba(148, 163, 184, 0.07)) 6px,
+			var(--dt-border, rgba(148, 163, 184, 0.07)) 7px
+		) !important;
+	}
+
+	/* ─── Blocked slot overlay ───────────────────────── */
+	.fs-blocked {
+		position: absolute;
+		top: 18px;
+		bottom: 0;
+		z-index: 3;
+		background: repeating-linear-gradient(
+			-45deg,
+			color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(148, 163, 184, 0.85)) 4%, transparent) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+		border-radius: 4px;
+		pointer-events: none;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		padding-bottom: 6px;
+	}
+
+	.fs-blocked-label {
+		font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		white-space: nowrap;
+	}
+
+	/* ─── Custom day header ──────────────────────────── */
+	.fs-day-header-custom {
+		position: absolute;
+		top: 16px;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 4;
+		pointer-events: auto;
+		white-space: nowrap;
+	}
+
 	/* ─── Hour ticks ─────────────────────────────────── */
 	.fs-tick {
 		position: absolute;

package/dist/views/planner/PlannerWeek.svelte

@@ -9,12 +9,11 @@
   • Generous whitespace, thin dividers, minimal chrome.
 -->
 <script lang="ts">
-	import { getContext, onMount, tick, untrack } from 'svelte';
+	import { getContext, onMount, tick, untrack, type Snippet } from 'svelte';
 	import { createClock } from '../../core/clock.svelte.js';
-	import type { TimelineEvent } from '../../core/types.js';
+	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
 	import type { DragState } from '../../engine/drag.svelte.js';
 	import type { ViewState } from '../../engine/view-state.svelte.js';
-	import type { EventStore } from '../../engine/event-store.svelte.js';
 	import { DAY_MS, HOUR_MS, sod } from '../../core/time.js';
 	import { startOfWeek as sowFn, fractionalHour, isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
 	import type { DaySegment } from '../../core/time.js';
@@ -53,9 +52,31 @@
 	const drag = getContext<DragState>('calendar:drag') as DragState | undefined;
 	const commitDragCtx = getContext<() => void>('calendar:commitDrag') as (() => void) | undefined;
 	const viewState = getContext<ViewState>('calendar:viewState') as ViewState | undefined;
-	const storeCtx = getContext<{ current: EventStore }>('calendar:store') as { current: EventStore } | undefined;
+	const loadRangeCtx = getContext<{ current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void }>('calendar:loadRange') as { current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void } | undefined;
 
 	const clock = createClock();
+	const showNavCtx = getContext<{ current: boolean }>('calendar:showNavigation') as { current: boolean } | undefined;
+	const equalDaysCtx = getContext<{ current: boolean }>('calendar:equalDays') as { current: boolean } | undefined;
+	const showDatesCtx = getContext<{ current: boolean }>('calendar:showDates') as { current: boolean } | undefined;
+	const hideDaysCtx = getContext<{ current: number[] | undefined }>('calendar:hideDays') as { current: number[] | undefined } | undefined;
+	const showNav = $derived(showNavCtx?.current ?? true);
+	const equalDays = $derived(equalDaysCtx?.current ?? false);
+	const showDates = $derived(showDatesCtx?.current ?? true);
+	const hideDays = $derived(hideDaysCtx?.current);
+
+	// ── New feature contexts ──
+	const blockedSlotsCtx = getContext<{ current: BlockedSlot[] | undefined }>('calendar:blockedSlots') as { current: BlockedSlot[] | undefined } | undefined;
+	const dayHeaderSnippetCtx = getContext<{ current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined }>('calendar:dayHeaderSnippet') as { current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined } | undefined;
+	const minDurationCtx = getContext<{ current: number | undefined }>('calendar:minDuration') as { current: number | undefined } | undefined;
+	const callbacksCtx = getContext<{ oneventhover?: (event: TimelineEvent) => void }>('calendar:callbacks') as { oneventhover?: (event: TimelineEvent) => void } | undefined;
+	const disabledDatesCtx = getContext<{ current: Date[] | undefined }>('calendar:disabledDates') as { current: Date[] | undefined } | undefined;
+
+	const blockedSlots = $derived(blockedSlotsCtx?.current);
+	const dayHeaderSnippet = $derived(dayHeaderSnippetCtx?.current);
+	const minDuration = $derived(minDurationCtx?.current);
+	const oneventhover = $derived(callbacksCtx?.oneventhover);
+	const disabledDates = $derived(disabledDatesCtx?.current);
+	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
 
 	// ─── Infinite-scroll config ────────────────────────
 	const BUFFER_WEEKS = 6;      // weeks rendered on each side of anchor
@@ -82,18 +103,22 @@
 
 	// ─── Derived ────────────────────────────────────────
 	const todayMs = $derived(clock.today);
-	const anchorWeekStart = $derived(sowFn(internalFocusMs, mondayStart));
-
-	// ─── Preload events for entire visible range ────────
-	// Calendar only loads a single week by default. The planner shows
-	// BUFFER_WEEKS on each side, so we proactively load the full range
-	// so events for non-current weeks are visible immediately.
+	const customDays = $derived(viewState?.dayCount ?? 7);
+	const anchorPeriodStart = $derived(
+		customDays === 7
+			? sowFn(internalFocusMs, mondayStart)
+			: sod(internalFocusMs)
+	);
+
+	// ─── Declare load range for entire visible buffer ────────
+	// Instead of calling store.load() directly, we tell Calendar
+	// what range we need. Calendar's single $effect handles loading.
 	$effect(() => {
-		const store = storeCtx?.current;
-		if (!store) return;
-		const rangeStart = new Date(anchorWeekStart - BUFFER_WEEKS * 7 * DAY_MS);
-		const rangeEnd = new Date(anchorWeekStart + (BUFFER_WEEKS + 1) * 7 * DAY_MS);
-		store.load({ start: rangeStart, end: rangeEnd });
+		if (!loadRangeCtx) return;
+		const rangeStart = new Date(anchorPeriodStart - BUFFER_WEEKS * customDays * DAY_MS);
+		const rangeEnd = new Date(anchorPeriodStart + (BUFFER_WEEKS + 1) * customDays * DAY_MS);
+		loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
+		return () => loadRangeCtx.set(null);
 	});
 
 	// ─── Week data ──────────────────────────────────────
@@ -119,24 +144,20 @@
 
 	const weeks = $derived.by(() => {
 		const result: WeekRow[] = [];
-		const currentWeekStart = sowFn(todayMs, mondayStart);
 
 		for (let w = -BUFFER_WEEKS; w <= BUFFER_WEEKS; w++) {
-			const weekStart = anchorWeekStart + w * 7 * DAY_MS;
-			const isCurrent = weekStart === currentWeekStart;
+			const periodStart = anchorPeriodStart + w * customDays * DAY_MS;
+			const isCurrent = todayMs >= periodStart && todayMs < periodStart + customDays * DAY_MS;
 			const days: DayCell[] = [];
 
-			const firstMonth = new Date(weekStart).getMonth();
-			const lastMonth = new Date(weekStart + 6 * DAY_MS).getMonth();
-
-			for (let d = 0; d < 7; d++) {
-				const ms = weekStart + d * DAY_MS;
+			for (let d = 0; d < customDays; d++) {
+				const ms = periodStart + d * DAY_MS;
 				const date = new Date(ms);
 				const dayNum = date.getDate();
 				const dow = date.getDay();
 				const isWeekend = dow === 0 || dow === 6;
 				const isToday = ms === todayMs;
-				const isPast = ms < todayMs;
+				const isPast = equalDays ? false : ms < todayMs;
 				const isFirstOfMonth = dayNum === 1;
 				const monthLabel = (d === 0 || isFirstOfMonth)
 					? monthLong(ms, locale).toUpperCase()
@@ -162,12 +183,24 @@
 				days.push({ ms, dayNum, isToday, isPast, isWeekend, isFirstOfMonth, monthLabel, events: timedEvents, allDaySegments });
 			}
 
-			// Month label: show when first day of week is day 1-7
-			const startDate = new Date(weekStart);
-			const showMonth = startDate.getDate() <= 7;
-			const monthLabel = showMonth ? monthLong(weekStart, locale).toUpperCase() : null;
+			// Month label: show when first day of period is day 1-7 (for 7-day), or first day of period (for custom)
+			const startDate = new Date(periodStart);
+			const showMonth = customDays === 7 ? startDate.getDate() <= 7 : startDate.getDate() <= customDays;
+			const monthLabel = showMonth ? monthLong(periodStart, locale).toUpperCase() : null;
 
-			result.push({ weekStart, isCurrent, monthLabel, days });
+			result.push({ weekStart: periodStart, isCurrent, monthLabel, days });
+		}
+
+		// Filter hidden days if hideDays is set
+		if (hideDays?.length) {
+			for (const row of result) {
+				row.days = row.days.filter((d) => {
+					const isoDay = new Date(d.ms).getDay();
+					// Convert JS day (0=Sun) to ISO (7=Sun)
+					const iso = isoDay === 0 ? 7 : isoDay;
+					return !hideDays.includes(iso);
+				});
+			}
 		}
 
 		return result;
@@ -239,7 +272,7 @@
 		}
 
 		const shift = SHIFT_WEEKS * direction;
-		internalFocusMs += shift * 7 * DAY_MS;
+		internalFocusMs += shift * customDays * DAY_MS;
 		lastExternalMs = internalFocusMs;
 		viewState?.setFocusDate(new Date(internalFocusMs));
 
@@ -310,8 +343,12 @@
 		const target = e.target as HTMLElement;
 		if (target.closest('.wg-ev')) return;
 		if (readOnly || !oneventcreate) return;
+		// Check disabled dates
+		if (disabledSet.has(ms)) return;
+		// Check blocked slots (all-day block check: if entire day is blocked, prevent)
+		const durMin = minDuration ? Math.max(60, minDuration) : 60;
 		const start = new Date(ms + 9 * HOUR_MS);
-		const end = new Date(ms + 10 * HOUR_MS);
+		const end = new Date(start.getTime() + durMin * 60_000);
 		oneventcreate({ start, end });
 	}
 
@@ -416,8 +453,7 @@
 								class="wg-cell"
 								class:wg-cell--today={day.isToday}
 								class:wg-cell--past={day.isPast}
-								class:wg-cell--weekend={day.isWeekend}
-								role="gridcell"
+								class:wg-cell--weekend={day.isWeekend}							class:wg-cell--disabled={disabledSet.has(day.ms)}								role="gridcell"
 								tabindex="0"
 								aria-label="{new Date(day.ms).toLocaleDateString(locale ?? 'en-US', { weekday: 'long', month: 'short', day: 'numeric' })}{day.isToday ? ` (${L.today.toLowerCase()})` : ''}, {L.nEvents(day.events.length)}"
 								onclick={(e) => handleDayCellClick(day.ms, e)}
@@ -425,16 +461,40 @@
 							>
 								<!-- Day label in top-right corner -->
 								<div class="wg-cell-hd" class:wg-cell-hd--today={day.isToday}>
-									<span class="wg-day-num" class:wg-day-num--today={day.isToday}>
-										{day.dayNum}
-									</span>
+									{#if showDates}
+										<span class="wg-day-num" class:wg-day-num--today={day.isToday}>
+											{day.dayNum}
+										</span>
+									{/if}
 									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 								</div>
 
-								{#if day.monthLabel}
+								{#if day.monthLabel && showDates}
 									<span class="wg-cell-month">{day.monthLabel}</span>
 								{/if}
 
+								<!-- Custom day header snippet -->
+								{#if dayHeaderSnippet}
+									<div class="wg-cell-custom-header">
+										{@render dayHeaderSnippet({ date: new Date(day.ms), isToday: day.isToday, dayName: weekdayShort(day.ms, locale) })}
+									</div>
+								{/if}
+
+								<!-- Blocked slots indicator -->
+								{#if blockedSlots?.length}
+									{@const jsDay = new Date(day.ms).getDay()}
+									{@const isoDay = jsDay === 0 ? 7 : jsDay}
+									{#each blockedSlots as slot}
+										{#if !slot.day || slot.day === isoDay}
+											<div class="wg-blocked" aria-label={slot.label || 'Unavailable'}>
+												{#if slot.label}
+													<span class="wg-blocked-label">{slot.label}</span>
+												{/if}
+											</div>
+										{/if}
+									{/each}
+								{/if}
+
 								<!-- All-day / multi-day events -->
 								{#if day.allDaySegments.length > 0}
 									<div class="wg-allday">
@@ -478,8 +538,7 @@
 											role="button"
 											tabindex="0"
 											aria-label="{ev.title}{ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick ? ` (${L.inProgress})` : ''}"
-											onpointerdown={(e) => onEventPointerDown(e, ev)}
-
+											onpointerdown={(e) => onEventPointerDown(e, ev)}										onpointerenter={() => oneventhover?.(ev)}
 											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 										>
 											<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
@@ -498,7 +557,7 @@
 		{/each}
 	</div>
 
-	{#if scrolled}
+	{#if showNav && scrolled}
 		<nav class="wg-nav" aria-label={L.weekNavigation}>
 			<button
 				class="wg-nav-pill"
@@ -590,8 +649,54 @@
 	.wg-week--current .wg-cell--past { opacity: 0.8; }
 	.wg-week--current .wg-cell--past:hover { opacity: 0.9; }
 
+	/* equalDays: when no cells are marked past, all are full brightness */
+
 	.wg-cell--weekend { background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012)); }
 
+	/* ─── Disabled cell ──────────────────────────────── */
+	.wg-cell--disabled {
+		opacity: 0.35;
+		pointer-events: none;
+		background: repeating-linear-gradient(
+			45deg,
+			transparent,
+			transparent 6px,
+			var(--dt-border, rgba(0, 0, 0, 0.06)) 6px,
+			var(--dt-border, rgba(0, 0, 0, 0.06)) 7px
+		) !important;
+	}
+
+	/* ─── Blocked slot indicator ─────────────────────── */
+	.wg-blocked {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		padding: 2px 4px;
+		border-radius: 3px;
+		background: repeating-linear-gradient(
+			-45deg,
+			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent) 3px,
+			transparent 3px,
+			transparent 6px
+		);
+		margin-bottom: 2px;
+		min-height: 14px;
+	}
+
+	.wg-blocked-label {
+		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		white-space: nowrap;
+	}
+
+	/* ─── Custom day header ──────────────────────────── */
+	.wg-cell-custom-header {
+		padding: 0 4px 2px;
+	}
+
 	/* ─── Cell header (day label top-right) ──────────── */
 	.wg-cell-hd {
 		display: flex;

package/dist/widget/CalendarWidget.svelte

@@ -15,17 +15,11 @@
 -->
 <script lang="ts">
 	import Calendar from '../calendar/Calendar.svelte';
-	import type { CalendarView } from '../calendar/Calendar.svelte';
-	import { Planner } from '../views/planner/index.js';
-	import { Agenda } from '../views/agenda/index.js';
 	import { createRestAdapter } from '../adapters/rest.js';
 	import { createMemoryAdapter } from '../adapters/memory.js';
 	import { presets } from '../theme/presets.js';
 	import type { PresetName } from '../theme/presets.js';
 	import type { TimelineEvent } from '../core/types.js';
-	import { getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
 
 	interface Props {
 		/** REST API base URL — if provided, fetches events from this endpoint */
@@ -64,7 +58,7 @@
 	const heightPx = $derived(parseInt(height, 10) || 600);
 	const isMondayStart = $derived(mondaystart !== 'false');
 	const themeStyle = $derived(
-		(presets as Record<string, string>)[theme] ?? presets.neutral
+		(presets as Record<string, string>)[theme] || presets.neutral
 	);
 	const dirValue = $derived(
 		(dir === 'rtl' || dir === 'ltr' || dir === 'auto') ? dir as 'ltr' | 'rtl' | 'auto' : undefined
@@ -135,20 +129,11 @@
 		}
 		return createMemoryAdapter(parseEvents(events));
 	});
-
-	// ── Default views ──
-	const defaultViews: CalendarView[] = $derived([
-		{ id: 'day-planner',     label: L.planner,  granularity: 'day',  component: Planner, props: { mode: 'day' } },
-		{ id: 'week-planner',    label: L.planner,  granularity: 'week', component: Planner, props: { mode: 'week' } },
-		{ id: 'day-agenda',   label: L.agenda,   granularity: 'day',  component: Agenda, props: { mode: 'day' } },
-		{ id: 'week-agenda',  label: L.agenda,   granularity: 'week', component: Agenda, props: { mode: 'week' } },
-	]);
 </script>
 
 <Calendar
 	{adapter}
-	views={defaultViews}
-	defaultView={view}
+	{view}
 	theme={themeStyle}
 	height={heightPx}
 	mondayStart={isMondayStart}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.5.2",
+	"version": "0.6.0",
 	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
 	"type": "module",
 	"license": "MIT",
@@ -43,6 +43,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@types/node": "^22.0.0",
 		"@vercel/analytics": "^1.6.1",
+		"jsdom": "^28.1.0",
 		"marked": "^17.0.3",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.3.6",