Reservation Calendar
Overview
The Reservation Calendar gives facility managers a visual overview of all bookings and lets them create new reservations by tapping an empty time slot. It is available on the Calendar tab of the Booking Management dashboard.
The calendar has three view modes:
| View | Layout | Best for |
|---|---|---|
| Month | Date grid | High-level availability overview for the whole month |
| Week | 7 days × rooms (horizontal) or time × rooms/days (vertical) | Reviewing a full week of bookings |
| Day (Timeline) | Time runs top → bottom; rooms are columns | Hour-by-hour detail for a single day |
On mobile devices, Week and Day views automatically switch to a vertical timeline layout (Google Calendar style). On desktop, you can also switch to the vertical layout manually.
How to Access
Booking Management → Calendar tab (shown by default)
Features
Feature 1: Month View
Month view shows the entire month at a glance. Each date cell displays a gradient indicating the day's occupancy and the number of active reservations.
- Clicking a date cell drills down into Week view for that week
- Clicking the [+] button inside a date cell opens the reservation creation drawer with that date pre-filled
- Hourly and time-slot reservations are not reflected in the occupancy gradient (short bookings do not block the entire day)
Feature 2: Week View
Week view shows seven days of bookings across all rooms.
Horizontal layout (desktop default)
- Columns are days of the week; rows are rooms — a classic spreadsheet-style grid
- Each cell represents one day × one room
- Clicking an empty cell opens the reservation creation drawer with that day and room pre-filled
Vertical timeline layout (mobile, or after toggling on desktop)
- Time runs top → bottom (midnight at top, midnight at bottom); rooms are side-by-side columns — Google Calendar style
- Reservation blocks appear at heights proportional to their duration
- Scroll up/down to move through the hours; scroll left/right to see more rooms
- Tapping a day-column header in week mode drills down to that day's Day (Timeline) view
Feature 3: Day View (Timeline)
Day view shows a single day in full hourly detail.
- Time axis runs vertically from 00:00 at the top to 24:00 at the bottom
- The calendar scrolls automatically to 7:00 AM when it first loads
- Reservation blocks are rendered at heights that match their actual duration
- Overlapping reservations in the same room are placed side-by-side (lane layout)
- Tapping an empty area opens the reservation creation drawer with the tapped time and room pre-filled
Feature 4: Horizontal / Vertical View Toggle (Desktop only)
On desktop, a 横 / 縦 (horizontal / vertical) segmented toggle appears in the calendar header when you are in Week or Day view. (The toggle is hidden in Month view, which has a single layout.)
- Horizontal icon (three horizontal lines): Classic grid layout — days run left to right, rooms run top to bottom
- Vertical icon (three vertical lines): Google Calendar-style layout — time runs top to bottom, rooms/days run left to right
Your choice is saved in browser localStorage and persists across page reloads and sessions.
On mobile devices the vertical timeline is always used and the toggle is not shown.
Feature 5: Create a Reservation from the Calendar
Tapping or clicking an empty area in the calendar opens the reservation creation drawer (slides in from the right on desktop, or as a sheet/full-screen panel on mobile). Context from the tapped position is pre-filled automatically:
| View | Action | Pre-filled information |
|---|---|---|
| Month | Tap the [+] button on a date cell | Check-in date |
| Week (horizontal) | Click an empty cell | Check-in date + room |
| Week (vertical timeline) | Tap an empty area | Check-in date + room + time |
| Day (timeline) | Tap an empty area | Check-in date + room + time |
Times snap to the nearest 15-minute boundary.
Feature 6: View Reservation Details
Tapping a reservation block on the calendar opens the reservation detail drawer, where you can see the guest's name, dates, total amount, payment status, and access code.
Feature 7: Zoom Controls (Desktop horizontal view only)
When using the desktop horizontal layout, + and − zoom buttons appear in the calendar header. These widen or narrow the hour columns to make the timeline easier to read.
Zoom controls are not shown in vertical timeline layout or on mobile.
Using the Calendar on Mobile
On a smartphone or tablet the calendar automatically uses the vertical timeline layout for Week and Day views.
| Gesture | Action |
|---|---|
| Scroll up / down | Move through the hours |
| Scroll left / right | Shift between rooms (Day view) or days (Week view) |
| Tap a reservation block | Open reservation details |
| Tap an empty area | Open the reservation creation drawer |
| Tap a day-column header (Week view) | Drill down to that day's Day view |
Switch between Month, Week, and Day using the tab buttons in the calendar header.
Frequently Asked Questions
Q: The calendar is wide and hard to read on my phone
On mobile, Week and Day views automatically switch to the vertical timeline layout. If the screen still feels crowded, tap the Day button in the header to view a single day at a time — the vertical timeline for one day shows rooms as columns, which is much more compact.
Q: I switched to vertical view on my PC but it keeps reverting
The view preference is stored in your browser's localStorage. It does not sync to other browsers or other devices. Clearing your browser's cache or site data will also reset the setting. As long as you use the same browser on the same device, the preference is retained.
Q: I have many rooms and the week view is hard to scan
On desktop, switch to the vertical layout using the toggle in the header (week or day view only). Rooms become side-by-side columns and you can scroll horizontally to see them all. Switching to Day view is also useful for focusing on a single day in full detail.
Q: Hourly reservations are not showing in Month view
Month view only displays overnight-style occupancy. Switch to Week or Day view to see hourly and time-slot reservations as precisely-placed blocks on the time axis.
Q: I tapped a reservation block but nothing happened
If blocks are overlapping (conflict) or a block is very short (under 15 minutes), it can be difficult to tap. Switch to Day view and zoom in to make the blocks larger and easier to tap.
Q: There is a red warning banner at the top of the calendar
An inventory conflict (double-booking) has been detected, typically from an iCal import. Tap the banner to jump to the Needs Attention tab and resolve the conflict. See Needs Attention: Reservation Conflicts for details.
Q: I tapped an empty area but the reservation drawer did not open
In Month view, you need to tap the [+] button inside a date cell. In Week and Day views, tap any empty space in the grid. Tapping directly on a reservation block will open details instead of creation.