Custom Rendering

Svelte 5 snippets let you take over what the calendar draws — event content, extra toolbar controls, or the whole toolbar.

The eventContent snippet

Declare an eventContent snippet inside <Calendar> and it replaces the default body of every event pill and block. It receives the EventInstance — event data plus the resolved occurrence times and color:

Custom create & details UI

The built-in popovers are defaults, not a cage: the moment you provide onSelect / onDateClick the quick-create popover steps aside, and onEventClick replaces the details popover. From there any UI works — a modal, a drawer, a routed page. This demo swaps them for a centered create dialog and a details side drawer:

Extra toolbar content

The toolbarEnd snippet renders on the right side of the built-in toolbar — a natural home for filters or a “new event” button.

Going headless

<script lang="ts">
  import { Calendar, type CalendarView } from 'svelte5plus-calendar';
  let view = $state<CalendarView>('week');
  let date = $state(new Date());
</script>

<!-- Bring your own toolbar: hide the built-in one and drive the bindables -->
<nav>
  <button onclick={() => (date = new Date())}>Today</button>
  <select bind:value={view}>
    <option value="week">Week</option>
    <option value="month">Month</option>
  </select>
</nav>

<Calendar bind:view bind:date header={false} events={[]} />

All layout algorithms (time-grid packing, week-row segmentation, recurrence expansion) are also exported as pure functions — you can build an entirely custom UI on top of them.