C
CalendoPro

Booking Calendar

Date range selection with pricing – perfect for hotels, rentals & appointments

Selected Range
In Range
Unavailable

Booking Details

Select date
Select date
Total Price
$0
Duration
0 nights
Nightly rate $0/night
Cleaning fee $50
Service fee $0

Usage Example

// Initialize Booking Calendar
const booking = new CalendoPro.Booking('#booking-calendar', {
  pricePerDay: 89,
  currency: '$',
  minStay: 2,
  prices: { // Custom prices per date
    '2025-01-15': 129, // Weekend rate
    '2025-01-16': 129
  },
  unavailableDates: ['2025-01-20', '2025-01-21'],
  onRangeSelect: (data) => {
    console.log('Selected:', data.start, 'to', data.end);
    console.log('Nights:', data.nights, 'Total:', data.total);
  }
});
📆

Date Range Selection

Click to select check-in and check-out dates with visual feedback.

💰

Dynamic Pricing

Set different prices per day, weekends, or special dates.

🚫

Blocked Dates

Mark dates as unavailable for existing bookings.