Calendar Widgets
The Rez2U Calendar Widget provides a variety of ways to display rates and availability on your website which makes it easy for your potential guests to start making reservations right from your website.
Install the RezStream Loader on your site
Step 1 - Place the Calendar Widget
Place a target <div> element (or other html element) within your HTML markup where you want the Calendar Widget to appear. Within target element, you may include any HTML source that will indicate to the page visitor that the calendar is loading. This could simply be the word ‘Loading...’ or it could be an animated gif or it could be something styled via CSS - it’s completely up to you. Note, that when the Calendar Widget is finished loading, the content of the target element will be removed and replaced by the Calendar Widget. Here is an example:
<div id="calendar-widget">
<img src="some.cool.loading.image.png" alt="Loading Rates and Availability..." />
</div>
Step 2 - Include the RezStream Loader
The RezStream Loader is a JavaScript file that is served up from the Rez2U Booking Engine servers. The RezStream Loader is a very small JavaScript file that uses the concept of Asynchronous Resource Loading to dynamically load the various JavaScript and CSS resources required to make the Calendar Widgets work on your website. This asynchronous model of loading resources allows the Calendar Widgets to work without affecting the load time of your website pages.
Depending on how you want to use the RezStream Loader, you can place the following code snippet at the button of your <head> tag or at the bottom of the page before the ending </body> tag.
<script src="//rezstream.net/guest/assets/rezstreamloader" type="text/javascript"></script>
Note
In this case, we are specifying a “protocol-less” url (see section 4.2 of RFC 3986 for details). This will load the RezStream Loader using the same protocol of the current page (either http or https). If your site is only using http, you can certainly change the source url to include the http:// instead of the protocol-less // format.
Step 3 - Load the Calendar Widget
Now we’re ready to load the Calendar Widget. The following JavaScript shows how to create a basic Property Level Calendar Widget.
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345
});
</script>
Additional Options For Calendar Widgets
Display Months
If you want your calendar widget to display a calendar to help your guest visualize the availability you can add the inlineMonths option to the rezStreamLoader.load. The number you supply determines the number of months that will show. The default for this option is 0. For example:
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345,
inlineMonths: 2
});
</script>
Rates on the Calendar
By default the showRates property is set to true. If you want to hide the rates on the calendar you can simply set this value to false.
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345,
inlineMonths: 2,
showRates: false
});
</script>
Account Wide
If you have multiple properties in your account and want one calendar to show the availability across all of your properties at once you can remove the property option. (This can be used with or without the inlineMonths option.)
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
});
</script>
Individual Units / Rate Types
You can also show a calendar for an individual unit or rate type by passing the unit or rateCategory property. This is the unit or rate category slug.
To find the unit or rate category slug, log into the admin interface. You will find your slugs under either Property > Units/Rooms > Administration (individual units) or Account > Rate Categories/Unit Types (unit types) depending on which type of calendar you are using. (This can also be used with or without the inlineMonths option.)
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345,
unit: "slug"
});
</script>
or
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345,
rateCategory: "double-queen"
});
</script>
Important
Even though we’re showing availability for a specific unit or unit type, it’s still necessary to specify the account id and, if you link to the Rez2U Booking Engine for each specific property, the property id.
Multiple Calendars
There are 2 ways to add more than one calendar to the same page.
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 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 the 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",
account: 12345,
property: 12345
}, function () {
this.addCalendar("#individual-calendar-widget", {
account: 12345,
property: 12345,
unit: "slug",
inlineMonths: 2,
showRates: false
});
});
</script>
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 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 can then be specified separately only on the pages where it is required.
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345
});
</script>
<script type="text/javascript">
rezStreamLoader.ready(function() {
this.addCalendar("#individual-calendar-widget", {
account: 12345,
property: 12345,
unit: "slug",
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 finished being added to the page. Because the addCalendar function adds each calendar to the main loader there is only one createComplete needed because all of the calendars are added to the page at once. In this example we are checking to see if either the arrival date, for either of the widgets on the page is April 1st 2012, and if it is before April 1st it sets the arrival date to that date.
<script type="text/javascript">
rezStreamLoader.load({
calElements: "#calendar-widget",
account: 12345,
property: 12345,
createComplete: verifyDate
}, function () {
this.addCalendar("#individual-calendar-widget", {
account: 12345,
property: 12345,
unit: "slug",
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>
Custom Styling
We provide base style files to assist in the customization. See attachments below
- BEV4-Vertical
- BEV4-Horizontal
