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 setup>
  import { ref } from "vue";
  import { Calendar, RestDataProvider } from "@svar-ui/vue-calendar";

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

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

<template>
  <Calendar :events="data" :date="date" />
</template>

Forwarding mutations​

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

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

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

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

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

<template>
  <Calendar ref="api" :init="init" :events="data" :date="new Date()" />
  <Editor v-if="api" :api="api" />
</template>