Vanilla JavaScript Demo

Using <kal-calendar> as a plain HTML custom element — no framework required.

Events


Availability Mode

Day / Time view hides event details and shows booked vs free cells.


Selectable Range

Requires availability mode. Click a free day to start, click again to extend, third click resets.


Lazy Fetch

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

Event Log