Creating & Editing

<!-- 1. A panel inside the calendar, filled by your snippet -->
<Scheduler bind:events createPanel={form} />

<!-- 2. Your own dialog, opened from the two reports -->
<Scheduler bind:events creatable={false} detail={false}
  onSelectSlot={(slot) => openDialog(slot)}
  onEventClick={(event) => openDialog(event)} />

<!-- 3. Nothing: a drag creates "New event", to be renamed later -->
<Scheduler bind:events />

<script lang="ts">
  import { now } from '@internationalized/date';
  let draft = $state<SlotSelection | null>(null);

  function nextHour() {
    const start = now(zone).set({ minute: 0, second: 0, millisecond: 0 }).add({ hours: 1 });
    draft = { start, end: start.add({ hours: 1 }), allDay: false };
  }
</script>

<!-- draft is the range the panel shows; set it to open the panel from anywhere,
     read it to know what is being planned. null closes it. -->
<Scheduler bind:events bind:draft createPanel={form} toolbarActions={actions} />

{#snippet actions()}
  <Button label="Create event" icon="lucide:plus" onclick={nextHour} />
{/snippet}

<!-- creatable={false} with a createPanel: the grid never opens it; only draft does -->

<!-- A click on an empty slot only reports it. It does not open the panel, so a
     stray click does not throw a form at the user. -->
<Scheduler
  bind:events
  createPanel={form}
  onSelectSlot={(slot) => console.log(slot.start.toString(), slot.end.toString(), slot.allDay)}
/>

<!-- To open your own dialog on a click instead -->
<Scheduler bind:events creatable={false} onSelectSlot={(slot) => (dialog = slot)} />
<Modal open={dialog !== null} title="New event">...</Modal>

<!-- Adds to the default details, in the popover and the slide-over alike -->
<Scheduler bind:events eventDetail={extra} />

{#snippet extra({ event, close }: EventDetailSnippetProps<Meeting>)}
  <p class="text-sm">{event.data?.location}</p>
  <Button label="Join call" size="sm" onclick={() => { open(event.data?.link); close(); }} />
{/snippet}

<!-- Replaces the body of the slide-over. With detail="popover" the popover gains
     an Open details button that switches to this panel. -->
<Scheduler bind:events detail="popover" eventPanel={panel} />

{#snippet panel({ event, close, remove, update, deletable }: EventPanelSnippetProps<Notes>)}
  <EventForm
    start={event.start}
    end={event.end}
    allDay={event.allDay ?? false}
    initial={{ title: event.title, calendarId: event.calendarId, data: event.data }}
    {calendars}
    onSubmit={(changes) => { update(changes); close(); }}
    onCancel={close}
  />
  {#if deletable}
    <Button label="Delete" color="error" variant="soft" onclick={remove} />
  {/if}
{/snippet}

// update(changes) merges the fields into the event and sends an 'update'
// mutation through the pipeline: onMutate runs, a failure rolls back, the
// change is announced. Fields left out keep their value. It does nothing
// when deletable is false, which follows editable on the event and the scheduler.
update({ title: 'Design review, extended', end: event.end.add({ minutes: 30 }) });
update({ data: { ...event.data, notes: 'Bring the mockups' } });   // payload only is fine

// An occurrence of a series is never editable; change the rule on the series instead.

<!-- Fires on click or keyboard activation, whatever detail is, once per opening
     click (not again for the click that closes a popover). An occurrence arrives
     with seriesId set. -->
<Scheduler bind:events onEventClick={(event) => analytics.track('open', event.id)} />