Advanced Calendar Widget Options

This article explains some of the more advanced and technical ways to use the Calendar Widgets. If you haven't read that yet, please start there!

Concepts on this page:

Adding Multiple Calendars on the same page
Apply Additional Functionality to the Calendars

Multiple Calendars

There are 2 ways to add more than one calendar to the same page.

Using One Javascript Statement/Block

You can do it all in one javascript statement by calling the addCalendar function from within the ready callback (this is the second argument of the load function). The addCalendar function takes 2 parameters, the first specifies the element on the page to target and the second is an options hash for this calendar (the same options documented throughout this page).

In the following example we have a widget with no inline monthly calendars for the entire property AND a widget with two inline monthly calendars for a specific unit:

<script type="text/javascript">
    rezStreamLoader.load({
        calElements: "#calendar-widget",
        business: 'your-business-slug'
    }, function () {

        this.addCalendar("#individual-calendar-widget", {
            business: 'your-business-slug',
            unit: "00000000-0000-0000-0000-000000000000",
            inlineMonths: 2,
            showRates: false
        });

    });
</script>

Using Two Javascript Statements/Blocks

Or you can do it in two separate javascript statements by using the rezStreamLoader.ready function. The rezStreamLoader.ready function executes after the initial load call completes.

In the following example we again have the widget with no inline monthly calendars for the entire property AND a widget with two inline monthly calendars for a specific unit, but each are defined in separate script tags.

This provides some nice flexibility from a site maintenance perspective. For example, maybe you have the first calendar (the property-wide calendar) in the header or footer of every page of your site and you’ve put this script in some kind of an “include” file that gets rendered on every page of the site. The second calendar (the unit-specific calendar) can then be specified separately only on the pages where it is required, for example the page on your site that advertises that unit.

<script type="text/javascript">
    rezStreamLoader.load({
        calElements: "#calendar-widget",
        business: 'your-business-slug'
    });
</script>

<script type="text/javascript">
    rezStreamLoader.ready(function() {
        this.addCalendar("#individual-calendar-widget", {
            business: 'your-business-slug',
            unit: "00000000-0000-0000-0000-000000000000",
            inlineMonths: 2,
            showRates: false
        });
    });
</script>

Additional Functionality

Occasionally you will want to add functionality to the calendars after they have been added to the page. You can do this by telling the createComplete option what script to run after the calendars have been rendered and loaded on the page.

There is only one createComplete callback needed, regardless of the number of calls to addCalendar, because all of the calendars are added to the page at once.

In this example, we setup a callback to verifyDate using createComplete where we are checking to see the arrival date for either of the widgets on the page is April 1st 2012, and if it is before April 1st set the arrival date on all widgets to that date.

<script type="text/javascript">
    rezStreamLoader.load({
        calElements: "#calendar-widget",
        business: 'your-business-slug',
        createComplete: verifyDate
    }, function () {

        this.addCalendar("#individual-calendar-widget", {
            business: 'your-business-slug',
            unit: "00000000-0000-0000-0000-000000000000",
            inlineMonths: 2,
            showRates: false
        });

    });

    function verifyDate() {
        jQuery(".rs-sc-arrival").each(function(i) {
            var currentDate = $(this).datepick("getDate")[0],
                april1st = new Date(2012, 3, 1);
            if (currentDate !== null && currentDate < april1st) {
                $(this).datepick("setDate", april1st);
            }
        });
    }
</script>