Angular Demo

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

Angular Integration Guide 
# Install the package
npm install kalendly

# Import styles in angular.json → projects → architect → build → styles
"node_modules/kalendly/dist/styles/calendar.css"
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'kalendly';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}
// app.component.ts (standalone)
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'kalendly';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './app.component.html',
})
export class AppComponent {
  events = [
    { id: 1, name: 'Team Standup', date: new Date() },
  ];

  onDateSelect(e: CustomEvent) {
    console.log('Selected:', e.detail.date);
  }
}
<!-- app.component.html -->
<kal-calendar
  title="My Calendar"
  [events]="events"
  (cal-date-select)="onDateSelect($event)"
  (cal-month-change)="onMonthChange($event)"
></kal-calendar>
// app.component.ts
import { Component } from '@angular/core';
import { CalendarEvent } from 'kalendly/core';

@Component({ ... })
export class AppComponent {
  events: CalendarEvent[] = [];

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

  onMonthChange(e: CustomEvent) {
    const { year, month } = e.detail;
    console.log('Month:', year, month);
  }
}