Resource Calendar
The admin's central hub for viewing, creating, editing, and filtering all bookings across three calendar views — month, week, and day.
Overview
The Resource Calendar gives administrators a complete picture of booking activity. All confirmed, pending, and cancelled appointments are shown as colour-coded events that match the resource's accent colour. Admins can switch between month, week, and day granularity; filter by status and resource; create new bookings by clicking empty cells; and edit existing bookings by clicking their events.
Three Views
Month gives a high-level density overview. Week shows each day as a column with hourly rows. Day shows a single day's full timeline in detail.
Filters
Filter by booking status (All / Confirmed / Pending / Cancelled) and by resource. Filters combine — you can see only Confirmed bookings for a specific room.
Quick Create
Click any empty cell in Week or Day view to open the New Booking modal pre-populated with that date. In Month view, clicking a day number switches to Day view for that date.
Inline Edit
Click any event to open the Edit Booking modal. Change the customer details, time, status, or notes and save without leaving the calendar.
Calendar Views
Month View
A traditional grid of all days in the current month. Each day cell shows up to three booking pills (name + start time). If more than three bookings exist on a day, a "+N more" count is shown. Clicking a day cell switches to Day view for that date. Today's date is highlighted with a primary-colour circle.
Week View
Seven day columns (Sun–Sat) with hourly rows from 07:00 to 21:00. Each booking appears as a coloured pill in the cell that matches its start hour. The current day column is highlighted. Clicking an empty cell opens the New Booking modal with the clicked date pre-filled. Bookings are shown by start hour only — multi-hour bookings that span rows appear only in the first row.
Navigating weeks
Use the left (‹) and right (›) arrow buttons in the filter bar to step backward or forward one week at a time. The date range label in the centre updates to show the week span (e.g. "Jun 15 – Jun 21, 2025").
Day View
A single day's timeline from 07:00 to 21:00. Each booking is shown as a full-width card with its time range, customer name, and status badge. Empty hours display a faint "+ New Booking" prompt that opens the booking modal when clicked.
Toolbar Controls
| Control | Row | Action |
|---|---|---|
| Add Resource | Row 1 (title bar) | Opens the Resource Configuration modal to create a new bookable resource |
| New Booking | Row 1 (title bar) | Opens the Booking Details modal; date defaults to the current reference date |
| Refresh | Row 1 (title bar) | Reloads resources and bookings from the server |
| Export | Row 1 (title bar) | Downloads a CSV file (bookings-YYYY-MM-DD.csv) of all currently visible bookings, respecting the active status filter and resource filter. The file contains 12 columns: ID, Resource, Type, Customer Name, Email, Phone, Date, Start Time, End Time, Status, Notes, and Created At. The button is disabled when no bookings match the current filters. |
| ‹ / › | Row 2 (filter bar) | Navigate backward / forward one month, week, or day depending on active view |
| Month / Week / Day | Row 2 (filter bar) | Switch calendar granularity; preserves the reference date |
| Status filter pills | Row 2 (filter bar) | Show all bookings or filter to Confirmed / Pending / Cancelled only |
| Resource dropdown | Row 2 (filter bar) | Limit events to one specific resource or show all resources |
Booking Edit Modal
Clicking any booking event opens the Booking Details modal with all fields editable:
- Resource — change which resource the booking is against.
- Customer Name / Email / Phone — update contact details.
- Status — move between Confirmed, Pending, Cancelled, and Completed.
- Date / Start Time / End Time — reschedule to a different slot.
- Notes — add or update internal notes.
The Delete button (bottom-left, edit mode only) shows an inline confirmation before permanently removing the booking.
Deleting vs Cancelling
Deleting removes the booking record permanently. Cancelling (via the Status dropdown) sets the status to Cancelled and keeps the record for reporting and audit purposes. Prefer cancellation over deletion unless the record is a test entry.
Resource Configuration Modal
Clicking Add Resource opens the Resource Configuration modal. Every field maps directly to a property in BookingResource:
| Field | Type | Notes |
|---|---|---|
| Resource Name | Text | Required — shown to customers on the booking page |
| Type | Dropdown | service / room / instructor / equipment |
| Description | Textarea | Short blurb shown on the resource card |
| Duration (min) | Number | Length of each appointment in minutes; minimum 15, step 15 |
| Price | Number | Set to 0 for free resources; used for invoice integration |
| Slot Interval (min) | Number | Gap between slot start times; equal to Duration for back-to-back slots |
| Start Hour / End Hour | Number | Operating window in 24 h format (e.g. 9 and 17 for 09:00–17:00) |
| Buffer (min) | Number | Dead time reserved after each booking; prevents overlapping prep/cleanup |
| Max Per Day | Number | Hard cap on daily bookings regardless of remaining time |
| Cancellation (h) | Number | Minimum hours notice required to cancel without restriction |
| Available Days | Day toggles | Click each day abbreviation to toggle availability; active days are highlighted |
| Requires Approval | Toggle | When on, new bookings land in Pending status until an admin confirms |
Event Colours
Each resource is assigned an accent color property when it is created. Calendar events use a semi-transparent version of this colour as the pill background and the full colour for the text, making it easy to visually distinguish bookings from different resources at a glance. The four demo resources ship with these colours:
| Resource | Colour |
|---|---|
| Consultation Call | #6366f1 (indigo) |
| Conference Room A | #10b981 (emerald) |
| Technical Training | #f59e0b (amber) |
| Field Service Appointment | #ef4444 (red) |
Frequently Asked Questions
updateBooking(id, { status: 'completed' }) for all Confirmed bookings whose date is in the past.