Reservations in the Multi-Calendar

Overview

In the Multi Calendar, each reservation is visually represented as a block spanning its check-in to check-out dates for each room. This view allows hosts and account managers to quickly understand occupancy, payment status, guest activity, and OTA source, as well as interact with bookings directly — through hover popovers or detailed drawers that appear on click.

This feature exists to make the operational flow intuitive: one glance at the calendar gives full context on who’s staying, what’s blocked, and what’s happening next.

How It Works

Each row in the Multi Calendar represents a room (unit), and each column represents a date.

If there’s a reservation for a given room and date range:

• A colored block appears across all those days

• The color and icon show the reservation’s source and state

• The label on the first day shows the OTA icon (Airbnb, Booking.com, etc.) and guest name

The view updates automatically as new bookings or changes come in — no manual refresh needed.

What You’ll See

🟦 Reservation Blocks

Each guest stay appears as a horizontal colored bar.

Visual Element	Meaning
Colored background	Indicates guest status (upcoming, checked in, checked out)
Bottom line color	Shows payment status (red/orange/green)
OTA icon	Shows where the booking came from (Airbnb, Booking.com, Direct, etc.)
Guest name	Displayed next to the OTA icon
Rounded corners	Indicate start (check-in) and end (check-out) of the stay

Interactions

🖱️ Hover

Hovering over a reservation shows a quick summary popover:

• Guest name

• OTA source

• Stay dates

• Payment and status

Hovering helps you quickly confirm details without opening anything.

---

🖱️ Click

Clicking on a reservation opens a right-side panel with detailed information about that booking:

• Guest info

• OTA and booking source

• Stay dates

• Payment details

• Status and notes

From there, operations can perform actions like:

• Marking a guest as checked in/out

• Cancelling a reservation (if direct)

• Adding internal notes

Clicking a blocked date instead opens a small dialog where you can unblock or edit that period.

Clicking an empty cell (no reservation) opens the Settings Popup, where you can block or adjust availability for that specific date.

Colors & Statuses

🎨 Reservation Colors

Color	Meaning
🟪 Light Indigo	Upcoming stay (not checked in yet)
🟩 Light Mint	Guest currently checked in
⚪ White	Guest has checked out
🔴 Light Red	Reservation cancelled

💰 Payment Line (bottom border)

Color	Meaning
🔴 Red	Unpaid
🟠 Orange	Partially paid
🟢 Green	Fully paid

🏠 OTA Source Icons

• Airbnb → Airbnb logo

• Booking.com → Booking logo

• Direct / Hububb → Hububb icon

The OTA icon helps identify where each booking came from at a glance.

Behavior & Details

🔄 Automatic Updates

The calendar automatically refreshes when:

• User scrolled left, right, up or down

• Bookings are edited from the web

The calendar does not automatically refresh when:

• New reservations are received

• Bookings are edited or cancelled - coming from Channel Manager

• Availability or blocked dates change

🧭 Overlaps

If multiple reservations overlap for the same room, they will appear in the same position. This can happen for complex multi-unit stays but should be rare in normal operation, especially since we list units and the maximum availability per day is always 1.

📅 Long Stays

Reservations spanning several weeks or months stretch across all affected dates — the system automatically handles width and positioning.

🧱 Block Conflicts

If a room is blocked during an existing reservation, the system prevents double booking automatically. Clicking a blocked date allows you to unblock it directly.

🧪 QA Testing Checklist

This section is meant for QA testers and internal reviewers to verify that the Reservation Popover (the hover tooltip that appears when hovering over a reservation block) functions correctly. It focuses on timing, positioning, content accuracy, and visual consistency.

🔹 Hover Behavior

• Hovering over a reservation block opens the popover.

• The popover appears anchored directly above or beside the correct reservation bar.

• Only one popover is visible at a time.

• Moving the mouse away closes the popover.

• Hovering over another reservation quickly switches the popover content correctly.

🔹 Popover Content

• The popover displays:

  • Guest name (matches the visible reservation)

  • Check-in and Check-out dates

  • Reservation status (Confirmed, Cancelled, etc.)

  • Payment status (Paid, Unpaid, or X% Paid)

  • OTA source icon (Airbnb, Booking.com, Direct, Hububb)

  • Room/Unit name and Property name

🔹 Interaction Logic

• Hovering does not trigger cell click or open the Reservation Details Drawer.

• Clicking anywhere inside the popover does not open the Reservation Details Popup

🔹 Data & Refresh

• Popover data matches the live reservation (after updates or status changes).

• Payment percentage and guest status are accurate and consistent with the Reservation Details Popup.

• Refreshing the calendar keeps popovers functioning correctly (no broken state).