56 lines
2.8 KiB
Markdown
56 lines
2.8 KiB
Markdown
# 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](https://github.com/jquense/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 `Date`s, 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.
|