Using <kal-calendar> as a plain HTML custom element — no framework required.
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.
Navigation advances one month at a time. Turn on Selectable Range to pick a range that spans both.
Time view only. Sets the grid granularity and the length a booking with no end time occupies.
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.
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.
Excluded days are not click targets at all — no hover, no event. Combines with Opening Hours.
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.
Simulates per-month server fetch. Navigate months to see the skeleton loading state.