Calendar Blocks

Overview

In the Multi Calendar, each reservation and blocked date is visualized as a horizontal block spanning the check-in to check-out range (or the start to end of a blocked period). These blocks give property managers an at-a-glance understanding of which units are occupied, when guests are arriving or leaving, and which dates are blocked for maintenance or operational reasons.

Each block is interactive — you can hover for details, open popovers, and click to view or edit reservation settings.

Types of Blocks

There are two primary types of blocks rendered inside the calendar grid:

Type	Description	Appearance
Reservation Block	Represents a guest’s stay (check-in → check-out). Each block displays the guest name, OTA icon (Airbnb, Booking.com, etc.), payment status, and visual cues for check-in/out days.	Colored bar with OTA logo and payment indicator line
Blocked Date Block	Represents a period when the room is unavailable (e.g. maintenance, owner stay, or manually blocked by the host).	Gray bar with a shield icon and reason text (“Blocked”, “Maintenance”, etc.)

How Blocks Are Positioned

Each cell in the Multi Calendar grid represents one day for one room.

The component renders blocks based on whether that date falls within the check-in and check-out range (for reservations) or between the start and end dates (for blocked periods).

• Start Day: The left edge of the block begins slightly inside the cell (offset by ~30 px) so the rounded corners and icons are visible.

• End Day: The right edge ends slightly before the end of the cell (another ~30 px offset).

• Middle Days: When a reservation spans multiple days, the block stretches seamlessly across the columns for that date range.

Blocks are absolutely positioned within the grid cell using pixel offsets based on the constants:

• MULTI_CALENDAR_BLOCK_WIDTH → defines day-cell width

• MULTI_CALENDAR_BLOCK_HEIGHT → defines row height

Reservation Block Details

Each reservation block is dynamically colored and annotated to indicate status, payment progress, and guest activity.

🎨 Color System

Condition	Background Color	Meaning
Cancelled Reservation	Light Red (#f3807e)	Reservation has been cancelled
Not Checked-In Yet	Light Indigo (#E5E5FF)	Upcoming guest stay
Checked-In	Light Mint (#E5FFF8)	Guest currently in the property
Checked-Out	White (#FFFFFF)	Guest has completed the stay

💰 Payment Line (Bottom Indicator)

A 1 px horizontal line runs along the bottom of the block showing payment status:

Line Color	Meaning
🔴 Red (#B20000)	Unpaid
🟠 Orange (#FFA500)	Partially Paid
🟢 Green (#00B280)	Fully Paid

🧭 Guest Activity Logic

Guest state is determined by internal flags:

Guest Activity	Logic	Visual
not-checked-in	No check-in or check-out mark	Indigo block
checked-in	Check-in mark exists, no check-out mark	Mint block
checked-out	Check-out mark exists	White block

Visual Structure

Inside each reservation block:

• Left corner (first day only):

  • OTA icon (Airbnb, Booking.com, Direct, Rentd)

  • Guest name or summary (via getReservationGuestString)

• Bottom line: colored indicator showing payment progress

• Rounded edges: left edge on check-in day, right edge on check-out day

• Popover on Hover: opens ReservationPopover with reservation details, guest info, pricing, and quick actions.

Blocked Dates

Blocked periods are rendered in the same grid, but in a different visual style:

• Gray background (bg-gray-200/90)

• Shield icon (🔰) at the start of the block

• Text label: shows the reason (e.g. “Owner Stay”, “Maintenance”)

• Spans multiple days: from startDate to endDate

• Popover: opens BlockedDatePopover for editing or removing the block

If a date falls between a blocked period, the block continues seamlessly across all affected days.

Behavior & Interaction

🔍 Hover

Hovering over a reservation or blocked block shows an interactive popover:

• Reservation popover → details, pricing, actions

• Blocked date popover → reason, delete/edit options

🖱️ Click

Clicking a cell (outside of a reservation) opens the Multi Calendar Settings Popup, allowing you to:

• Block or unblock dates

• Adjust availability or restrictions

• View pricing per date

📱 Mobile View

On mobile, property rows are shown as sticky labels on the left (black overlay). Tapping on a room name navigates to its dedicated Room Calendar page.

Technical Notes (For Developers)

• RenderReservationBlock component handles the logic for both reservations and blocked dates.

• CurrentReservation and CurrentBlock sub-components are responsible for individual block rendering and visual styling.

• React-Virtualized Grid controls cell rendering — only visible rows/columns are mounted at once.

• Performance: Each day’s block checks whether its date is within a reservation’s or blocked range using date-fns (compareAsc, isEqual, startOfDay).

• Popovers are separate components (ReservationPopover, BlockedDatePopover) that show full data when opened.

• Source Icons Map: Airbnb, Booking.com, Hububb, and Direct bookings each have a distinct icon.

Summary

The Reservation Blocks system is designed to visually unify reservation and availability data inside the Multi Calendar. It allows operations and account managers to instantly see:

• who is staying,

• what’s blocked,

• what’s paid,

• and what’s coming next.

These visual cues replace the need to manually cross-check multiple tables, making Hububb’s calendar the single source of truth for day-to-day occupancy and operations.

QA Testing Checklist

This section is meant for QA testers and internal reviewers to verify that the Multi Calendar Reservation Blocks feature works correctly across scenarios. It focuses on visual accuracy, behavior, data consistency, and interaction logic.

🔹 Reservation Blocks

• Each reservation appears as a colored bar from check-in to check-out dates.

• OTA icon (Airbnb, Booking.com, Direct, Rentd) is visible on the first day of each reservation.

• Guest name or summary is displayed next to the OTA icon.

• The bottom line correctly shows payment status:

  • Red → unpaid

  • Orange → partially paid

  • Green → fully paid

• Rounded corners appear:

  • Left corners rounded on check-in day

  • Right corners rounded on check-out day

• Reservations spanning multiple days render as one continuous bar with no visual gaps.

• Cancelled reservations appear in light red (#f3807e).

• Hovering a reservation opens a popover with correct guest details, pricing, and actions.

• Clicking a reservation opens detailed settings or information correctly.

🔹 Blocked Dates

• Blocked periods appear in gray (bg-gray-200/90) with a shield icon (🔰).

• The reason text (e.g., “Maintenance”, “Owner Stay”) displays correctly at the start of the block.

• The block spans all dates between startDate and endDate without breaks.

• Hovering opens the Blocked Date Popover with correct details and options to edit/unblock.

• Removing a blocked date instantly updates the calendar.