Server-Side Example

Loading Scheduler example…

Source code

1
import { applyControlPresentation } from '@revolist/ui';
2
import { CalendarEditorDialogPlugin } from '@revolist/revogrid-pro';
3
import { defineCustomElements } from '@revolist/revogrid/loader';
4
import { EventSchedulerPlugin } from '@revolist/scheduler';
5
import { currentTheme } from '../../composables/useRandomData';
6
import { createRemoteSchedulerDemo } from './demo';
7
import './styles.scss';
8

9
defineCustomElements();
10
export function load(parentSelector: string, _rows: any[] = []) {
11
  const parent = document.querySelector(parentSelector);
12
  if (!parent) return () => {};
13
  const model = createRemoteSchedulerDemo();
14
  const root = document.createElement('section');
15
  root.className = 'scheduler-remote-demo';
16
  root.innerHTML = `<div class="scheduler-remote-demo__controls">
17
      <button class="rv-btn" data-action="rename">Rename booking</button>
18
      <button class="rv-btn" data-action="refresh">Refresh from server</button>
19
      <button class="rv-btn" data-action="calendars">Working calendars</button>
20
      <label><input type="checkbox" data-action="reject" /> Reject next save</label>
21
      <label title="Changes appear immediately and revert if the server rejects the save."><input type="checkbox" data-action="optimistic" checked /> Update immediately</label>
22
    </div>`;
23
  const rename = root.querySelector<HTMLButtonElement>('[data-action="rename"]')!;
24
  const refresh = root.querySelector<HTMLButtonElement>('[data-action="refresh"]')!;
25
  const calendars = root.querySelector<HTMLButtonElement>('[data-action="calendars"]')!;
26
  calendars.onclick = () => model.openCalendars();
27
  const reject = root.querySelector<HTMLInputElement>('[data-action="reject"]')!;
28
  const optimistic = root.querySelector<HTMLInputElement>('[data-action="optimistic"]')!;
29
  rename.onclick = () => model.rename(); refresh.onclick = () => { void model.refresh(); };
30
  reject.onchange = () => model.rejectNext(reject.checked);
31
  optimistic.onchange = () => model.optimistic(optimistic.checked);
32
  applyControlPresentation(root);
33
  const grid = document.createElement('revo-grid');
34
  grid.className = 'scheduler-remote-demo__grid'; grid.hideAttribution = true;
35
  grid.theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
36
  grid.plugins = [EventSchedulerPlugin, CalendarEditorDialogPlugin]; grid.columns = []; grid.eventScheduler = model.state.config;
37
  const render = (state: typeof model.state) => {
38
    rename.disabled = refresh.disabled = calendars.disabled = !state.ready || state.busy;
39
    reject.disabled = optimistic.disabled = state.busy;
40
    reject.checked = state.rejectNext;
41
    optimistic.checked = state.config.remote?.optimistic !== false;
42
  };
43
  const feedback = document.createElement('div');
44
  feedback.className = 'scheduler-remote-demo__activity';
45
  const connect = () => { void model.connect(grid, render, feedback); };
46
  grid.addEventListener('aftergridinit', connect);
47
  root.append(grid, feedback); parent.append(root); grid.source = [];
48
  render(model.state);
49
  return () => { grid.removeEventListener('aftergridinit', connect); model.disconnect(); grid.remove(); root.remove(); };
50
}

1
<template>
2
  <section class="scheduler-remote-demo">
3
    <div class="scheduler-remote-demo__controls">
4
      <button v-rv-control class="rv-btn" :disabled="!state.ready || state.busy" @click="model.rename()">Rename booking</button>
5
      <button v-rv-control class="rv-btn" :disabled="!state.ready || state.busy" @click="model.refresh()">Refresh from server</button>
6
      <button v-rv-control class="rv-btn" :disabled="!state.ready || state.busy" @click="model.openCalendars()">Working calendars</button>
7
      <label><input v-rv-control type="checkbox" :checked="state.rejectNext" :disabled="state.busy" @change="model.rejectNext(($event.target as HTMLInputElement).checked)" /> Reject next save</label>
8
      <label title="Changes appear immediately and revert if the server rejects the save."><input v-rv-control type="checkbox" :checked="state.config.remote?.optimistic" :disabled="state.busy" @change="model.optimistic(($event.target as HTMLInputElement).checked)" /> Update immediately</label>
9
    </div>
10
    <RevoGrid ref="gridRef" class="scheduler-remote-demo__grid" hide-attribution :theme="isDark ? 'darkMaterial' : 'material'" :plugins="plugins" :columns="columns" :source="source" :event-scheduler.prop="state.config" @aftergridinit="connect" />
11
    <div ref="feedbackRef" class="scheduler-remote-demo__activity"></div>
12
  </section>
13
</template>
14
<script setup lang="ts">
15
import { vRvControl } from '@revolist/ui/vue-control';
16
import { CalendarEditorDialogPlugin } from '@revolist/revogrid-pro';
17
import { onMounted, onBeforeUnmount, ref, shallowRef } from 'vue';
18
import RevoGrid from '@revolist/vue3-datagrid';
19
import { EventSchedulerPlugin } from '@revolist/scheduler';
20
import { currentThemeVue } from '../../composables/useRandomData';
21
import { createRemoteSchedulerDemo } from './demo';
22
import './styles.scss';
23
const { isDark } = currentThemeVue();
24
const model = createRemoteSchedulerDemo();
25
const state = shallowRef(model.state);
26
const source = ref([]);
27
const columns = ref([]);
28
const plugins = [EventSchedulerPlugin, CalendarEditorDialogPlugin];
29
const feedbackRef = ref<HTMLElement | null>(null);
30
const gridRef = ref<{ $el: HTMLRevoGridElement } | null>(null);
31
function connect() { if (gridRef.value?.$el && feedbackRef.value) void model.connect(gridRef.value.$el, next => { state.value = next; }, feedbackRef.value); }
32
onMounted(connect);
33
onBeforeUnmount(() => model.disconnect());
34
</script>

1
import { ButtonControl as UiButton, Input as UiInput } from '@revolist/ui/react-control';
2
import { CalendarEditorDialogPlugin } from '@revolist/revogrid-pro';
3
import React, { useEffect, useMemo, useRef, useState } from 'react';
4
import { RevoGrid } from '@revolist/react-datagrid';
5
import { EventSchedulerPlugin } from '@revolist/scheduler';
6
import { currentTheme } from '../../composables/useRandomData';
7
import { createRemoteSchedulerDemo } from './demo';
8
import './styles.scss';
9

10
export default function RemoteData(_props: { rows?: any[] }) {
11
  const model = useMemo(() => createRemoteSchedulerDemo(), []);
12
  const [state, setState] = useState(model.state);
13
  const plugins = useMemo(() => [EventSchedulerPlugin, CalendarEditorDialogPlugin], []);
14
  const columns = useMemo(() => [], []);
15
  const source = useMemo(() => [], []);
16
  const feedback = useRef<HTMLDivElement>(null);
17
  const grid = useRef<HTMLRevoGridElement>(null);
18
  const connect = () => { if (grid.current && feedback.current) void model.connect(grid.current, setState, feedback.current); };
19
  useEffect(() => { connect(); return () => model.disconnect(); }, [model]);
20
  return <section className="scheduler-remote-demo">
21
    <div className="scheduler-remote-demo__controls">
22
      <UiButton className="rv-btn" disabled={!state.ready || state.busy} onClick={() => model.rename()}>Rename booking</UiButton>
23
      <UiButton className="rv-btn" disabled={!state.ready || state.busy} onClick={() => { void model.refresh(); }}>Refresh from server</UiButton>
24
      <UiButton className="rv-btn" disabled={!state.ready || state.busy} onClick={() => model.openCalendars()}>Working calendars</UiButton>
25
      <label><UiInput type="checkbox" checked={state.rejectNext} disabled={state.busy} onChange={event => model.rejectNext(event.currentTarget.checked)} /> Reject next save</label>
26
      <label title="Changes appear immediately and revert if the server rejects the save."><UiInput type="checkbox" checked={state.config.remote?.optimistic} disabled={state.busy} onChange={event => model.optimistic(event.currentTarget.checked)} /> Update immediately</label>
27
    </div>
28
    <RevoGrid ref={grid} className="scheduler-remote-demo__grid" hideAttribution theme={currentTheme().isDark() ? 'darkMaterial' : 'material'} plugins={plugins} columns={columns} source={source} eventScheduler={state.config} onAftergridinit={connect} />
29
    <div ref={feedback} className="scheduler-remote-demo__activity" />
30
  </section>;
31
}

1
import { UiControlDirective } from '@revolist/ui/angular-control';
2
import { CalendarEditorDialogPlugin } from '@revolist/revogrid-pro';
3
import { AfterViewInit, Component, ElementRef, NO_ERRORS_SCHEMA, OnDestroy, ViewChild, ViewEncapsulation, signal } from '@angular/core';
4
import { RevoGrid } from '@revolist/angular-datagrid';
5
import { EventSchedulerPlugin } from '@revolist/scheduler';
6
import { currentTheme } from '../../composables/useRandomData';
7
import { createRemoteSchedulerDemo } from './demo';
8

9
@Component({
10
  selector: 'scheduler-remote-data', standalone: true, imports: [UiControlDirective, RevoGrid], schemas: [NO_ERRORS_SCHEMA], styleUrls: ['./styles.scss'], encapsulation: ViewEncapsulation.None,
11
  template: `<section class="scheduler-remote-demo">
12
    <div class="scheduler-remote-demo__controls">
13
      <button rvControl class="rv-btn" [disabled]="!state().ready || state().busy" (click)="model.rename()">Rename booking</button>
14
      <button rvControl class="rv-btn" [disabled]="!state().ready || state().busy" (click)="model.refresh()">Refresh from server</button>
15
      <button rvControl class="rv-btn" [disabled]="!state().ready || state().busy" (click)="model.openCalendars()">Working calendars</button>
16
      <label><input rvControl type="checkbox" [checked]="state().rejectNext" [disabled]="state().busy" (change)="model.rejectNext($any($event.target).checked)" /> Reject next save</label>
17
      <label title="Changes appear immediately and revert if the server rejects the save."><input rvControl type="checkbox" [checked]="state().config.remote?.optimistic" [disabled]="state().busy" (change)="model.optimistic($any($event.target).checked)" /> Update immediately</label>
18
    </div>
19
    <revo-grid #grid class="scheduler-remote-demo__grid" [hideAttribution]="true" [theme]="dark ? 'darkMaterial' : 'material'" [plugins]="plugins" [columns]="columns" [source]="source" [eventScheduler]="state().config" (aftergridinit)="connect()"></revo-grid>
20
    <div #feedback class="scheduler-remote-demo__activity"></div>
21
  </section>`,
22
})
23
export class RemoteDataComponent implements AfterViewInit, OnDestroy {
24
  @ViewChild('feedback', { read: ElementRef }) feedback!: ElementRef<HTMLElement>;
25
  @ViewChild('grid', { read: ElementRef }) grid!: ElementRef<HTMLRevoGridElement>;
26
  readonly model = createRemoteSchedulerDemo();
27
  readonly state = signal(this.model.state);
28
  readonly plugins = [EventSchedulerPlugin, CalendarEditorDialogPlugin];
29
  readonly columns = [];
30
  readonly source = [];
31
  readonly dark = currentTheme().isDark();
32
  ngAfterViewInit() { this.connect(); }
33
  connect() { if (this.grid && this.feedback) void this.model.connect(this.grid.nativeElement, next => this.state.set(next), this.feedback.nativeElement); }
34
  ngOnDestroy() { this.model.disconnect(); }
35
}

1
import { h as preactH } from 'preact';
2
import { renderPreactInto } from '@revolist/ui/preact-mount';
3
import { renderStatusFeedbackPanel, type StatusFeedbackTone } from '@revolist/ui/status-feedback/index';
4
import { CalendarEditorDialogPlugin } from '@revolist/revogrid-pro';
5
import { EventSchedulerPlugin, type EventSchedulerConfig, type EventSchedulerRemoteState } from '@revolist/scheduler';
6
import { createRemoteSchedulerClient } from './client';
7
import type { SchedulerCalendars } from './contracts';
8

9
export function createRemoteSchedulerDemo() {
10
  const server = createRemoteSchedulerClient();
11
  let calendars: SchedulerCalendars = [];
12
  let config: EventSchedulerConfig = {
13
    view: 'resourceTimeline', weekStartDate: '2026-06-08',
14
    dateRange: { start: '2026-06-08', end: '2026-06-08' },
15
    timeRange: { start: '08:00', end: '17:00' }, timeZone: 'UTC',
16
    calendars: { primaryCalendarId: 'weekday', calendars },
17
    slotMinutes: 60, timelineColumnSize: 100, allowCreate: false, allowDelete: false,
18
    // Activity owns remote progress/errors; keep the built-in empty-data state.
19
    customization: {
20
      emptyState: { properties: ({ kind }) => ({ style: { display: kind === 'empty' ? '' : 'none' } }) },
21
    },
22
    remote: {
23
      enabled: true, mode: 'remote', optimistic: true, rollbackOnError: true,
24
      loadEvents: server.loadEvents, loadResources: server.loadResources,
25
      // The application owns this save. There is no second final-event save listener.
26
      commitMutation: async request => {
27
        const reject = state.rejectNext;
28
        update({ rejectNext: false });
29
        const result = await server.commitMutation(request, reject);
30
        return result;
31
      },
32
      query: { retry: 2, refetchOnWindowFocus: false },
33
    },
34
  };
35
  let state = { config, ready: false, busy: true, rejectNext: false,
36
    message: 'Loading server data…', tone: 'neutral' as StatusFeedbackTone };
37
  let grid: HTMLRevoGridElement | undefined;
38
  let scheduler: EventSchedulerPlugin | undefined;
39
  let publish: ((next: typeof state) => void) | undefined;
40
  let calendarEditor: CalendarEditorDialogPlugin | undefined;
41
  let generation = 0;
42
  let connecting = false;
43
  let titleVersion = 0;
44
  let detach = () => {};
45
  let feedbackHost: HTMLElement | undefined;
46
  let feedbackDismissed = false;
47
  const renderFeedback = () => {
48
    if (feedbackHost) renderPreactInto(feedbackHost, feedbackDismissed ? null : renderStatusFeedbackPanel(preactH, {
49
      title: 'Activity', compact: true,
50
      onClose: () => { feedbackDismissed = true; renderFeedback(); },
51
      items: [{ id: 'remote', title: state.message, tone: state.busy ? 'neutral' : state.tone, busy: state.busy }],
52
    }));
53
  };
54
  const update = (patch: Partial<typeof state>) => {
55
    if ((patch.busy === true && !state.busy) || (patch.tone === 'neutral' && patch.message !== undefined && patch.message !== state.message)) feedbackDismissed = false;
56
    state = { ...state, ...patch }; publish?.(state); renderFeedback(); };
57
  const remoteState = (remote: EventSchedulerRemoteState) => {
58
    const busy = Object.values(remote.loading).some(Boolean) || remote.pendingEventIds.length > 0;
59
    update({ busy, ...(remote.error ? { message: `Server request failed: ${remote.error}`, tone: 'danger' as const } : {}), ...(state.message === 'Loading server data…' && !busy && remote.loaded.events ? { message: 'Bookings loaded.', tone: 'success' as const } : {}) });
60
  };
61
  return {
62
    get state() { return state; },
63
    async connect(nextGrid: HTMLRevoGridElement, onChange: typeof publish, feedback: HTMLElement) {
64
      if (grid === nextGrid && (scheduler || connecting)) return;
65
      feedbackHost = feedback;
66
      renderFeedback();
67
      connecting = true;
68
      detach(); grid = nextGrid; publish = onChange;
69
      const current = ++generation;
70
      const onState = (event: Event) => remoteState((event as CustomEvent<{ state: EventSchedulerRemoteState }>).detail.state);
71
      const pending = () => update({ message: 'Saving booking…', tone: 'neutral' });
72
      const committed = () => update({ message: 'Saved. The server returned the canonical booking.', tone: 'success', rejectNext: false });
73
      const rejected = () => update({ message: 'Save rejected. Scheduler restored the accepted booking.', tone: 'danger', rejectNext: false });
74
      const listeners = [
75
        ['event-scheduler-remote-state-change', onState],
76
        ['event-scheduler-remote-mutation-pending', pending],
77
        ['event-scheduler-remote-mutation-committed', committed],
78
        ['event-scheduler-remote-mutation-rejected', rejected],
79
      ] as const;
80
      listeners.forEach(([name, handler]) => nextGrid.addEventListener(name, handler));
81
      detach = () => listeners.forEach(([name, handler]) => nextGrid.removeEventListener(name, handler));
82
      let plugins: Awaited<ReturnType<HTMLRevoGridElement['getPlugins']>>;
83
      try {
84
        const [snapshot, activePlugins] = await Promise.all([server.read(), nextGrid.getPlugins()]);
85
        if (generation !== current) return;
86
        calendars = snapshot.calendars;
87
        config = { ...config, calendars: { ...config.calendars, calendars } };
88
        nextGrid.eventScheduler = config;
89
        update({ config });
90
        plugins = activePlugins;
91
      } catch (error) {
92
        if (generation === current) { connecting = false; update({ busy: false, ready: false, tone: 'danger', message: `Could not start the demo backend: ${error instanceof Error ? error.message : String(error)}` }); }
93
        return;
94
      }
95
      if (generation !== current) return;
96
      connecting = false;
97
      scheduler = plugins.find((plugin): plugin is EventSchedulerPlugin => plugin instanceof EventSchedulerPlugin);
98
      calendarEditor = plugins.find((plugin): plugin is CalendarEditorDialogPlugin => plugin instanceof CalendarEditorDialogPlugin);
99
      update({ ready: !!scheduler });
100
      if (scheduler) remoteState(scheduler.getRemoteState());
101
    },
102
    openCalendars() {
103
      if (!calendarEditor || state.busy) return;
104
      calendarEditor.open({
105
        calendars, selectedCalendarId: config.calendars?.primaryCalendarId,
106
        referenceDate: '2026-06-08',
107
        onSave: async nextCalendars => {
108
          if (!grid || state.busy) return false;
109
          const current = generation;
110
          update({ busy: true, message: 'Saving working calendars…', tone: 'neutral' });
111
          try { calendars = await server.saveCalendars(nextCalendars); }
112
          catch { if (generation === current) update({ busy: false, message: 'Working calendars could not be saved. Try again.', tone: 'danger' }); return false; }
113
          if (generation !== current || !grid) return false;
114
          const primary = calendars.find(item => item.id === config.calendars?.primaryCalendarId)?.id ?? calendars[0]?.id;
115
          config = { ...config, calendars: { ...config.calendars, primaryCalendarId: primary, calendars } };
116
          grid.eventScheduler = config;
117
          update({ config, busy: false, message: 'Saved working calendars and updated the Scheduler.', tone: 'success' });
118
        },
119
      });
120
    },
121
    rename() {
122
      if (!scheduler || state.busy) return;
123
      scheduler.editEvent('booking-1', { title: `Planning workshop ${++titleVersion}` });
124
    },
125
    rejectNext(value: boolean) { if (!state.busy) { update({ rejectNext: value }); } },
126
    optimistic(value: boolean) {
127
      if (state.busy) return;
128
      config = { ...config, remote: { ...config.remote, optimistic: value } };
129
      if (grid) grid.eventScheduler = config;
130
      update({ config });
131
    },
132
    async refresh() {
133
      if (!scheduler || state.busy) return;
134
      const current = generation;
135
      const activeScheduler = scheduler;
136
      update({ busy: true, message: 'Fetching server updates…', tone: 'neutral' });
137
      try {
138
        const result = await server.simulateUpdate();
139
        if (generation !== current) return;
140
        await activeScheduler.refreshVisibleRange();
141
        if (generation === current) update({ message: result.message, tone: 'success' });
142
      } catch { if (generation === current) update({ message: 'Refresh failed. Try again.', tone: 'danger' }); }
143
      finally { if (generation === current) update({ busy: false }); }
144
    },
145
    disconnect() { if (feedbackHost) renderPreactInto(feedbackHost, null); feedbackHost = undefined; ++generation; connecting = false; server.disconnect(); calendarEditor?.close(); calendarEditor = undefined; detach(); grid = undefined; scheduler = undefined; publish = undefined; state = { ...state, ready: false, busy: true }; },
146
  };
147
}

1
import type { EventSchedulerRemoteConfig } from '@revolist/scheduler';
2
import { createSchedulerTransport, jsonRequest } from '../backend-client';
3
import type { RemoteSnapshot, SchedulerCalendars } from './contracts';
4

5
export function createRemoteSchedulerClient() {
6
  const transport = createSchedulerTransport(
7
    async () => (await import('./module')).remoteSchedulerBackend,
8
    { delayMs: 600 },
9
  );
10
  const loadEvents: NonNullable<EventSchedulerRemoteConfig['loadEvents']> = ({
11
    dateRange,
12
    signal,
13
  }) =>
14
    transport.request(
15
      `/events?${new URLSearchParams({ start: dateRange.start, end: dateRange.end })}`,
16
      { signal },
17
    );
18
  const loadResources: NonNullable<
19
    EventSchedulerRemoteConfig['loadResources']
20
  > = ({ signal }) => transport.request('/resources', { signal });
21
  const commitMutation = (
22
    request: Parameters<
23
      NonNullable<EventSchedulerRemoteConfig['commitMutation']>
24
    >[0],
25
    reject: boolean,
26
  ) => {
27
    const { signal, ...mutation } = request;
28
    return transport.request<
29
      Awaited<
30
        ReturnType<NonNullable<EventSchedulerRemoteConfig['commitMutation']>>
31
      >
32
    >('/mutations', jsonRequest({ mutation, reject }, signal), true);
33
  };
34
  return {
35
    loadEvents,
36
    loadResources,
37
    commitMutation,
38
    simulateUpdate: () => transport.request<{ message: string }>('/simulate-update', { method: 'POST' }),
39
    read: () => transport.request<RemoteSnapshot>('/snapshot'),
40
    saveCalendars: (calendars: SchedulerCalendars) =>
41
      transport.request<SchedulerCalendars>('/calendars', {
42
        ...jsonRequest({ calendars }),
43
        method: 'PUT',
44
      }),
45
    disconnect: transport.disconnect,
46
  };
47
}

1
import {
2
  startDemoBackend,
3
  type DemoBackendModule,
4
  type DemoBackendSession,
5
  type DemoBackendOptions,
6
} from '@revolist/revogrid-examples/demo-api-mocks';
7

8
/** One lazy HTTP session per mounted model. Reconnect starts a fresh lifetime. */
9
export function createSchedulerTransport(
10
  loadBackend: () => Promise<DemoBackendModule>,
11
  options: DemoBackendOptions = {},
12
) {
13
  let lifetime = new AbortController();
14
  let pending: Promise<DemoBackendSession> | undefined;
15
  const session = () => {
16
    if (!pending) {
17
      const owner = lifetime;
18
      pending = (async () => {
19
        const backend = await loadBackend();
20
        owner.signal.throwIfAborted();
21
        const active = await startDemoBackend(backend, options);
22
        if (owner.signal.aborted) {
23
          active.dispose();
24
          owner.signal.throwIfAborted();
25
        }
26
        owner.signal.addEventListener('abort', () => active.dispose(), {
27
          once: true,
28
        });
29
        return active;
30
      })();
31
    }
32
    return pending;
33
  };
34
  return {
35
    async request<T>(
36
      path: string,
37
      init: RequestInit = {},
38
      domainRejection = false,
39
    ): Promise<T> {
40
      const signal = init.signal
41
        ? AbortSignal.any([lifetime.signal, init.signal])
42
        : lifetime.signal;
43
      signal.throwIfAborted();
44
      const active = await session();
45
      signal.throwIfAborted();
46
      const response = await fetch(`${active.apiUrl}${path}`, {
47
        ...init,
48
        signal,
49
      });
50
      const value = await response.json();
51
      signal.throwIfAborted();
52
      if (
53
        !response.ok &&
54
        !(
55
          domainRejection &&
56
          response.status === 409 &&
57
          value?.accepted === false
58
        )
59
      ) {
60
        throw Object.assign(
61
          new Error(value?.message ?? `Request failed (${response.status}).`),
62
          { status: response.status },
63
        );
64
      }
65
      return value as T;
66
    },
67
    disconnect() {
68
      lifetime.abort();
69
      lifetime = new AbortController();
70
      pending = undefined;
71
    },
72
  };
73
}
74

75
export const jsonRequest = (
76
  body: unknown,
77
  signal?: AbortSignal,
78
): RequestInit => ({
79
  method: 'POST',
80
  headers: { 'Content-Type': 'application/json' },
81
  body: JSON.stringify(body),
82
  signal,
83
});

1
import { http, HttpResponse } from 'msw';
2
import type { DemoBackendModule } from '@revolist/revogrid-examples/demo-api-mocks';
3
import { createRemoteDemoServer } from './server';
4
import type { MutationBody, SchedulerCalendars } from './contracts';
5

6
export const remoteSchedulerBackend: DemoBackendModule = {
7
  id: 'scheduler-remote',
8
  create({ apiUrl }) {
9
    const server = createRemoteDemoServer(0);
10
    const badRequest = () =>
11
      HttpResponse.json(
12
        { message: 'Invalid Scheduler request.' },
13
        { status: 400 },
14
      );
15
    return {
16
      handlers: [
17
        // Demo-only external activity; ordinary event reads stay side-effect free.
18
        http.post(`${apiUrl}/simulate-update`, async ({ request }) =>
19
          HttpResponse.json(await server.simulateUpdate(request.signal)),
20
        ),
21
        http.get(`${apiUrl}/snapshot`, () =>
22
          HttpResponse.json({
23
            events: server.readSaved(),
24
            calendars: server.readCalendars(),
25
          }),
26
        ),
27
        http.get(`${apiUrl}/events`, async ({ request }) => {
28
          const query = new URL(request.url).searchParams;
29
          const start = query.get('start');
30
          const end = query.get('end');
31
          // This fixed-date demo accepts canonical civil-date range keys only.
32
          if (
33
            !start ||
34
            !end ||
35
            start.length !== 10 ||
36
            end.length !== 10 ||
37
            start > end
38
          )
39
            return badRequest();
40
          return HttpResponse.json(
41
            await server.loadEvents({
42
              dateRange: { start, end },
43
              signal: request.signal,
44
            } as Parameters<typeof server.loadEvents>[0]),
45
          );
46
        }),
47
        http.get(`${apiUrl}/resources`, async ({ request }) =>
48
          HttpResponse.json(
49
            await server.loadResources({ signal: request.signal } as Parameters<
50
              typeof server.loadResources
51
            >[0]),
52
          ),
53
        ),
54
        http.post(`${apiUrl}/mutations`, async ({ request }) => {
55
          let body: MutationBody;
56
          try {
57
            body = (await request.json()) as MutationBody;
58
          } catch {
59
            return badRequest();
60
          }
61
          const mutation = body?.mutation;
62
          if (
63
            !mutation ||
64
            !['create', 'edit', 'move', 'resize', 'delete'].includes(
65
              mutation.action,
66
            ) ||
67
            typeof body.reject !== 'boolean' ||
68
            (mutation.action !== 'delete' &&
69
              (!mutation.event ||
70
                typeof mutation.event.title !== 'string' ||
71
                mutation.event.id !== mutation.eventId))
72
          )
73
            return badRequest();
74
          const result = await server.commitMutation(
75
            { ...mutation, signal: request.signal },
76
            body.reject,
77
          );
78
          return HttpResponse.json(result, {
79
            status: result.accepted ? 200 : 409,
80
          });
81
        }),
82
        http.put(`${apiUrl}/calendars`, async ({ request }) => {
83
          let calendars: SchedulerCalendars;
84
          try {
85
            ({ calendars } = (await request.json()) as {
86
              calendars: SchedulerCalendars;
87
            });
88
          } catch {
89
            return badRequest();
90
          }
91
          if (
92
            !Array.isArray(calendars) ||
93
            calendars.some(
94
              (item) =>
95
                !item ||
96
                typeof item.id !== 'string' ||
97
                typeof item.name !== 'string',
98
            )
99
          )
100
            return badRequest();
101
          request.signal.throwIfAborted();
102
          server.saveCalendars(calendars);
103
          return HttpResponse.json(server.readCalendars());
104
        }),
105
      ],
106
    };
107
  },
108
};

1
import { commonColors } from '@revolist/ui/color-palette/common-palettes';
2
import type { EventSchedulerConfig, EventSchedulerEventEntity, EventSchedulerRemoteConfig, EventSchedulerRemoteMutationRequest, EventSchedulerResourceEntity } from '@revolist/scheduler';
3

4
/** Per-demo simulation. Replace these callbacks with authenticated application APIs. */
5
export function createRemoteDemoServer(delayMs = 600) {
6
  const resources: EventSchedulerResourceEntity[] = [
7
    { id: 'room-a', name: 'Room A' },
8
    { id: 'room-b', name: 'Room B' },
9
    { id: 'room-c', name: 'Room C' },
10
    { id: 'studio', name: 'Design studio' },
11
    { id: 'boardroom', name: 'Boardroom' },
12
  ];
13
  const bookings = [
14
    ['room-a', 'Planning workshop', '09:00', '11:00', 'confirmed'],
15
    ['room-a', 'Client review', '13:00', '14:00', 'planned'],
16
    ['room-b', 'Team standup', '08:00', '09:00', 'completed'],
17
    ['room-b', 'Product demo', '10:00', '11:30', 'confirmed'],
18
    ['room-b', 'Sprint retrospective', '14:00', '15:30', 'planned'],
19
    ['room-c', 'Candidate interview', '09:00', '10:00', 'confirmed'],
20
    ['room-c', 'Onboarding', '11:00', '13:00', 'planned'],
21
    ['studio', 'Design critique', '08:30', '10:00', 'confirmed'],
22
    ['studio', 'Prototype session', '11:30', '13:00', 'draft'],
23
    ['studio', 'Recording session', '15:00', '17:00', 'planned'],
24
    ['boardroom', 'Strategy session', '09:00', '12:00', 'confirmed'],
25
    ['boardroom', 'Partner meeting', '14:00', '16:00', 'planned'],
26
  ];
27
  let events: EventSchedulerEventEntity[] = bookings.map(([resourceId, title, start, end, status], index) => ({
28
    id: `booking-${index + 1}`, resourceId, title, status,
29
    startDateTime: `2026-06-08T${start}:00.000Z`, endDateTime: `2026-06-08T${end}:00.000Z`,
30
  }));
31
  let serverRevision = 0;
32
  let calendars: NonNullable<NonNullable<EventSchedulerConfig['calendars']>['calendars']> = [{
33
    id: 'weekday', holidays: [], name: 'Weekday booking hours', timeZone: 'UTC', workingDays: [1, 2, 3, 4, 5],
34
    workingHours: { start: '08:00', end: '17:00' }, hoursPerDay: 9,
35
  }];
36
  let rejectNext = false;
37
  const wait = (signal: AbortSignal) => new Promise<void>((resolve, reject) => {
38
    signal.throwIfAborted();
39
    const abort = () => { clearTimeout(timer); reject(signal.reason); };
40
    const timer = setTimeout(() => { signal.removeEventListener('abort', abort); resolve(); }, delayMs);
41
    signal.addEventListener('abort', abort, { once: true });
42
  });
43
  const loadEvents: NonNullable<EventSchedulerRemoteConfig['loadEvents']> = async ({ dateRange, signal }) => {
44
    await wait(signal);
45
    signal.throwIfAborted();
46
    return { events: structuredClone(events.filter(event =>
47
      event.startDateTime.slice(0, 10) <= dateRange.end && event.endDateTime.slice(0, 10) >= dateRange.start)), rangeComplete: true };
48
  };
49
  const loadResources: NonNullable<EventSchedulerRemoteConfig['loadResources']> = async ({ signal }) => {
50
    await wait(signal);
51
    signal.throwIfAborted();
52
    return { resources: structuredClone(resources), hasMore: false };
53
  };
54
  const commitMutation = async ({ event, eventId, action, signal }: EventSchedulerRemoteMutationRequest, reject?: boolean) => {
55
    await wait(signal);
56
    signal.throwIfAborted();
57
    if (reject ?? rejectNext) {
58
      rejectNext = false;
59
      return { accepted: false, message: 'The server rejected this save. The saved booking is unchanged.' };
60
    }
61
    if (action === 'delete') {
62
      events = events.filter(item => item.id !== eventId);
63
      return { accepted: true };
64
    }
65
    if (!event) return { accepted: false, message: 'An event is required.' };
66
    // Canonical response from the application endpoint, detached from Scheduler state.
67
    const canonical = structuredClone({ ...event, title: (event.title ?? '').trim() });
68
    events = events.some(item => item.id === canonical.id)
69
      ? events.map(item => item.id === canonical.id ? canonical : item)
70
      : [...events, canonical];
71
    return { accepted: true, event: structuredClone(canonical) };
72
  };
73
  return {
74
    loadEvents, loadResources, commitMutation,
75
    async simulateUpdate(signal: AbortSignal) {
76
      await wait(signal);
77
      signal.throwIfAborted();
78
      const revision = ++serverRevision;
79
      const afternoon = revision % 2 === 1;
80
      events = events.filter(event => event.id !== 'server-booking').map(event => event.id === 'booking-2' ? {
81
        ...event, title: `Client review · updated ${revision}`, status: 'confirmed',
82
        color: commonColors.rgb_190_91_0,
83
        startDateTime: afternoon ? '2026-06-08T14:00:00.000Z' : '2026-06-08T13:00:00.000Z',
84
        endDateTime: afternoon ? '2026-06-08T15:00:00.000Z' : '2026-06-08T14:00:00.000Z',
85
      } : event);
86
      events.push({
87
        id: 'server-booking', resourceId: 'room-c', color: commonColors.hex166534, title: `New server booking · ${revision}`, status: 'confirmed',
88
        startDateTime: afternoon ? '2026-06-08T14:00:00.000Z' : '2026-06-08T15:00:00.000Z',
89
        endDateTime: afternoon ? '2026-06-08T15:00:00.000Z' : '2026-06-08T16:00:00.000Z',
90
      });
91
      return { message: `Server update ${revision}: Client review moved; ${revision === 1 ? 'new booking added in' : 'server booking moved in'} Room C.` };
92
    },
93
    readCalendars() { return structuredClone(calendars); },
94
    saveCalendars(next: typeof calendars) { calendars = structuredClone(next); },
95
    rejectNextSave(value: boolean) { rejectNext = value; },
96
    readSaved() { return structuredClone(events); },
97
  };
98
}

1
import type {
2
  EventSchedulerConfig,
3
  EventSchedulerEventEntity,
4
  EventSchedulerRemoteMutationRequest,
5
} from '@revolist/scheduler';
6
export type SchedulerCalendars = NonNullable<
7
  NonNullable<EventSchedulerConfig['calendars']>['calendars']
8
>;
9
export interface RemoteSnapshot {
10
  events: EventSchedulerEventEntity[];
11
  calendars: SchedulerCalendars;
12
}
13
export interface MutationBody {
14
  mutation: Omit<EventSchedulerRemoteMutationRequest, 'signal'>;
15
  reject: boolean;
16
}

This demo uses native fetch() with an isolated browser backend. Saved events stay outside the grid, and a short delay makes pending saves visible. No Node server is needed; reloading resets the data.

Rename the booking to save a change and receive the server’s accepted event.
Enable Reject next save, then rename again to see the edit roll back.
Turn off Optimistic updates, then rename again. The saved title stays visible until the server accepts the change.
Open Working calendars to edit working days, hours and exceptions. Choose Save to apply or Cancel to discard.
Choose Refresh from server to reload saved data without resubmitting a save.

Expand the source panel above to compare all four frameworks and inspect the HTTP client and backend. To connect your own API, replace the demo’s loadEvents, loadResources and commitMutation callbacks.

Open the full Scheduler demo.

See Remote Data for query policy and Mutations and App-Owned Saving for rollback and receipts. This demo covers accepted and rejected saves; durable receipt recovery and backend deployment are outside its scope.