How to Add and Customize a Calendar Widget on Your Website

 

 Step 1: Generate Your Widget Code

1. In your rezStream Cloud account, navigate to Booking Engine → Website Calendar Script Generator

2. Configure your widget by selecting:

   • Property-wide availability, or

   • Individual units

3. Click Generate Script.

Copy the JavaScript code that appears below the preview. Paste it into your website where you want the calendar to appear.

Step 2: Customize the Widget Display

You can adjust what the widget shows by modifying these options in the script generator:

• HTML Element ID

Specify the HTML id attribute for the element where the inline calendar should appear on your webpage.

• Filter by Unit or Rate Plan

Select a specific unit, unit type, or rate plan. The calendar will then display availability and rates for that selection only. If set to "None," the calendar will show overall business availability and rates.

• Filter by Property

Select one or more properties to limit the calendar view to those specific properties. If left blank, the calendar will display availability and rates for the business as a whole.

• Number of Inline Months

Choose how many months to show within the inline calendar. Set this to 0 if you do not wish to display inline calendars.

• Display Nightly Rates on Calendar

Enables nightly rate visibility directly on the calendar and allows for promo code promotion when applicable.

Tip: Selecting a specific unit and enabling "Display Rates on Calendar" will show nightly prices and expose the promo code entry field if enabled in your system.

Step 3: Style the Widget with CSS

To match your branding or site layout, apply custom styles using CSS.

Here’s a basic example to stretch the calendar widget horizontally:

.rs-sc-field {
    margin: 5px;
    display: inline-block;
}

Tip: Add this CSS to your site’s stylesheet or inline, depending on your website platform.

---

For more information about advanced features of the Calendar Widgets see Advanced Calendar Widget Options.