Resource Scheduler

import { useRef, useCallback } from 'react';
import { ResourceScheduler, ResourceSchedulerRef,
         SchedulerResource, SchedulerEvent } from '@timelinekit/react';
import '@timelinekit/core/styles';

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

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

  const handleReady = useCallback(() => {
    const scheduler = ref.current;
    if (!scheduler) return;

    const r1 = new SchedulerResource('r1', 'Alice Johnson');
    r1.type = 'person';
    scheduler.data.addResource(r1);

    const r2 = new SchedulerResource('r2', 'Bob Smith');
    r2.type = 'person';
    scheduler.data.addResource(r2);

    const r3 = new SchedulerResource('r3', 'Boardroom A');
    r3.type = 'room';
    scheduler.data.addResource(r3);

    scheduler.data.addEvent(new SchedulerEvent('e1', 'r1', 'Sprint Planning',
      day(1, 9), day(3, 17)));
    scheduler.data.addEvent(new SchedulerEvent('e2', 'r2', 'UI Design',
      day(4, 9), day(6, 17)));
    scheduler.data.addEvent(new SchedulerEvent('e3', 'r3', 'Team Workshop',
      day(7, 9), day(9, 17)));

    scheduler.zoomToFit();
  }, []);

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