Click to book, click-and-drag for duration

Booking by hand is the most common edit operators make. The calendar makes it as cheap as possible: see, click, fill, save.

Hover preview

Move your cursor over an empty cell in the grid. A faint dashed block appears at the 15-minute slot the cursor is on, with the slot’s time printed inside it (9:30 AM, or 09:30 if you’re on the 24-hour clock). A more prominent line marks the snap row so the target is unambiguous.

The preview disappears the moment you start an event drag (so it doesn’t compete with the snap-target ghost) and on touch devices (no hover state).

Click to create

Click the previewed slot → the New Appointment modal opens with:

• Date = the day you’re viewing
• Time = the snapped slot time
• Staff = the staff column you clicked on

The service, customer, and notes are still yours to fill in. If this customer has been here before, see the typeahead.

Click-and-drag for duration

Press in an empty cell and drag down to pick a duration. A translucent dashed ghost grows from the start to the cursor. On release, the modal opens with start time and end time both prefilled.

If the drag distance is less than 15 minutes, it falls back to click-mode (just sets start, lets the service determine duration).

Right-click empty cell

Right-click an empty cell (or long-press on touch) → context menu with two items:

• New appointment — same as left-click; opens the modal with date/time/staff prefilled.
• Block this time — opens the Block Time modal with the staff and start time prefilled. Useful for marking lunch, training, vacation.

What “snap” means

The cursor’s exact pixel position rounds to the nearest 15-minute boundary (5-minute at 4× zoom). The hover preview and the click target both round to the same boundary, so what you see is what you get.

If you want a non-snapped time (e.g., 4:07 PM), open the modal with a snapped time and edit the time field directly. The modal accepts any HH:MM input.

What about all-day?

Click-to-create always sets a timed slot. To create an all-day event, click the + button in the top bar (or any other normal modal entry point), then check the All-day event box in the modal. The time picker hides, the booking spans the full day.