- Manage appointments and view your calendar + Master your appointment calendar with drag-and-drop scheduling
@@ -64,10 +76,14 @@ const HelpScheduler: React.FC = () => {- The Scheduler is your central hub for managing all appointments and events. It provides a visual calendar interface that lets you see availability, book new appointments, and manage existing bookings efficiently. + The Scheduler is a powerful, interactive calendar designed for fast appointment management. + It features full drag-and-drop support, real-time updates via WebSocket, and a horizontal timeline + layout that shows all your resources (staff, rooms, equipment) at once.
- The scheduler supports multiple view modes and filtering options to help you find exactly what you need, whether you're looking at a single day or planning weeks ahead. + You can reschedule appointments by dragging them, resize them by pulling their edges, + filter by status/resource/service, and even undo mistakes with keyboard shortcuts. + Pending appointment requests appear in a sidebar, ready to be dragged onto the schedule.
- See all appointments for a single day in a detailed timeline format. Best for managing busy days with many appointments. + See a single day in detail with a horizontal timeline. Each resource gets its own row. + The timeline scrolls horizontally and auto-centers on the current time when you open it. + Perfect for managing a busy day with many appointments across multiple staff or rooms.
- View an entire week at once, ideal for planning and understanding weekly patterns. See appointments across all days. + View all 7 days side-by-side with each day separated on the timeline. + Drag appointments between days or across resources. Great for weekly planning + and seeing patterns in your schedule.
+ Traditional calendar grid showing the entire month. Each day cell shows a summary of + appointments for that day, color-coded by status. +
++ Drag-and-drop is the fastest way to manage your schedule. Simply click and drag any + appointment to reschedule it. +
+- Get a high-level overview of the entire month. Great for identifying busy periods and planning ahead. + Drag an appointment left or right to change its time, or up/down to move it to a + different resource. The appointment snaps to 15-minute increments. A ghost preview + shows where it will land. +
++ Pending appointments (from online booking or manual entry) appear in the sidebar on + the right. Drag them onto the timeline to schedule them - they'll automatically be + confirmed. The pending sidebar shows customer name, service, and requested duration. +
++ Drag a scheduled appointment back to the pending sidebar to unschedule it. + The appointment returns to pending status and can be rescheduled later. +
++ Drag an appointment to the archive zone at the bottom of the pending sidebar to + delete it permanently. This is useful for removing cancelled or test appointments.
+ Change an appointment's duration by dragging its edges. This is helpful when a service + takes more or less time than expected. +
+- Click on any time slot to create a new appointment. Select customer, service, and resource. + Hover over the right edge of an appointment until you see the resize cursor, + then drag right to make it longer. Duration snaps to 15-minute increments. + Minimum duration is 15 minutes.
- Click on any existing appointment to modify its details, reschedule, or add notes. + Drag the left edge to change when the appointment starts. Dragging left makes + it start earlier (and longer), dragging right makes it start later (and shorter). +
++ Appointments are color-coded so you can see their status at a glance: +
++ Use the filter button in the toolbar to narrow down what you see: +
++ Show or hide appointments by status (Pending, Confirmed, Completed, Cancelled, No-show). + Useful for focusing on confirmed appointments only or finding no-shows.
- Filter the calendar to show only specific staff members, rooms, or equipment. + Show only specific staff members, rooms, or equipment. Great for viewing one + person's schedule or a specific treatment room.
- Appointments are color-coded by status: scheduled, confirmed, completed, cancelled, no-show. + Show only appointments for specific services. Helpful for tracking how often + certain services are booked or finding all massage appointments. +
++ A badge appears on the filter button when filters are active. Click "Clear All" to reset. +
+Undo the last move or resize
+Redo the last undone action
+Alternative redo shortcut
++ The scheduler keeps a history of up to 50 actions, so you can undo multiple changes. +
++ Adjust the zoom level to see more or less detail in the timeline (Day and Week views only): +
++ Use the zoom slider in the toolbar to adjust. The timeline width scales proportionally. +
++ When appointments overlap in time for the same resource, the scheduler automatically + stacks them in multiple "lanes" so you can see all of them: +
++ The sidebar on the right shows all pending (unscheduled) appointment requests: +
++ The scheduler uses WebSocket connections to update in real-time: +
++ Click on any appointment to open its detail modal where you can: +
++ Use the date/time picker for precise scheduling +
++ Move the appointment to a different staff member or room +
++ Change how long the appointment lasts +
++ Mark as completed, no-show, or cancelled
- Click "Scheduler" in the sidebar to open the calendar view. -
-- Select day, week, or month view using the view toggle buttons. -
-- Click the "+" button or click on an empty time slot to open the appointment form. -
-- Select a customer, choose a service, pick an available resource, and set the time. -
-- Click "Save" to create the appointment. Customers can receive automatic notifications. -
-