Custom Views & Layouts

<!-- Registered per scheduler. Same name as a built-in: yours replaces it and
     keeps its place in the switcher. A view named in the view prop that is not
     registered throws when it renders. -->
<Scheduler
  bind:events
  views={[workWeek, board]}          // ViewDefinition[]
  layouts={[boardLayout]}            // LayoutStrategy[]
  view="workweek"
/>

interface ViewDefinition<T> {
  name: string;                                           // the value of the view prop, the tab's key
  label?: string;                                         // the tab's text; built-in names fall back to labels
  range: (anchor, context) => DateRange;                  // what is on screen; end exclusive
  step: (anchor, direction: 1 | -1, context) => ZonedDateTime;   // the arrows and Page keys
  layout: string;                                         // 'time-grid', 'month-grid', 'list' or one of yours
  columnsPerRow?: number;                                 // for month-grid layouts: 7 for weeks
  title?: (anchor, range, context) => string;             // the toolbar title; range is after hiddenDays
  shortTitle?: (anchor, range, context) => string;        // used when compact
  component: Component<ViewProps<T>>;                     // what draws it
}

// range is the visible range: with hiddenDays hiding the weekend, a week's range
// ends on Friday night. context has locale and timeZone for Intl.
title: (anchor, range, context) =>
  new Intl.DateTimeFormat(context.locale, { month: 'short', day: 'numeric', timeZone: context.timeZone })
    .formatRange(range.start.toDate(), range.end.subtract({ days: 1 }).toDate()),
shortTitle: (anchor, range, context) =>
  new Intl.DateTimeFormat(context.locale, { month: 'short', timeZone: context.timeZone }).format(anchor.toDate())

// Without title the toolbar formats the range itself, like the built-in week does.

<script lang="ts" generics="T">
	import { Button } from 'sv5ui';
	import type { SpanPosition, ViewProps } from '@sv5ui/scheduler';

	// A view is a component that takes ViewProps and nothing else: no context,
	// no store. Everything it needs to draw and to stay interactive arrives here.
	let {
		days,
		positioned,
		preview,
		interactions,
		focus,
		selectedEventId,
		loading,
		scheduler,
		onSelectEvent,
		onOpenEvent,
		onDeleteEvent
	}: ViewProps<T> = $props();

	const spans = $derived(
		positioned.filter((position): position is SpanPosition<T> => position.kind === 'span')
	);
	const byDay = $derived(
		days.map((_, index) =>
			spans.filter((position) => position.startColumn === index).toSorted((a, b) => a.lane - b.lane)
		)
	);
	// The ghost: the layout's positions for the event being dragged, in the same shape
	const ghosts = $derived(
		(preview?.positioned ?? []).filter(
			(position): position is SpanPosition<T> => position.kind === 'span'
		)
	);

	const dayFormat = $derived(
		new Intl.DateTimeFormat(scheduler.locale, {
			weekday: 'short',
			day: 'numeric',
			timeZone: scheduler.timeZone
		})
	);
	const timeFormat = $derived(
		new Intl.DateTimeFormat(scheduler.locale, {
			hour: 'numeric',
			minute: '2-digit',
			hour12: scheduler.hour12,
			timeZone: scheduler.timeZone
		})
	);
	const isToday = (day: (typeof days)[number]) =>
		day.year === scheduler.now.year &&
		day.month === scheduler.now.month &&
		day.day === scheduler.now.day;
</script>

<!-- interactions.grid makes this the one tab stop: it sets role, tabindex and the
     name, and routes the keyboard and the built-in gestures. -->
<div class="flex h-full min-h-0 overflow-x-auto bg-surface" {@attach interactions.grid}>
	{#each days as day, index (day.toString())}
		<!-- data-sch-day-index lets hitTest find the column. data-sch-all-day says a drop
		     here means "this day"; data-sch-day-cell says keep the event's clock time. -->
		<section
			class={[
				'flex min-w-44 flex-1 flex-col border-e border-outline-variant/60 last:border-e-0',
				focus?.dayIndex === index && 'bg-primary/5 ring-2 ring-primary ring-inset'
			]}
			data-sch-day-index={index}
			data-sch-all-day
			data-sch-day-cell
			aria-label={dayFormat.format(day.toDate())}
		>
			<header
				class={[
					'border-b border-outline-variant/60 px-3 py-2 text-xs font-semibold',
					isToday(day) ? 'text-primary' : 'text-on-surface/70'
				]}
				aria-current={isToday(day) ? 'date' : undefined}
			>
				{dayFormat.format(day.toDate())}
				<span class="ms-1 font-normal text-on-surface/50">{byDay[index].length}</span>
			</header>
			<ul class="flex-1 space-y-2 overflow-y-auto p-2">
				{#each byDay[index] as position (position.event.id)}
					{@const selected = selectedEventId === position.event.id}
					{@const dragging = preview?.kind === 'move' && preview.event.id === position.event.id}
					<!-- data-sch-event is what the rollback animation looks for;
					     interactions.event(position) is what makes the card draggable -->
					<li
						data-sch-event={position.event.id}
						class={dragging ? 'opacity-40' : ''}
						{@attach interactions.event(position)}
					>
						<button
							type="button"
							aria-pressed={selected}
							class={[
								'w-full cursor-grab rounded-lg border p-2 text-start shadow-sm transition-colors active:cursor-grabbing',
								selected
									? 'border-primary bg-primary/10 ring-2 ring-primary'
									: 'border-outline-variant/60 bg-surface-container-lowest hover:border-primary/50'
							]}
							onclick={() => onSelectEvent(selected ? null : position.event.id)}
						>
							<p class="truncate text-sm font-medium text-on-surface">{position.event.title}</p>
							<p class="text-xs text-on-surface/60">
								{position.event.allDay
									? scheduler.labels.allDay
									: `${timeFormat.format(position.event.start.toDate())} to ${timeFormat.format(position.event.end.toDate())}`}
							</p>
						</button>
						{#if selected}
							<div class="mt-1 flex gap-1">
								{#if onOpenEvent}
									<Button
										label="Details"
										size="xs"
										variant="soft"
										onclick={() => onOpenEvent(position.event.id)}
									/>
								{/if}
								{#if scheduler.editable && position.event.editable !== false && !position.event.seriesId}
									<Button
										label={scheduler.labels.deleteEvent}
										size="xs"
										variant="ghost"
										color="error"
										onclick={() => onDeleteEvent(position.event.id)}
									/>
								{/if}
							</div>
						{/if}
					</li>
				{/each}
				{#each ghosts.filter((g) => g.startColumn === index) as ghost (ghost.event.id)}
					<li
						class="rounded-lg border-2 border-dashed border-primary/60 bg-primary/5 p-2"
						aria-hidden="true"
					>
						<p class="truncate text-sm font-medium text-primary">{ghost.event.title}</p>
					</li>
				{/each}
				{#if byDay[index].length === 0 && !loading && ghosts.length === 0}
					<li class="px-1 py-2 text-xs text-on-surface/40">Nothing planned</li>
				{/if}
			</ul>
		</section>
	{/each}
</div>

interface LayoutStrategy {
  name: string;
  layout<T>(events: SchedulerEvent<T>[], range: DateRange, context: LayoutContext): PositionedEvent<T>[];
}

interface LayoutContext {
  scale: TimeScale;              // toPixel and toDate for the current slot settings
  days: ZonedDateTime[];         // the visible days
  columnsPerRow: number;         // from the view definition, or the day count
  scheduler: SchedulerContext;
}

// Two shapes of output
interface TimePosition<T> {      // a block in a day column
  kind: 'time'; event; dayIndex; segmentStart; segmentEnd;
  top: number; height: number;   // pixels, from scale
  left: number; width: number;   // fractions of the column, 0 to 1
  column: number; columns: number;
}
interface SpanPosition<T> {      // a bar across columns
  kind: 'span'; event; row; lane;
  startColumn: number; endColumn: number;   // end exclusive
  continuesBefore: boolean; continuesAfter: boolean;
}

// A strategy is pure: same input, same output, no DOM. The month grid clips lanes
// to the cell height itself and folds the rest into +N; a layout only assigns lanes.

import { createTimeScale } from '@sv5ui/scheduler';

// The same scale the grid uses: wall clock in, pixels out, and back
const scale = createTimeScale({ slotMinutes: 30, slotHeight: 24, startHour: 0, endHour: 24 });
scale.dayHeight;                        // 1152
scale.toPixel(date);                    // px from the top of the day, by the clock: 9:00 is 432 on every day, DST or not
scale.toDate(432, dayStart);            // 9:00 of that day, snapped to the slot
scale.toDate(1152, dayStart);           // midnight of the next day

// Inside a layout or a view you get the scheduler's scale as context.scale; build
// your own only for something drawn outside the grid, like a ruler or a minimap.

interface SchedulerContext {
  timeZone: TimeZoneId;
  locale: string;
  weekStartsOn: WeekDay;
  hour12?: boolean;
  businessHours?: BusinessHours;
  holidays: Holiday[];
  calendars: SchedulerCalendar[];
  dayCount?: number;              // the days prop
  weekNumbers: boolean;
  hiddenDays: WeekDay[];
  editable: boolean;
  direction: 'ltr' | 'rtl';
  compact: boolean;               // below compactBreakpoint
  labels: SchedulerLabels;
  now: ZonedDateTime;             // updated every minute, in timeZone
}