CalendoPro

Booking Calendar

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

Selected Range

In Range

Unavailable

Booking Details

Property

Guests

Check-in Date

Select date

Check-out Date

Select date

Total Price

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.