Recurring Events

// Every day, or every other day
{ freq: 'daily' }
{ freq: 'daily', interval: 2 }

// Weekly on the weekday of start; or on the days listed (0 is Sunday).
// A week is counted from weekStart, else the scheduler's weekStartsOn.
{ freq: 'weekly' }
{ freq: 'weekly', byDay: [1, 3, 5] }
{ freq: 'weekly', interval: 2, byDay: [5], weekStart: 1 }   // every other Friday

// Monthly on the day of the month start falls on. A month without that day is
// skipped: a series from the 31st runs in January, March, May...
{ freq: 'monthly' }

// Yearly on the same date. 29 February runs in leap years only.
{ freq: 'yearly' }

<script lang="ts">
  import { Scheduler, type EventInput, type SchedulerEvent } from '@sv5ui/scheduler';

  let events = $state<EventInput[]>([/* ... */]);

  // An occurrence points back at its series through seriesId. Editing means
  // changing the rule on the series in the array; the occurrences follow.
  function skip(occurrence: SchedulerEvent) {
    const series = events.find((event) => event.id === occurrence.seriesId);
    if (!series?.recurrence) return;
    series.recurrence = {
      ...series.recurrence,
      exDates: [...(series.recurrence.exDates ?? []), occurrence.start]
    };
  }

  function endBefore(occurrence: SchedulerEvent) {
    const series = events.find((event) => event.id === occurrence.seriesId);
    if (!series?.recurrence) return;
    series.recurrence = { ...series.recurrence, until: occurrence.start.subtract({ minutes: 1 }) };
  }
</script>

<Scheduler bind:events detail="slideover" eventPanel={panel} />

{#snippet panel({ event, close })}
  {#if event.seriesId}
    <Button label="Skip this date" onclick={() => { skip(event); close(); }} />
    <Button label="End the series before this" onclick={() => { endBefore(event); close(); }} />
  {/if}
{/snippet}

import { parseZonedDateTime } from '@internationalized/date';

// A series given as a ZonedDateTime repeats in its own zone. The Sydney
// standup is at 9:00 Sydney every weekday, whatever zone the calendar shows;
// in Ho Chi Minh City that is 6:00 in winter and 5:00 in Sydney's summer, and a
// Monday standup lands on Monday in Sydney's week, not the calendar's.
{
  id: 'sydney-standup',
  title: 'Sydney standup',
  start: parseZonedDateTime('2026-03-02T09:00[Australia/Sydney]'),
  end: parseZonedDateTime('2026-03-02T09:30[Australia/Sydney]'),
  recurrence: { freq: 'weekly', byDay: [1, 2, 3, 4, 5] }
}

// A series given as strings repeats in the calendar's timeZone, and moves with it.