Svelte Demo

Live <kal-calendar> below — loaded via script tag. See the integration guide for Svelte project setup.

Events

Availability Mode

Day / Time view hides event details and colours each day by its availability bucket — open, conditional or blocked. The sample data includes multi-day spans, so a single event covers a range of days.

Months

Navigation advances one month at a time. Turn on Selectable Range to pick a range that spans both.

Slot Length

Time view only. Sets the grid granularity and the length a booking with no end time occupies.

Opening Hours

Time view only. Split shift is 09:00-12:00,13:00-17:00 — closed for lunch. Closed hours stay visible so an existing booking outside them is not hidden.

Brand Colour

Sets --kalendly-primary-color and friends on the element, so it scopes to this calendar. Selected day, today outline and the ‹ › arrows all follow. The theme property does the same but writes to :root, colouring every calendar on the page.

Opening Days

Excluded days are not click targets at all — no hover, no event. Combines with Opening Hours.

Selectable Range

Requires availability mode. Click a free day to start, click again to extend, third click resets. A range can cross a month boundary and stays marked in both months.

Lazy Fetch

Simulates per-month server fetch. Navigate months to see the skeleton loading state.

Event Log

Svelte Integration Guide
# Install the package
npm install kalendly

# Import styles in your global CSS or layout
import 'kalendly/styles';
<!-- Calendar.svelte (Svelte 5) -->
<script>
  import 'kalendly';

  // Runes syntax
  let { events = [], title = '', ondateselect, onmonthchange } = $props();
</script>

<kal-calendar
  {title}
  {events}
  oncal-date-select={ondateselect}
  oncal-month-change={onmonthchange}
/>
<!-- Calendar.svelte (Svelte 4) -->
<script>
  import { onMount } from 'svelte';
  import 'kalendly';

  export let events = [];
  export let title = '';

  let calEl;

  // Svelte 4: set object props via bind:this
  onMount(() => { calEl.events = events; });
  $: if (calEl) calEl.events = events;
</script>

<kal-calendar
  bind:this={calEl}
  {title}
  on:cal-date-select
  on:cal-month-change
/>
<!-- App.svelte -->
<script>
  import Calendar from './Calendar.svelte';

  let events = [
    { id: 1, name: 'Team Standup', date: new Date() },
  ];

  function onDateSelect(e) {
    console.log('Selected:', e.detail.date);
  }
</script>

<Calendar
  {events}
  title="My Calendar"
  on:cal-date-select={onDateSelect}
/>