Skip to main content

Calendar View

The Calendar provides a visual, interactive interface for managing bookings. This guide covers calendar views, drag-and-drop rescheduling, real-time updates, and booking management.

Overview​

The calendar is your primary tool for:

  • Viewing all bookings visually
  • Managing booking schedules
  • Rescheduling bookings easily
  • Monitoring capacity in real-time
  • Handling day-to-day operations

Key Features​

  • Visual Timeline: See all bookings in calendar format
  • Drag-and-Drop: Reschedule bookings by dragging
  • Real-Time Updates: Live updates via Server-Sent Events (SSE)
  • Capacity Visualization: See slot capacity at a glance
  • Quick Actions: Common operations from calendar view

Calendar Views​

Daily View​

View all bookings for a single day.

What You See:

  • Time slots throughout the day
  • Bookings in their time slots
  • Available capacity per slot
  • Color-coded booking statuses

Best For:

  • Day-of operations
  • Detailed scheduling
  • Hour-by-hour planning

Weekly View​

See a week at a glance.

What You See:

  • All days of the week
  • Bookings across the week
  • Capacity overview
  • Pattern recognition

Best For:

  • Weekly planning
  • Capacity overview
  • Pattern identification

Timeline View​

Visual timeline showing bookings over time.

What You See:

  • Continuous timeline
  • Overlapping bookings
  • Resource conflicts
  • Availability gaps

Best For:

  • Resource planning
  • Conflict detection
  • Long-term view

Calendar Navigation​

Date Navigation​

Navigation Controls:

  • Previous/Next arrows
  • Date picker for jumping to date
  • Today button (jump to today)
  • Keyboard shortcuts (arrow keys)

Date Selection:

  • Click date to view specific day
  • Select date range for weekly view
  • Jump to specific dates

Filtering​

Available Filters:

  • Site: Filter by venue location
  • Product: Show only specific products
  • Status: Filter by booking status
  • Date Range: Select custom date range

Filter Combinations:

  • Combine multiple filters
  • Save filter presets
  • Quick filter buttons

Drag-and-Drop Rescheduling​

One of the most powerful calendar features is drag-and-drop rescheduling.

How It Works​

Basic Drag-and-Drop:

  1. Find the booking you want to reschedule
  2. Click and hold on the booking
  3. Drag to the new time slot
  4. Release to drop
  5. System validates and confirms move

Visual Feedback:

  • Booking highlights when dragged
  • Target slot highlights when hovering
  • Invalid targets show error indicator
  • Valid targets show green highlight

Drag-and-Drop Process​

Step 1: Initiate Drag

  • Click and hold booking
  • Booking becomes draggable
  • Original slot shows placeholder

Step 2: Drag Over Target

  • Hover over potential slots
  • Valid slots highlight green
  • Invalid slots highlight red with reason

Step 3: Validation

  • System validates move in real-time
  • Checks availability
  • Verifies capacity
  • Validates policies

Step 4: Drop and Confirm

  • Release on valid slot
  • Confirmation modal appears
  • Review changes
  • Confirm or cancel

Step 5: Completion

  • Booking moves to new slot
  • Calendar updates automatically
  • Customer notified (if configured)

Validation During Drag​

Real-Time Validation:

  • Capacity check
  • Resource availability
  • Policy compliance
  • Conflict detection

Validation Results:

  • Green Highlight: Move is valid
  • Red Highlight: Move blocked (reason shown)
  • Yellow Highlight: Move allowed with warnings

Common Validation Issues:

  • Slot at capacity
  • Resource unavailable
  • Outside policy window
  • Time conflict

Move Confirmation Modal​

When you drop a booking, a confirmation modal appears:

Modal Shows:

  • Original booking time
  • New booking time
  • Time difference
  • Any price adjustments
  • Policy information
  • Customer notification status

Actions:

  • Confirm: Proceed with move
  • Cancel: Keep booking at original time
  • Review Details: See full booking details

Move Restrictions​

When Moves Are Restricted:

  • Booking already started
  • Outside reschedule policy window
  • Target slot unavailable
  • Capacity constraints
  • Resource conflicts

Override Options:

  • Admin override available for some restrictions
  • Force move option (use with caution)
  • Manual adjustment for special cases

Real-Time Updates (SSE)​

The calendar uses Server-Sent Events (SSE) for real-time updates, providing instant visibility into booking changes across all connected admin users.

SSE Endpoint​

Endpoint: GET /api/v1/admin/calendar/stream

Query Parameters:

ParameterTypeRequiredDescription
site_idstringNoFilter updates to specific site
datestringNoFilter updates to specific date (YYYY-MM-DD)

Headers:

Authorization: Bearer <admin_token>
x-tenant-id: <tenant_id>
Last-Event-ID: <last_event_id> (optional, for reconnection)

Connection Example:

const eventSource = new EventSource(
  '/api/v1/admin/calendar/stream?site_id=s_demo',
  {
    headers: {
      Authorization: `Bearer ${adminToken}`,
      'x-tenant-id': 't_demo',
    },
  },
);

eventSource.addEventListener('calendar-update', (event) => {
  const data = JSON.parse(event.data);
  updateCalendarSlot(data.slot);
});

eventSource.addEventListener('heartbeat', (event) => {
  console.log('SSE connection alive');
});

How SSE Works​

Connection:

  • Browser connects to SSE endpoint
  • Server maintains persistent HTTP connection
  • Server pushes updates as events
  • Updates appear instantly
  • No page refresh needed
  • Automatic reconnection on disconnect

Update Types:

  • booking_created - New booking added to slot
  • booking_cancelled - Booking removed from slot
  • booking_rescheduled_from - Booking moved out of slot
  • booking_rescheduled_to - Booking moved into slot
  • booking_status_changed - Booking status updated

Event Data Structure​

Calendar Update Event:

{
  "id": "evt_1234567890",
  "event": "calendar-update",
  "data": {
    "type": "booking_created",
    "slot": {
      "slotId": "slot_abc123",
      "tenantId": "t_demo",
      "siteId": "s_demo",
      "productId": "p_laser_tag",
      "startsAt": "2025-11-17T14:00:00.000Z",
      "endsAt": "2025-11-17T16:00:00.000Z",
      "bookingCount": 5,
      "capacity": 10,
      "availableCapacity": 5,
      "isFull": false,
      "isOverbooked": false,
      "utilizationPercentage": 50,
      "labels": ["prime_time"],
      "lastUpdated": "2025-11-17T12:30:00.000Z"
    },
    "timestamp": "2025-11-17T12:30:00.000Z",
    "correlationId": "saga_xyz789"
  }
}

Heartbeat Event:

{
  "id": "heartbeat_1234567890",
  "event": "heartbeat",
  "data": {
    "type": "heartbeat",
    "message": "connection alive",
    "timestamp": "2025-11-17T12:30:00.000Z"
  }
}

Reconnection Support​

Last-Event-ID Header:

When the connection drops and reconnects, the browser automatically sends the Last-Event-ID header with the ID of the last received event. The server uses this to:

  • Skip already-delivered events
  • Send only new events since disconnection
  • Maintain consistency across reconnections

Automatic Reconnection:

  • Browser automatically reconnects on connection loss
  • Exponential backoff between reconnection attempts
  • Preserves event ordering
  • No data loss during brief disconnections

SSE Connection Status​

Connection Indicators:

  • Connected: Green indicator, updates active
  • Disconnected: Red indicator, manual refresh needed
  • Reconnecting: Yellow indicator, auto-reconnecting

Connection Features:

  • Automatic reconnection on disconnect
  • Last event ID tracking
  • Heartbeat to maintain connection
  • Graceful handling of connection loss

What Updates in Real-Time​

Slot Updates:

  • Booking count changes
  • Capacity utilization
  • Availability status
  • Slot labels

Booking Updates:

  • New bookings appear
  • Cancelled bookings disappear
  • Rescheduled bookings move
  • Status changes reflect immediately

Visual Feedback:

  • Slots flash when updated
  • Smooth animations for changes
  • Color changes for status updates
  • Capacity bars update live

Benefits of Real-Time Updates​

Operational Benefits:

  • Multiple admins see changes instantly
  • No stale data issues
  • Accurate capacity display
  • Immediate conflict awareness

User Experience:

  • No manual refreshing needed
  • Always current information
  • Smooth, responsive interface
  • Collaborative workflow support

Booking Management from Calendar​

Viewing Booking Details​

How to View:

  • Click any booking in calendar
  • Booking details panel opens
  • Full booking information shown
  • Actions available

Details Shown:

  • Customer information
  • Booking time and duration
  • Product and variant
  • Party size
  • Payment status
  • Booking status
  • Reference number

Quick Actions​

Available Actions:

  • Confirm: Convert hold to confirmed
  • Cancel: Cancel booking
  • Reschedule: Change time (or drag-and-drop)
  • Mark Arrived: Record customer arrival
  • Mark No-Show: Record no-show
  • Complete: Mark activity completed
  • View Details: Full booking view

Action Buttons:

  • Actions appear on booking cards
  • Context-sensitive actions
  • Quick action menu
  • Keyboard shortcuts available

Creating Bookings from Calendar​

Manual Booking Creation:

  1. Click empty slot or "New Booking"
  2. Booking creation form opens
  3. Fill in booking details
  4. System validates and creates
  5. Booking appears in calendar

Booking Form:

  • Select product and variant
  • Choose date and time
  • Enter customer information
  • Set party size
  • Add add-ons
  • Apply promotions
  • Process payment

Calendar Features​

Capacity Visualization​

Capacity Bars:

  • Visual representation of slot capacity
  • Color-coded by utilization
  • Green: Plenty of capacity
  • Yellow: Getting full
  • Red: Near capacity or full

Capacity Information:

  • Total capacity per slot
  • Current bookings count
  • Available capacity
  • Utilization percentage

Slot Information​

Slot Details:

  • Start and end time
  • Total capacity
  • Current bookings
  • Available spots
  • Labels (if any)
  • Resource status

Slot Status:

  • Available: Open for booking
  • Full: At capacity
  • Low Availability: Few spots left
  • Maintenance: Blocked for maintenance
  • Blackout: Temporarily unavailable

Booking Display​

Booking Cards:

  • Color-coded by status
  • Customer name
  • Party size
  • Product name
  • Time range
  • Quick status indicator

Status Colors:

  • Hold: Gray
  • Confirmed: Blue
  • Checked In: Green
  • Cancelled: Red
  • No-Show: Orange
  • Completed: Dark gray

Search and Filter​

Search Functionality:

  • Search by customer name
  • Search by booking reference
  • Search by product
  • Search by date

Filter Options:

  • Filter by status
  • Filter by product
  • Filter by site
  • Filter by date range
  • Combine filters

Printing Calendar​

Print Options:

  • Print current view
  • Daily print format
  • Weekly print format
  • Custom date range
  • Include booking details

Print Features:

  • Optimized layout for printing
  • Booking details included
  • Capacity information
  • Customizable headers

Exporting Data​

Export Formats:

  • CSV export
  • Excel export (coming soon)
  • PDF export (coming soon)

Export Options:

  • Export filtered view
  • Export date range
  • Include booking details
  • Include capacity data

Multi-Admin Collaboration​

Simultaneous Usage​

Real-Time Collaboration:

  • Multiple admins can use calendar simultaneously
  • Changes appear instantly for all users
  • No conflicts or data loss
  • Last-write-wins for simultaneous edits

Best Practices:

  • Communicate about major changes
  • Use real-time updates to see others' changes
  • Coordinate during busy periods

Conflict Handling​

Automatic Conflict Detection:

  • System detects conflicts
  • Prevents double-booking
  • Shows conflict warnings
  • Requires resolution

Conflict Resolution:

  • System prevents conflicting moves
  • Manual override available
  • Admin discretion for edge cases

Calendar Best Practices​

Daily Workflow​

Morning Routine:

  1. Open calendar for today
  2. Review all bookings
  3. Check capacity status
  4. Verify resource availability
  5. Address any issues

During Day:

  1. Monitor real-time updates
  2. Handle walk-ins
  3. Process cancellations
  4. Manage reschedules
  5. Mark arrivals/completions

End of Day:

  1. Review completed bookings
  2. Process pending holds
  3. Update schedules if needed
  4. Check tomorrow's capacity

Efficiency Tips​

  1. Use Drag-and-Drop: Fastest way to reschedule
  2. Filter Views: Focus on what you need
  3. Real-Time Updates: Trust SSE, don't refresh
  4. Keyboard Shortcuts: Learn for speed
  5. Saved Filters: Create presets for common views

Organization Tips​

  1. Color Coding: Learn status colors
  2. Capacity Monitoring: Watch for capacity issues
  3. Label Usage: Use labels for special conditions
  4. Notes: Add notes to bookings when needed
  5. Communication: Coordinate with team

Troubleshooting​

Calendar Not Loading​

Check:

  • Internet connection
  • Browser compatibility
  • Date range selection
  • Filter settings
  • Site/product selection

Solutions:

  • Refresh page
  • Clear browser cache
  • Check date range
  • Reset filters
  • Verify permissions

Drag-and-Drop Not Working​

Check:

  • Browser supports drag-and-drop
  • JavaScript enabled
  • No popup blockers
  • Permissions correct

Solutions:

  • Try different browser
  • Enable JavaScript
  • Check browser console for errors
  • Verify admin permissions

Real-Time Updates Not Working​

Check:

  • SSE connection status
  • Network connectivity
  • Browser SSE support
  • Server connection

Solutions:

  • Check connection indicator
  • Refresh to reconnect
  • Verify network
  • Check browser console

Missing Bookings​

Check:

  • Date range includes booking date
  • Filters not excluding bookings
  • Site/product selection
  • Booking status

Solutions:

  • Expand date range
  • Check filters
  • Verify site/product
  • Check booking exists

Keyboard Shortcuts​

Navigation:

  • Arrow Keys: Navigate days
  • Page Up/Down: Navigate weeks
  • Home: Today
  • /: Focus search

Actions:

  • N: New booking
  • R: Refresh
  • P: Print
  • E: Export

Selection:

  • Esc: Close modals
  • Enter: Confirm actions
  • Tab: Navigate elements

Next Steps​