Playground

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

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

  const calendar = document.querySelector('forcecal-main');

  // Assign a complete snapshot; the calendar reconciles it and
  // dispatches one calendar-events-set with the change set
  calendar.events = [
    {
      id: 'standup',
      title: 'Daily Standup',
      start: '2026-09-07T09:15:00',
      end: '2026-09-07T09:30:00',
      recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR'
    }
  ];

  // Fires after first render and on every navigation or view change
  calendar.addEventListener('calendar-range-change', ({ detail }) => {
    console.log('visible', detail.start, detail.end);
  });
</script>