NextChair/docs/calendar.md

Calendar

A living reference for the day calendar on /staff (a barber's own day) and /owner/calendar (everyone, one column per barber). Both render src/features/staff/components/day-calendar.tsx.

What it's built on

react-big-calendar (MIT) with its drag-and-drop addon, restyled to match the app in day-calendar.css (scoped under .day-cal). It was chosen over DayPilot Lite mainly because per-barber columns, a current-time line and sideways scrolling on a phone all work out of the box; FullCalendar and Schedule-X put per-resource columns behind a paid licence.

Only the day view is used. The agenda (list) view is a separate component.

Time zones — read this before touching it

The library works in JavaScript Dates, which carry the browser's time zone; the app's scheduling data is business-local minutes since midnight on a business-local date. So the calendar never sees a real instant: times go in as "floating" dates (minutes laid onto one fixed day — calendar-time.ts) and a drop comes back out as plain minutes. The real date and the business time zone are applied on the server in moveCalendarAppointmentAction.

Drag to reschedule

Turned on per page with the reschedule prop ("owner" or "staff").

• A drop never saves on its own. It opens a confirmation ("From 11:00 AM with Leo → To 1:00 PM with Leo… the customer will be notified"), because a reschedule emails the customer.
• "owner": any appointment in the business, and it can be dropped into another barber's column (a reassignment). "staff": their own bookings, along the time axis only.
• Only pending_approval, confirmed and arrived bookings can be moved — the same statuses rescheduleBooking accepts. Breaks, time off, and finished or in-progress bookings are not draggable. Resizing (changing the length) is off: duration comes from the services.
• The server is the gate. moveCalendarAppointmentAction delegates to the existing ownerRescheduleAppointmentAction / rescheduleStaffAppointmentAction, so working hours, breaks, overlaps, the staff member's services, the business's minimum-notice rule, the audit log, notifications, reminders and Google Calendar sync all behave exactly as they do from the appointment screen. A rejected move shows the reason inside the dialog and nothing is saved.
• The calendar itself does not stop you dropping onto a break or outside someone's hours — it just fails the server check.

Phones

Columns keep a 190px minimum and the grid scrolls sideways, with the hour labels pinned on the left and the header row scrolling with it. Dragging was verified with a mouse only; the library has touch handlers but this has not been tried on a real touch screen. The appointment screen's Reschedule always works.