Solid.js Demo

Live <kal-calendar> below — loaded via script tag. See the integration guide for Solid.js 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

Solid.js Integration Guide
# Install the package
npm install kalendly

# Import styles in your root component or index.css
import 'kalendly/styles';
// Calendar.tsx
import 'kalendly';

interface Props {
  events?: CalendarEvent[];
  title?: string;
  onDateSelect?: (e: CustomEvent) => void;
  onMonthChange?: (e: CustomEvent) => void;
}

export function Calendar(props: Props) {
  return (
    <kal-calendar
      title={props.title}
      prop:events={props.events ?? []}
      on:cal-date-select={props.onDateSelect}
      on:cal-month-change={props.onMonthChange}
    />
  );
}
// App.tsx
import { createSignal } from 'solid-js';
import { Calendar } from './Calendar';
import type { CalendarEvent } from 'kalendly/core';

export function App() {
  const [events, setEvents] = createSignal<CalendarEvent[]>([
    { id: 1, name: 'Team Standup', date: new Date() },
  ]);

  function onDateSelect(e: CustomEvent) {
    console.log('Selected:', e.detail.date, e.detail.events);
  }

  return (
    <Calendar
      events={events()}
      title="My Calendar"
      onDateSelect={onDateSelect}
    />
  );
}
// src/types/solid-ce.d.ts
// Extend Solid's JSX namespace for kal-calendar
import type { CalendarEvent } from 'kalendly/core';

declare module 'solid-js' {
  namespace JSX {
    interface IntrinsicElements {
      'kal-calendar': {
        title?: string;
        'initial-date'?: string;
        'week-starts-on'?: '0' | '1';
        'prop:events'?: CalendarEvent[];
        'on:cal-date-select'?: (e: CustomEvent) => void;
        'on:cal-month-change'?: (e: CustomEvent) => void;
      };
    }
  }
}