Build with WTS Calendar

npm create vite@latest my-calendar -- --template vanilla-ts
cd my-calendar
npm install
npm install @wts-calendar/core@1.1.5
npm run dev

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My WTS Calendar</title>
</head>
<body>
  <div id="calendar"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

import { WtsCalendar } from '@wts-calendar/core';
import './style.css';

const container = document.querySelector<HTMLElement>('#calendar');
if (!container) throw new Error('Missing calendar container');

const calendar = new WtsCalendar({
  container,
  ...{ view: 'month' as const, viewDate: '2026-09-07', height: 'auto' as const },
  events: [{ id: 'hello', title: 'Team planning', start: '2026-09-07T10:00:00', end: '2026-09-07T11:00:00' }],
});

// Vite cleanup runs only when this module is replaced during development.
if (import.meta.hot) import.meta.hot.dispose(() => calendar.destroy());
// In your app, call calendar.destroy() when removing its container.

@import '@wts-calendar/core/styles/calendar.css';

body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; }
#calendar { max-width: 1000px; margin: auto; }

composer require wts-calendar/server-php:^1.0 nyholm/psr7

<?php

use Nyholm\Psr7\Factory\Psr17Factory;
use WtsCalendar\Server\CalendarApiHandler;
use WtsCalendar\Server\CalendarApiOptions;
use WtsCalendar\Server\CalendarEventStoreInterface;

$psr17 = new Psr17Factory();
$handler = new CalendarApiHandler(
    $container->get(CalendarEventStoreInterface::class),
    $psr17,
    $psr17,
    new CalendarApiOptions(
        requireIfMatchForUpdate: true,
        requireIfMatchForDelete: true,
    ),
);

// $request is the host application's PSR-7 ServerRequestInterface.
$response = $handler->handle($request);

import {
  CalendarDataClient,
  createRestCalendarDataAdapter,
} from '@wts-calendar/core/data-adapter-sdk';

const endpoint = 'https://api.example.com/api/calendar/events';

export const calendarEvents = new CalendarDataClient(
  createRestCalendarDataAdapter({
    url: endpoint,
    mutationUrl: ({ type, id }) =>
      type === 'create'
        ? endpoint
        : `${endpoint}/${encodeURIComponent(id ?? '')}`,
    headers: async () => ({
      authorization: `Bearer ${await accessToken()}`,
    }),
  }),
);

import { useEffect, useState } from 'react';
import { WtsCalendarNative } from '@wts-calendar/react-native';
import type { NativeCalendarEventInput } from '@wts-calendar/react-native';

const endpoint = 'https://api.example.com/api/calendar/events';

export function Schedule({ accessToken }: { accessToken: string }) {
  const [events, setEvents] = useState<readonly NativeCalendarEventInput[]>([]);

  useEffect(() => {
    const query = new URLSearchParams({
      start: '2026-09-01T00:00:00Z',
      end: '2026-10-01T00:00:00Z',
      timeZone: 'UTC',
    });
    fetch(`${endpoint}?${query}`, {
      headers: { authorization: `Bearer ${accessToken}` },
    })
      .then((response) => {
        if (!response.ok) throw new Error('Calendar request failed');
        return response.json();
      })
      .then((page) => setEvents(page.records));
  }, [accessToken]);

  return <WtsCalendarNative events={events} />;
}