Live

Playground

The real @forcecalendar/interface web component running live. Load sample events, switch views, watch the DOM events fire, and copy ready-to-paste code for HTML, React, or Vue. Prefer a real editor? Open the starter in StackBlitz.

0 events

Fully keyboard accessible: Tab into the grid, move with the arrow keys, PageUp/PageDown to change period, Enter to select. Every view implements the WAI-ARIA grid pattern.

index.html

<script type="module">
  import '@forcecalendar/interface';
</script>

<forcecal-main
  view="month"
  locale="en-US"
  week-starts-on="0"
  style="display: block; min-height: 560px"
></forcecal-main>

Configuration

Locale

Timezone

Week starts on

Height (560px)

Events

No events yet. Add the samples to see the calendar in action.

Event log

DOM events dispatched by <forcecal-main>. Click around the calendar to see them fire.

Waiting for activity…