Multi-Calendar

The Multi Calendar is the core scheduling and overview tool in Hububb. It provides a visual, interactive way for operations and account managers to track all reservations across all property units in

The Multi Calendar is the core scheduling and overview tool in Hububb. It provides a visual, interactive way for operations and account managers to track all reservations across all property units in real time.

Unlike typical property-level calendars, Hububb’s Multi Calendar operates on the unit (room) level — allowing precise visibility and management for each listed room within a property.

Key Concepts

Concept	Description
Property Unit (Room)	Each row in the Multi Calendar represents an individual unit/room that can be booked. A property with multiple rooms (e.g. “Brixton Hill Skyline Retreat”) will have multiple rows. See Channex Rooms.
Reservation Block	Each booking is visualized as a colored bar spanning its check-in and check-out dates. The color and icon (Airbnb, Booking.com, etc.) identify its OTA source.
Timeline Scroll	The calendar is an infinite horizontal timeline (dates) and vertical property list (rooms).
Lazy Loading	Data loads dynamically based on visible range — powered by react-virtualized. This ensures performance even with hundreds of units and years of data.

UI Layout

• Left Sidebar: Displays all property units with thumbnails and short identifiers.

• Main Grid: Displays reservations horizontally by date, vertically by unit.

• Top Bar:

  • Date navigation (< and > arrows)

  • “Block Dates” button

  • “Today” shortcut

• Reservation Tooltip (Hover):

  • Shows guest name, OTA icon, stay dates, total price, and guest count.

Scrolling Behavior & Data Loading

The Multi Calendar uses react-virtualized to render only what is visible. This allows infinite scrolling in both directions while keeping the app performant.

Scroll Logic

1. Initial Load:

   • Loads 2 months back and 2 months from the current date.

2. Continuous Scroll:

   • As the user scrolls horizontally near the edge, a new 2 months of data is appended dynamically.

   • Currently, all property units are fetched at once and listed vertically

3. Scroll Event Tracking:

   • While the user scrolls, the app tracks the current viewport boundaries:

     • Visible date range → Horizontal constraint

     • Visible room list → Vertical constraint

4. Data Refresh Trigger:

   • When scrolling stops, a refresh event triggers a new API request with updated constraints to fetch reservations only for the visible range.

QA Testing Checklist

🔹 General Rendering

• All rooms (units) are displayed in vertical order with correct names and thumbnails.

• The calendar grid correctly aligns dates horizontally and units vertically.

• Infinite scroll works smoothly:

  • Scrolling forward (future) loads new dates seamlessly.

  • Scrolling backward (past) loads older dates without flicker.

• “Today” column is visually highlighted (border or background).

• Past dates are slightly grayed out.

🔹 Interaction & Behavior

• Clicking on an empty cell (no reservation) twice opens the Multi Calendar Settings Popup.

• Hover and click events do not interfere (e.g., hovering a reservation shouldn’t open the popup).

• When scrolling and stopping, data refreshes automatically for visible range.

• No overlapping visual artifacts appear when multiple reservations are close together.

• Popovers and blocks maintain correct z-index (no clipping under grid lines).

🔹 Data Validation (Optional / QA-Dev Cross-Check)

• Reservation block start and end dates match backend checkIn and checkOut.

• Blocked date ranges match startDate and endDate in database.

• Payment status line reflects actual values from reservation object (amountPaid, amountTotal).

• OTA source icon matches otaName in the reservation record.

• Cancelling or editing a reservation updates the visual state without manual refresh.