Calendar Views
Navigate your bookings with month, week, day, and list calendar views.
The calendar is the central view for managing your daily operations. It is powered by FullCalendar and adapts automatically to your screen size, providing a full-featured experience on both desktop and mobile devices.
View Modes
Switch between views using the tabs at the top of the calendar:
| View | Description | Best for |
|---|---|---|
Month (dayGridMonth) | Overview of all bookings across the month. Shows up to 3 events per day on desktop (2 on mobile) before collapsing with a "+more" link. | Long-range planning, spotting busy days |
Week (timeGridWeek) | Detailed view of the current week with time slots on the vertical axis. | Day-to-day scheduling, seeing time distribution |
Day (timeGridDay) | Hour-by-hour view of a single day. | Operational management, detailed daily view |
List (listMonth) | A flat, scrollable list of bookings for the month. | Quick scanning, searching for specific bookings |
On mobile devices (screens under 768px), the calendar defaults to a compact view. On medium screens (768px-1200px), it defaults to the week view. On large screens, it defaults to the month view.
Navigating the Calendar
- Use the arrow buttons (prev/next) to move forward and backward in time
- Click Today to jump back to the current date
- On desktop, click on any date number to navigate into the day view for that date (nav links are disabled on mobile to prevent accidental navigation while scrolling)
Interacting with Bookings
Click on any booking event in the calendar to open the booking detail panel. The detail panel slides in from the right and displays the full BookingComponent view, allowing you to review and edit the booking without leaving the calendar page.
To close the detail panel, click the X button or click elsewhere on the calendar.
Creating Bookings from the Calendar
Navigate to the New Booking page using the button in the dashboard header, or click directly on a time slot in the calendar. The selected time will be pre-filled in the booking creation wizard.
See Creating Bookings for the full wizard walkthrough.
Filtering
Filter the calendar by:
- Activity — show only bookings for a specific activity
- Facilitator — show only bookings assigned to a specific guide
- Status — show only bookings with a specific status (confirmed, pending, draft, canceled)
Filters are applied in real-time and persist as you navigate between dates and views.
Color Coding
Bookings are color-coded by status and can also be customized by booking source:
Status Colors
- Confirmed bookings are shown in the primary color
- Pending bookings are shown in a muted tone
- Draft bookings are shown with a lighter, desaturated style
- Cancelled bookings are shown with a strikethrough
Source Colors
Each booking source (e.g., online, admin, external integrations) can have a custom color assigned in your location settings. The calendar event background and text color are set dynamically, with text automatically adjusting for contrast against the background.
Mobile Behavior
On mobile devices, the calendar adapts with several optimizations:
- The header toolbar is simplified: navigation arrows on the left, title in the center, and a "Today" button on the right
- Touch-based scrolling is detected to prevent accidental event clicks while swiping
- Event dragging and resizing is disabled on mobile
- The day max events limit is reduced to 2 to keep the view compact
Booking List View
In addition to the calendar, the Booking List page provides a searchable, paginated table of all bookings. You can search by customer name, confirmation code, or email. The list view is accessible from the main booking navigation and supports the same status-based filtering as the calendar.