Real World Example

<script lang="ts">
  import { now } from '@internationalized/date';
  import { Button, ToggleGroup, toast } from 'sv5ui';
  import {
    Scheduler,
    type ConflictResolution, type CreatePanelSnippetProps, type EventPanelSnippetProps,
    type EventSourceFn, type Mutation, type SchedulerEvent, type SidebarSnippetProps, type SlotSelection
  } from '@sv5ui/scheduler';
  import EventForm from '$lib/calendar/EventForm.svelte';
  import { loadEvents, saveMutation, type Meeting } from '$lib/calendar/api';
  import { businessHours, calendars, holidays, backlog } from '$lib/calendar/data';

  const zone = 'Asia/Ho_Chi_Minh';
  let status = $state<'all' | 'confirmed' | 'tentative'>('all');
  let draft = $state<SlotSelection | null>(null);
  let lastSaved = $state<Date | null>(null);
  let version = $state(0);

  // A new function is how the scheduler is told to drop its cache and fetch again.
  // version is read here, outside the async body, so the derived depends on it.
  const source = $derived.by<EventSourceFn<Meeting>>(() => {
    void version;
    return ({ range, timeZone, signal }) => loadEvents(range, timeZone, signal);
  });

  async function onMutate(mutation: Mutation<Meeting>) {
    const result = await saveMutation(mutation);
    lastSaved = new Date();
    return result;
  }
  const onConflict = (mutation: Mutation<Meeting>, server: SchedulerEvent<Meeting>): ConflictResolution => 'keep-server';
  const onError = (mutation: Mutation<Meeting>, error: unknown) =>
    toast.error(`Could not save ${mutation.after?.title ?? mutation.before?.title}`);

  function newEvent(date = now(zone)) {
    const start = date.set({ minute: 0, second: 0, millisecond: 0 }).add({ hours: 1 });
    draft = { start, end: start.add({ hours: 1 }), allDay: false };
  }
</script>

<Scheduler
  {source}
  {onMutate}
  {onConflict}
  {onError}
  onLoadError={() => toast.error('Could not load events')}
  bind:draft
  {calendars}
  {businessHours}
  {holidays}
  dragSources={backlog}
  weekNumbers
  sidebar
  detail="popover"
  createPanel={form}
  eventPanel={panel}
  toolbarActions={actions}
  filter={(event) => status === 'all' || event.data?.status === status}
  timeZone={zone}
  height="min(80dvh, 820px)"
>
  {#snippet sidebarHeader({ date }: SidebarSnippetProps<Meeting>)}
    <Button label="New event" icon="lucide:plus" block onclick={() => newEvent(date)} />
  {/snippet}
  {#snippet sidebarFooter()}
    <p class="text-xs">{lastSaved ? `Saved ${lastSaved.toLocaleTimeString()}` : 'Nothing saved yet'}</p>
  {/snippet}
</Scheduler>

{#snippet actions()}
  <ToggleGroup
    items={[{ value: 'all', label: 'All' }, { value: 'confirmed', label: 'Confirmed' }, { value: 'tentative', label: 'Tentative' }]}
    value={status}
    onValueChange={(v: string | undefined) => v && (status = v as typeof status)}
    size="sm"
  />
  <Button label="Reload" icon="lucide:refresh-cw" size="sm" variant="ghost" onclick={() => (version += 1)} />
{/snippet}

{#snippet form({ start, end, allDay, close, create }: CreatePanelSnippetProps<Meeting>)}
  <EventForm {start} {end} {allDay} {calendars}
    onSubmit={(input) => create({ ...input, data: { ...input.data, status: 'tentative' } })}
    onCancel={close} />
{/snippet}

{#snippet panel({ event, close, remove, update, deletable }: EventPanelSnippetProps<Meeting>)}
  {#if deletable}
    <EventForm start={event.start} end={event.end} allDay={event.allDay ?? false} {calendars}
      initial={{ title: event.title, calendarId: event.calendarId, data: event.data }}
      submitLabel="Update"
      onSubmit={(changes) => { update({ ...changes, data: { ...event.data, ...changes.data } }); close(); }}
      onCancel={close} />
    <Button label="Delete" color="error" variant="soft" onclick={remove} />
  {/if}
{/snippet}

import type { DateRange, EventInput, Mutation, MutationResult, TimeZoneId } from '@sv5ui/scheduler';

export interface Meeting {
  status: 'confirmed' | 'tentative';
  notes?: string;
}

// GET /api/events?from=<ISO>&to=<ISO>&zone=<IANA>. The API stores UTC instants;
// the scheduler reads them in its own zone. Only the range on screen is asked for.
export async function loadEvents(range: DateRange, timeZone: TimeZoneId, signal: AbortSignal): Promise<EventInput<Meeting>[]> {
  const params = new URLSearchParams({
    from: range.start.toAbsoluteString(),
    to: range.end.toAbsoluteString(),
    zone: timeZone
  });
  const response = await fetch(`/api/events?${params}`, { signal });
  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
  return response.json();
}

// One request per change. The server answers with its own version of the event,
// or nothing; a non-2xx response throws and the scheduler rolls the change back.
export async function saveMutation(mutation: Mutation<Meeting>): Promise<MutationResult<Meeting>> {
  const body = mutation.after && {
    ...mutation.after,
    start: mutation.after.start.toAbsoluteString(),
    end: mutation.after.end.toAbsoluteString()
  };
  const response = await fetch(`/api/events/${encodeURIComponent(mutation.eventId)}`, {
    method: mutation.kind === 'delete' ? 'DELETE' : mutation.kind === 'create' ? 'POST' : 'PUT',
    headers: { 'content-type': 'application/json' },
    body: body ? JSON.stringify(body) : undefined
  });
  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
  if (mutation.kind === 'delete') return;
  return response.json();   // the server's version: a new id on create, or the same event
}

<script lang="ts">
	import type { DateValue, ZonedDateTime } from '@internationalized/date';
	import { toCalendarDate, toCalendarDateTime, toZoned } from '@internationalized/date';
	import { Button, DatePicker, FormField, Input, Select, Switch, Textarea } from 'sv5ui';
	import { untrack } from 'svelte';
	import type { EventChanges, NewEventInput, SchedulerCalendar } from '@sv5ui/scheduler';

	/**
	 * The form the Creating & Editing and Real World demos put inside the
	 * scheduler's panels. It is built from sv5ui inputs and lives in the docs,
	 * not in the package: the scheduler provides the panel and the save, and
	 * every app draws its own fields.
	 */
	export interface Notes {
		notes: string;
	}

	interface Props {
		start: ZonedDateTime;
		end: ZonedDateTime;
		allDay: boolean;
		calendars: SchedulerCalendar[];
		/** Present when editing: the fields start from this event. */
		initial?: { title: string; calendarId?: string; data?: Notes };
		submitLabel?: string;
		onSubmit: (input: NewEventInput<Notes> & EventChanges<Notes>) => void;
		onCancel: () => void;
	}

	let {
		start,
		end,
		allDay,
		calendars,
		initial,
		submitLabel = 'Save',
		onSubmit,
		onCancel
	}: Props = $props();

	let title = $state(untrack(() => initial?.title ?? ''));
	let calendarId = $state(untrack(() => initial?.calendarId ?? calendars[0]?.id ?? ''));
	let wholeDay = $state(untrack(() => allDay));
	let from = $state(untrack(() => start));
	let to = $state(untrack(() => end));
	let notes = $state(untrack(() => initial?.data?.notes ?? ''));

	const calendarItems = $derived(
		calendars.map((calendar) => ({ label: calendar.title, value: calendar.id }))
	);

	function pick(value: DateValue | undefined, fallback: ZonedDateTime) {
		return value ? toZoned(toCalendarDateTime(value), fallback.timeZone) : fallback;
	}

	function submit(event: SubmitEvent) {
		event.preventDefault();
		if (!title.trim()) return;
		onSubmit({
			title: title.trim(),
			calendarId,
			start: wholeDay ? toCalendarDate(from).toString() : from,
			end: wholeDay ? toCalendarDate(to).toString() : to,
			allDay: wholeDay,
			data: { notes }
		});
	}
</script>

<form class="flex flex-col gap-4" onsubmit={submit}>
	<FormField label="Title" required>
		<Input bind:value={title} placeholder="What is it about?" autofocus />
	</FormField>
	<FormField label="Calendar">
		<Select items={calendarItems} bind:value={calendarId} />
	</FormField>
	<FormField label="All day">
		<Switch bind:checked={wholeDay} />
	</FormField>
	<FormField label="Starts">
		<DatePicker
			value={from}
			granularity={wholeDay ? 'day' : 'minute'}
			onValueChange={(value) => (from = pick(value, from))}
		/>
	</FormField>
	<FormField label="Ends">
		<DatePicker
			value={to}
			granularity={wholeDay ? 'day' : 'minute'}
			minValue={from}
			onValueChange={(value) => (to = pick(value, to))}
		/>
	</FormField>
	<FormField label="Notes">
		<Textarea bind:value={notes} rows={3} placeholder="Agenda, links, anything" />
	</FormField>
	<div class="flex justify-end gap-2 pt-2">
		<Button label="Cancel" variant="ghost" color="surface" type="button" onclick={onCancel} />
		<Button label={submitLabel} color="primary" type="submit" />
	</div>
</form>

import { parseAbsolute, parseZonedDateTime, toCalendarDate } from '@internationalized/date';
import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

/**
 * The backend of the Loading on Demand and Real World demos.
 *
 * It is stateless on purpose: Vercel runs several instances and every reader
 * shares them, so anything saved here would belong to nobody. Events are
 * derived from the calendar day, so a range asked twice answers twice the
 * same, and the scheduler's caching can be watched rather than believed.
 *
 *   GET /docs/scheduler/api/events?from=<ISO>&to=<ISO>&zone=<IANA>&latency=<ms>&fail=1
 *
 * Dates go out as UTC instants (`toAbsoluteString`), the form an API that
 * stores UTC would use, and the scheduler converts them to its own zone.
 */

const TITLES = [
	'Client call',
	'Code review',
	'Interview',
	'Sales demo',
	'Workshop',
	'One on one',
	'Budget review',
	'Site visit'
];
const CALENDARS = ['work', 'team', 'personal', 'learning'];
const MAX_LATENCY = 5000;
const MAX_DAYS = 120;

const sleep = (ms: number, signal: AbortSignal) =>
	new Promise<void>((resolve) => {
		const timer = setTimeout(resolve, ms);
		signal.addEventListener('abort', () => clearTimeout(timer), { once: true });
	});

export const GET: RequestHandler = async ({ url, request }) => {
	const from = url.searchParams.get('from');
	const to = url.searchParams.get('to');
	const zone = url.searchParams.get('zone') ?? 'Asia/Ho_Chi_Minh';
	const latency = Math.min(Number(url.searchParams.get('latency') ?? 0), MAX_LATENCY);
	if (!from || !to) error(400, 'from and to are required');

	let start, end;
	try {
		start = toCalendarDate(parseAbsolute(from, zone));
		end = toCalendarDate(parseAbsolute(to, zone));
	} catch {
		error(400, 'from and to must be ISO instants');
	}
	if (end.compare(start) > MAX_DAYS) error(400, `at most ${MAX_DAYS} days per request`);

	if (latency > 0) await sleep(latency, request.signal);
	if (url.searchParams.get('fail') === '1') error(503, 'The network is unreachable');

	const events = [];
	for (let day = start; day.compare(end) < 0; day = day.add({ days: 1 })) {
		// Weekends stay empty; weekdays get 0 to 3 events from a hash of the date.
		const weekday = day.toDate(zone).getDay();
		if (weekday === 0 || weekday === 6) continue;
		const seed = day.day * 7 + day.month * 3 + day.year;
		const count = seed % 4;
		for (let index = 0; index < count; index += 1) {
			const hour = 8 + ((seed + index * 5) % 9);
			const minute = index % 2 === 0 ? '00' : '30';
			const startAt = parseZonedDateTime(
				`${day.toString()}T${String(hour).padStart(2, '0')}:${minute}[${zone}]`
			);
			const endAt = startAt.add({ minutes: 30 + ((seed + index) % 3) * 30 });
			events.push({
				id: `${day.toString()}-${index}`,
				title: TITLES[(seed + index) % TITLES.length],
				calendarId: CALENDARS[(seed + index) % CALENDARS.length],
				start: startAt.toAbsoluteString(),
				end: endAt.toAbsoluteString()
			});
		}
	}

	return json(events, { headers: { 'cache-control': 'no-store' } });
};

<script lang="ts">
  import { ModeWatcher } from 'mode-watcher';
  import '../scheduler.config';
  import './layout.css';

  let { children } = $props();
</script>

<ModeWatcher />

<div class="flex h-dvh flex-col">
  <header class="h-14 shrink-0 border-b">Team calendar</header>
  {@render children()}
</div>