Skip to main content

RestDataProvider

Provider class that wires Calendar mutations (add-event, update-event, delete-event) to a REST events collection. Fetches initial data via getData() with Date fields parsed.

Usage​

class RestDataProvider {
	constructor(baseUrl: string);
	getData(): Promise<CalendarEvent[]>;
	send(path: string, method: string, body?: any): Promise<any>;
}

Constructor​

ParameterTypeDescription
baseUrlstringBase URL of the REST endpoint serving the events resource.

Endpoints​

The provider issues these requests against baseUrl:

ActionMethodPathBody
getData()GET/events-
add-eventPOST/eventsevent payload (without id)
update-eventPUT/events/{id}event payload (debounced 500ms)
delete-eventDELETE/events/{id}-

Date fields are serialized as ISO strings. On GET /events, start, end, and exdates entries are converted to Date instances.

Loading initial data​

<script>
  import { Calendar, RestDataProvider } from "@svar-ui/svelte-calendar";

  const provider = new RestDataProvider("https://example.com/api");
  let data = $state([]);
  let date = $state(new Date());

  provider.getData().then(events => {
    data = events;
    if (events[0]) date = events[0].start;
  });
</script>

<Calendar events={data} {date} />

Forwarding mutations​

Attach via api.setNext(provider) inside init to forward add/update/delete actions to the backend:

<script>
  import { Calendar, Editor, RestDataProvider } from "@svar-ui/svelte-calendar";

  const provider = new RestDataProvider("https://example.com/api");
  let api = $state();
  let data = $state([]);

  provider.getData().then(events => (data = events));

  function init(api) {
    api.setNext(provider);
  }
</script>

<Calendar bind:this={api} {init} events={data} date={new Date()} />
{#if api}<Editor {api} />{/if}