Vue Scheduler Remote Data

Instead of passing events up front, hand the scheduler a dataSource: getEvents(start, end) runs whenever the visible range changes, and persistEvents runs after every committed change.

<script setup lang="ts">
const dataSource = {
  getEvents: async (start: string, end: string) =>
    (await fetch(`/api/events?from=${start}&to=${end}`)).json(),

  persistEvents: async ({ action, event, occurrence, scope }) => {
    const response = await fetch('/api/events', {
      method: 'POST',
      body: JSON.stringify({ action, event, occurrence, scope }),
    })
    return { success: response.ok } // success: false reverts the change
  },
}
</script>

<template>
  <CScheduler :data-source="dataSource" />
</template>

Keep the dataSource object identity stable across renders (module scope or a ref) — a new object clears the fetched-range cache and refetches.

Behavior

• getEvents receives the visible window as ISO strings (end exclusive) and fires on mount and whenever navigation, view switches or prop changes move the range — never twice for the same range. A spinner (data-part="loading") shows while a request is in flight, and stale responses from superseded requests are discarded.
• A failed load keeps the current events and announces the localizable loadFailed message.
• persistEvents gets the same payload as the eventChange emit (minus revert). Returning { success: false } — or throwing — reverts the change and announces saveFailed. eventChange still fires first, so analytics and optimistic UI keep working.
• The getVisibleRange() method on the template ref returns the current window ({ start, end }) if you prefer wiring fetches yourself through dateChange/viewChange.

Manual wiring

Everything above is also possible without dataSource — listen to dateChange, fetch, call setEvents() on the template ref, and call revert() from your eventChange handler when the server rejects a change. dataSource is the packaged version of exactly that pattern.