One component. Every framework.

A universal calendar web component that works natively in React, Vue, Angular, and plain HTML — with no framework dependency.

$npm install kalendly

Why kalendly?

Single <kal-calendar> custom element. No React, Vue, or Angular required.

Written in TypeScript with full type definitions included.

CSS variables + JS property API for complete visual customisation.

Categories, priorities, time ranges, attendees, locations, and more.

Zero runtime dependencies. Tree-shakeable ESM + CJS + UMD builds.

Semantic HTML, keyboard navigation, and screen-reader friendly markup.

<kal-calendar
  title="My Calendar"
></kal-calendar>

<script>
  cal.events = myEvents;
</script>

import 'kalendly';

<kal-calendar
  events={events}
  oncal-date-select={
    e => onSelect(e)
  }
/>

import 'kalendly';

<kal-calendar
  :events="events"
  @cal-date-select=
    "onSelect"
/>

import 'kalendly';

<kal-calendar
  {events}
  oncal-date-select={
    handleSelect
  }
/>

import 'kalendly';

<kal-calendar
  [events]="events"
  (cal-date-select)=
    "onSelect($event)"
></kal-calendar>

import 'kalendly';

<kal-calendar
  prop:events={events}
  on:cal-date-select={
    handleSelect
  }
/>