# Calendar Views (/docs/bookings/calendar) 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 [#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 [#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 [#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](/docs/bookings/editing-bookings) 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 [#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](/docs/bookings/creating-bookings) for the full wizard walkthrough. Filtering [#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 [#color-coding] Bookings are color-coded by status and can also be customized by booking source: Status Colors [#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 [#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 [#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 [#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. Related How-To Guides [#related-how-to-guides] * [Use the Booking Calendar](/how-to/bookings/use-the-booking-calendar) * [Create a Booking](/how-to/bookings/create-a-booking) * [Check Availability](/how-to/bookings/check-availability) * [Reschedule a Booking](/how-to/bookings/reschedule-a-booking)