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​

import { useState } from "react";
import { Calendar, RestDataProvider } from "@svar-ui/react-calendar";

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

function App() {
  const [data, setData] = useState([]);
  const [date, setDate] = useState(new Date());

  provider.getData().then(events => {
    setData(events);
    if (events[0]) setDate(events[0].start);
  });

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

Forwarding mutations​

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

import { useState } from "react";
import { Calendar, Editor, RestDataProvider } from "@svar-ui/react-calendar";

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

function App() {
  const [api, setApi] = useState(null);
  const [data, setData] = useState([]);

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

  const init = api => {
    api.setNext(provider);
  };

  return (
    <>
      <Calendar ref={setApi} init={init} events={data} date={new Date()} />
      {api && <Editor api={api} />}
    </>
  );
}