Block dates

Overview

The Block Dates feature allows users to temporarily make a unit unavailable for bookings across a specific date range — for example during maintenance, owner stays, or renovations.

Blocked periods appear directly on the Multi Calendar as horizontal gray ribbons. Each block clearly shows its reason on the first day and includes:

• A hover summary with quick details

Purpose

Block Dates help prevent double bookings and keep calendars accurate. They are used when a property or room must be taken offline for any reason, ensuring guests can’t book those dates.

How to Create a Block

1

Open the “Block Dates” Modal

• Click the Block Dates button in the Multi Calendar header.

• This opens the creation form.

2

Choose Where to Apply the Block

• Property: Select from your active properties only (inactive ones are excluded).

• Room / Unit: When a property is selected, the first unit is auto-selected and it is not shown at all.

  • If the property has multiple rooms, you can pick a specific one.

3

Select the Block Dates

• Start Date defaults to today.

• End Date defaults to two days after the start date.

• Both dates are inclusive.

• You cannot set a start date in the past or an end date before the start date.

4

Add a Reason

Provide a short explanation such as:

“Owner Stay”, “Maintenance”, or “Deep Cleaning”.

This reason appears as a label on the first day of the block on the Multi Calendar.

5

Confirm

• Click Save to create the block.

• A toast message confirms creation (e.g., “Block created successfully”).

• The calendar refreshes automatically to show the new block.

❗If something is missing or invalid, an error message will appear — the block won’t be saved until all fields are complete.

Managing Existing Blocks

🔍 Hover for Quick Info

When you hover over a gray block ribbon on the calendar:

• A small popover appears showing:

  • Property name

  • Room name

  • Start and End dates

  • Block ID (short reference for support use)

This hover view is purely informational — it closes automatically when you move the cursor away.

🗂 View Details or Unblock

To manage an existing block:

1. Click the gray ribbon on the calendar.

   • The system opens a “Blocked Period” dialog.

   • Clicking the ribbon won’t trigger the cell’s other popups (e.g., restrictions).

2. Inside the dialog, you’ll see:

   • Property and Room names

   • Start and End dates

   • The Reason for the block

   • A short info note explaining what blocked periods do

🧹 Unblock Dates

If the period is no longer needed:

1. Click “Unblock Dates” in the dialog.

2. Confirm the action when prompted.

3. The block will be removed and the dates will instantly become bookable again.

4. A toast confirms success (“Block deleted successfully”).

If the action fails, an error message will be shown and the dialog will remain open.

🪄 Editing a block: You cannot directly edit the dates or reason. To make changes, simply Unblock the current one and create a new block with updated details.

How Blocks Appear on the Calendar

Element	Description
Color	Light gray ribbon (bg-gray-200)
Label	Displays the reason (or “Blocked”) on the first day
Shape	Rounded corners on the first and last day
Span	Extends across each day in the blocked period
Icon	Small Shield icon (🛡️) for visibility

Layering: Blocks sit above the grid background but below popovers and other overlays. Hover and details popovers always appear on top for easy access.

System Behavior

• When a block is created or removed, the calendar automatically refetches data for reservations and blocks.

• Blocks are fetched only for the visible date window to improve performance.

• Toasts (small notifications) are used for all success or error messages.

Permissions & Scope

• Only active properties are available for blocking.

• A block applies only to the selected room/unit, not the entire property.

• Full Access or “edit-reservation” permissions are not required for creating/removing blocks — they are governed by the user’s property scope.

Limitations & Edge Cases

• You cannot edit an existing block’s dates or reason; recreate it instead.

• The reason label on the first day may truncate for long blocks

• The hover popover is read-only; only the details dialog allows unblocking.

• You can’t overlap multiple blocks for the same unit and date range — the system prevents conflicts automatically.

🧪 QA Testing Checklist

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

🔹 Block Dates Creation & Display

• The “Block Dates” button is visible in the Multi Calendar header

• Clicking “Block Dates” opens the Create Block modal.

• The modal requires Property, Room/Unit, Start Date, End Date, and Reason fields before saving.

• Start Date defaults to today and End Date defaults to two days later.

• Validation prevents choosing an End Date before the Start Date or a past Start Date.

• Clicking Save successfully creates a block and shows a success toast message.

• The new block immediately appears as a gray ribbon on the Multi Calendar spanning the selected dates.

• The block’s reason appears on the first day of the ribbon next to a Shield icon (🛡️).

🔹 Hover & Popover Behavior

• Hovering over a block opens a small informational popover.

• The popover displays:

  • Property name

  • Room/Unit name

  • Start and End dates

  • Short Block ID reference

• The popover closes automatically when the mouse leaves.

• Popover content remains aligned and readable (no overflow or clipping).

🔹 Block Details Dialog (Click Behavior)

• Clicking on a block opens the Blocked Period dialog instead of the cell settings popup.

• The dialog displays:

  • Property and Room names

  • Start and End dates

  • The Reason text (or “No reason provided”)

  • Informational note describing blocked periods

• The dialog title is “Blocked Period” and includes a Shield icon.

🔹 Unblocking Flow

• The “Unblock Dates” button is visible inside the Blocked Period dialog.

• Clicking it opens a confirmation message (“Are you sure you want to unblock these dates?”).

• Confirming the action:

  • Shows a loading spinner on the confirm button

  • Successfully removes the block and closes the dialog

  • Displays a success toast (“Block deleted successfully”)

  • The gray ribbon disappears from the calendar immediately

• Cancelling the confirmation keeps the block visible with no changes.

• If the unblock request fails, an error toast appears and the dialog remains open.

🔹 Validation & Error Handling

• Attempting to create a block with missing fields shows inline errors and prevents submission.

• Network or API errors during creation or deletion display error toasts.

• On validation or API errors, the modal/dialog stays open and form data is preserved.

• The interface prevents multiple overlapping blocks on the same room and date range.

🔹 Visual & Layout Consistency

• The gray ribbon is properly aligned with the grid cells.

• Rounded corners appear only on the first and last day of the block.

• Multi-day blocks appear as continuous ribbons with no breaks.

• The block overlay and popovers maintain correct z-index (always visible above the grid).

• Mobile view displays ribbons, hover popovers, and dialogs correctly without layout issues.

🔹 Data Refresh & Sync

• After creating or removing a block, the calendar automatically refreshes without manual reload.

• Newly blocked or unblocked dates reflect immediately in availability and reservation data.

• The UI remains stable (no flickering) during refetch after create/delete actions.