Working Calendar

import { useRef, useEffect } from 'react';
import { WorkingCalendarEditor, WorkingCalendarEditorRef } from '@timelinekit/react';
import { WorkingCalendar, WorkingShift, TimeOfDay } from '@timelinekit/core';
import '@timelinekit/core/styles';

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

  useEffect(() => {
    if (!ref.current) return;
    const cal = new WorkingCalendar();
    cal.workingDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
    cal.shifts = [
      new WorkingShift(new TimeOfDay(8, 0), new TimeOfDay(12, 0)),
      new WorkingShift(new TimeOfDay(13, 0), new TimeOfDay(17, 0)),
    ];
    cal.startOfWeek = 'monday';
    cal.nationalHolidays = [new Date(2026, 0, 1), new Date(2026, 11, 25)];
    ref.current.calendar = cal;
  }, []);

  return (
    <div style={{ maxWidth: 420 }}>
      <WorkingCalendarEditor ref={ref} />
    </div>
  );
}