Event Calendar

import { useRef, useEffect } from 'react';
import { EventCalendar, EventCalendarRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

function day(offset: number, hour?: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  if (hour !== undefined) d.setHours(hour, 0, 0, 0);
  return d.toISOString();
}

function date(offset: number) {
  const d = new Date();
  d.setDate(d.getDate() + offset);
  return d.toISOString().slice(0, 10);
}

export default function App() {
  const ref = useRef<EventCalendarRef>(null);

  useEffect(() => {
    ref.current?.load(JSON.stringify({
      calendars: [
        { id: 'c1', name: 'Work', color: 0, isVisible: true, isDefault: true },
        { id: 'c2', name: 'Personal', color: 3, isVisible: true },
      ],
      items: [
        { id: '1', calendarId: 'c1', title: 'Sprint Planning',
          startTime: day(0, 9), endTime: day(0, 11), type: 'meeting' },
        { id: '2', calendarId: 'c1', title: 'Code Review',
          startTime: day(1, 14), endTime: day(1, 15), type: 'appointment' },
        { id: '3', calendarId: 'c2', title: 'Vacation',
          startTime: date(3), endTime: date(7), isAllDay: true, type: 'holiday' },
      ],
    }));
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <EventCalendar ref={ref} />
    </div>
  );
}