Calendar Interface

This document covers the interactive calendar grid system that serves as the central booking management interface for the Hotelaro hotel management platform. The calendar interface provides drag-and-drop reservation management, real-time availability checking, room status tracking, and multi-tenant booking operations.

For information about room configuration and setup, see Room Management. For details about reservation processing workflows, see Reservation Processing.

System Overview

The Calendar Interface operates as a client-server application with an interactive JavaScript frontend communicating with CodeIgniter controllers for real-time booking operations. It supports multi-tenant architecture where each hotel property is isolated by admin_uid.

Interactive Calendar Grid

The calendar interface renders as a dynamic HTML table with sticky headers showing dates and a scrollable body containing room rows. Each cell represents one day for one room, allowing visual booking management through mouse interactions.

Grid Structure

The calendar table (#calendar) uses a three-part structure:

Room rows are grouped by room type with collapsible sections. Each room row contains:

• Room name and status indicator (left column)
• Daily cells marked as .selectable, .locked, or .gray-cell
• Reservation strips (.selected-strip1) spanning multiple days

Selection and Interaction

The interface uses jQuery UI Selectable for multi-cell selection with gap detection:

Validation Logic

Selection Process

User Clicks
First Cell

Mouse Drag
Multi-cell Selection

Gap Detection
getNextBlockedDate()

Valid Selection
No Overlaps

capStartByPrevEnd()
Prevent Overlap Before

capEndByGap()
Prevent Overlap After

lockedDates Filter
Existing Reservations
    

Room Status Management

Room status is managed through housekeeping operations accessible via right-click context menus on room headers. Status changes update both the visual interface and database records immediately.

Status Types and Colors

Status Update Flow

"hotel_booking_rooms"
"Calendar/datasetup"
"AJAX Handler"
"
User
"hotel_booking_rooms"
"Calendar/datasetup"
"AJAX Handler"
"
User
Right-click room header
Show status options
Select new status
POST status update
datasetup() with room_id & status
UPDATE room status
Confirm update
Return updated room data
Refresh calendar grid
    

Reservation Operations

The calendar supports full CRUD operations for reservations through modal interfaces and drag-and-drop interactions. All operations include real-time conflict detection and gap management between bookings.

Reservation Creation

New reservations are created through the selection-to-modal workflow:

• Cell Selection: Multi-cell selection using jQuery UI Selectable
• Modal Display: Reservation form popup with selected date range
• Form Submission: AJAX submission to reservationcreate() endpoint
• Validation: Server-side overlap detection and client creation
• Grid Refresh: Automatic calendar reload with new reservation

Drag-and-Drop Movement

Existing reservations can be moved via drag-and-drop operations:

Validation Rules

Drag Operations

initDraggableCards()
.draggable-card

initDroppableCells()
.selectable:not(.locked)

Overlap Validation
Server-side Check

reservationmove()
Database Update

Same Room Type
Compatible Assignment

No Overlap
Existing Reservations

Gap Rules
Checkout/Checkin Days

Room Available
Not Maintenance/Blocked
    

Multi-Room Reservations

The system supports booking multiple rooms in a single reservation through the all_room_set JSON structure. Each room maintains individual pricing, occupancy, and discount settings while sharing common guest and booking metadata.

Real-time Validation System

The calendar implements comprehensive validation to prevent booking conflicts and ensure data integrity across multi-tenant operations.

Conflict Detection Logic

Database Queries

Gap Management Functions

Validation Layers

Frontend Validation
Gap Detection Functions

Backend Validation
Database Overlap Queries

Real-time Updates
getCurrentReservations()

getNextBlockedDate()
Find Next Reservation

getPrevEndDate()
Find Previous Checkout

capEndByGap()
Limit End Date

capStartByPrevEnd()
Limit Start Date

NOT (end <= start OR start >= end)
Overlap Detection

status != 'cancle' AND no_show != 'noshow'
Active Reservations

admin_uid = session.uid
Multi-tenant Isolation
    

Timezone Handling

All date operations use Luxon DateTime with timezone awareness. The system converts between:

• Database Storage: MySQL DATETIME in server timezone
• Display Logic: Luxon DateTime in configured hotel timezone
• User Input: Local browser timezone converted to hotel timezone

Data Flow Architecture

The calendar operates through a request-response cycle with optimistic UI updates and server validation.

Primary Data Entities

hotel_booking_rooms
int
id
PK
string
name
int
type
FK
string
status
int
admin_uid
FK
    

hotel_booking_bookings
int
id
PK
string
book_id
int
room_id
FK
int
client_id
FK
date
start
date
end
string
status
string
reserve_status
int
admin_uid
FK
    

hotel_booking_clients
int
id
PK
string
c_name
string
c_email
string
c_phone
int
admin_uid
FK
    

hotel_booking_room_type
int
id
PK
string
room_type_name
int
admin_uid
FK
    

AJAX Communication Pattern

All calendar operations follow a consistent AJAX pattern:

• Frontend Event: User interaction (click, drag, select)
• Data Collection: Gather relevant IDs, dates, and context
• AJAX Request: POST to specific controller endpoint
• Server Processing: Validation, database operations, response
• UI Update: Refresh calendar grid or show notifications
• Error Handling: Display user-friendly error messages

Key AJAX endpoints include:

• calendar/getRooms - Load room and reservation data
• calendar/reservationcreate - Create/update reservations
• calendar/reservationmove - Handle drag-and-drop operations
• calendar/datasetup - Update room status and configuration