Vacation Rental Management for busy people!

Add a booking calendar to your website

Availability calendar and optional contact form

For all subscribers

A newer format customizable, interactive calendar is available for inclusion on your own website that can replace the older IFRAME calendar and Contact form completely. It will use your existing theme colors (if defined) or you can fully style it using CSS on the website where it gets integrated.

One or more properties can be displayed at the same time. See the bottom of this page for live examples.

Calendar with default colors, single property

Online quoting and booking - Unattended Online Booking (UOB)

For Platinum subscribers

This extends the new calendar to provide dynamic quotes and immediate online booking - the owner does not need to do anything except process the booking once received. The traveler can also send themselves an email of the quote for later reference - this uses the default Quotation template or one that you have defined. Any email sent is recorded and viewable as a Done request on the Requests page - all follow-up reminder emails apply in the same way to these requests too.

This capability is not enabled by default - see below for how to enable.

Calendar with theme 4 colors, multiple properties and quotes

Adding this to your site

The calendar is added by including a SCRIPT on your site (you can also just create a regular link here). Here is the general form of the script:

<script type="text/javascript" src="MY_SRC_LINK"></script>

where MY_SRC_LINK is:

http://www.myvrzone.com/onlinebooking/render_js.php?cid=UID-PID&MY_PARAMS

where:

UID is your user ID
PID is an optional property ID (set as zero for multiple properties)
MY_PARAMS are optional, additional parameters that can change the look

Example with no extra parameters:

type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2"></script>

More changes using MY_PARAMS:

You can add more paramters to change the look for your website. Separate each parameter you use with an "&" - see the examples below to see what that looks like.

What Tag Details

Multi-Property Selection

Specific list of properties

(multi-property display only)

propertyList=#:#:#

When displaying multiple properties at once, the default is to display all of them. If you want to display just some of them then provide the list of PIDs in a colon-separated list:

  • Replace #'s with a PID
  • Example: "propertyList=1:3:4" to display properties with IDs 1, 3 and 4
Display Settings
Number of months m=# Applies to single property displays only
  • Replace # with the number or months you want to display - the default is 6
  • Example: "m=12" to display 12 months
Number of columns c=# Applies to single property/monthly displays only
  • Replace # with the number of columns you want or leave blank
  • When blank (or zero) the system will fit as many columns as possible -i is the default
  • Example: "c=4" to display 4 columns
Number of weeks w=# Applies to multiple property displays
  • Replace # with the number you want - the default is 4
  • Example: "w=6" to display 6 weeks
Color theme t=#
  • Set # to "0" (zero) to use the default calendar theme ("t=0")
  • Don't set # at all to use the theme set up in your account ("t=") - this is the default
  • Set # to any other number to choose one of the predefined themes
  • Example: "t=2" to use the maroon theme
Start day of week d=#
  • Set # to 0 through 6 for the weekday where 0 is Sunday, 6 is Saturday
  • Don't set # to anything to start on Saturday (6) - this is the default
  • Example: "d=3" to start on Wednesday
Start date for the calendar startDate=YYYY-MM-DD

Set the start of the calendar by supplying a date:

  • To set the start to Feb 5th 2018, enter:
  • "startDate=2018-02-05"
Size/scale size=#
  • Set # to a number to set the font-size, everything else scales with that
  • Don't set # to anything to set it to 12 - this is the default
  • Example: "d=14" to make it bigger
  • Example: "d=10" to make it smaller
Show Legend showlegend=#
  • Set # to non-zero to have the legend displayed underneath the navigation controls
  • Set # to zero or leave out to hide the legend - this is the default
  • Example: "showlegend=1" to display it
  • Example: "showlegend=0" or "showlegend=" to hide it
Show property name pn=#
  • Set # to non-zero to have the property name displayed at the top (when only property is displayed)
  • Set # to zero or leave out to hide the name  - this is the default
  • Example: "pn=1" to display it
  • Example: "pn=0" or "pn=" to hide it
Show property description pd=#
  • Set # to non-zero to have the property line description displayed at the top (when only property is displayed)
  • Set # to zero or leave out to hide the description - this is the default
  • Example: "pd=1" to display it
  • Example: "pd=0" or "pn=" to hide it
Show manager info
(when logged in)
man=#
  • Set # to 1 to show all reservations on the calendar, regardless of the display settings in the account if you are logged in to your MyVRZone account.
  • When logged in, all tentative, pending and confirmed reservations will be shown and they can be clicked to open them in your account.
  • Set # to 0 (zero) or don't set it at all to display the expected reservations - this is the default
  • Example: "man=1" to display all reservations

 

Show manager info
(when not logged in)

token=###############
  • If you want to be able to view your reservation details using the "man=1" parameter, but don't want to have to be logged in, then you can add your account token to the link.
  • The account token is PRIVATE. You should NEVER give this to anyone else or put it on your website.
  • Instead, use it to create a browser bookmark that you can click to get straight to the details.
  • Example: "token=q123wkl6f0dl39v"
Display in a separate page url=true
Hide the navigation nonav=#
  • Set # to 1 to hide the navigation controls - the calendar can then not be changed by the visitor
  • Set to zero or nothing at all to display the controls - this is the default
  • Example: "nonav=1" to hide the navigation
Hide the contact button nofooter=#
  • Set # to 1 to hide the footer at the bottom altogether
  • Set to zero or nothing at all to display the Contact button - this is the default
  • Example: "nofooter=1" to hide the footer and contact button
Set display currency exchangeID=XXX For Platinum Subscribers only
  • Set XXX to the currency that you want to default to using the international 3-letter currency codes, eg. USD, GBP, EUR or CAD. You must support the currency selected, of course.
  • Example: "exchangeID=CAD" for canadian dollars
Show rates for each unbooked night on hover showrates=# For Platinum Subscribers only
  • Set # to 1 to show the rates.
  • Set # to 0 (or don't set it at all) to not show the rates.
  • Example: "showrates=1" to show the rates
Button Label
button Not in use any more - use one of the next two tags instead.
Change the text on the "Contact" button contactbutton=MyLabel

You can change the text on the Contact button to something else:

  • To set  the label to "Click here for a quote"
  • Example: "contactbutton=Contact%20Us"

You'll need to encode any spaces by writing them as %20

Change the text on the "Get Quote" button quotebutton=MyLabel

You can change the text on the Get Quote button to something else:

  • To set  the label to "Click here for a quote"
  • Example: "quotebutton=Click%for%20a%20quote"

You'll need to encode any spaces by writing them as %20

Change the promo codes and guest count labels adultsLabel=MyLabel
childrenLabel=MyLabel
infantsLabel=MyLabel
promoCodeLabel=MyLabel

For Platinum Subscribers only

To change the default labels for the promo code and guest count boxes (which are only shown when your quotes can depend on them with Discounts/Surcharges) then set the labels using these arguments:

Set MyLabel to whatever you want the label to be for each type:

  • adultsLabel for the oldest age range
  • childrenLabel for the middle age range
  • infantsLabel for the youngest age range
  • promoCodeLabel for the promo code

Your age ranges are set per-property in the property setup page and default to over 18 for adults, over 2 for children and infants under 2.

You'll need to encode any spaces by writing them as %20 (eg. Num%20Adults)

Override how Tentative, Pending or Confirmed reservations are displayed.

Tentative:
sett=#

Pending:
setp=#

Confirmed:
setc=#

  • Set # to 1 to show as Booked.
  • Set # to 0 to show as Unbooked.
  • Don't set at all (leave blank) to default to your account settings
  • Example: "sett=1" to show Tentative as booked
  • Example: "setp=0&setc=0" to show Pending and Confirmed as Unbooked
Integrate with a form on your site
Integrate with existing form.
For when you already have a form with dates/nights.
arrivalInputId=arrival_date_id
departureInputId=departure_date_id
nightsInputId=number_of_nights_id

 

  • If the form already has dates in it when the calendar is loading, then it will highlight the calendar with those dates. If different dates are selected then the inputs will be updated and a temporary highlight applied to indicate a change there.
  • The date format that the calendar writes is fixed at the moment, though it will be able to read any valid format.
Enabling Quotes and Booking
Online Quoting/Booking uob=#
  • Set # to "1" (one) to enable online quoting and booking
  • Set # to "0" (zero) or leave blank to disable - this is the default
  • Example: "uob=1"

 

More changes using CSS (advanced)

The calendar is created on your website after calling the script, so you can use your own CSS styles of affect how it looks. You can change pretty much anything this way - from the color/size of the cells to the images on the buttons.

If you understand how CSS works then you can use the web development toos in your browser to see how the default CSS is applied after adding the calendar script and then make plans to override them yourself.

Here are the main CSS files you can use as reference:

  1. Main CSS, always present:
    http://www.myvrzone.com/onlinebooking/main.css
  2. Theme CSS, present when the "t" paramter is to set to "0" (zero), example using t=4:
    http://www.myvrzone.com/onlinebooking/theme.css.php?cid=2-1&t=4
  3. Add your own CSS afterwards to override the settings above

Usage Notes

  • When using the Quoting and Booking capabilities:
    - Make sure that your rates are set correctly and as simply as possible
    - Ensure that your terms and conditions give you sufficient wiggle-room for rejecting a booking
    - Any follow-up reminders will apply to any quotes that the visitor sends to themselves
  • Limiting how far in advance a quote/booking can be made. There are 2 components to this:
    - The furthest date that you have defined in your Date List will be the first limit.
    - If you have multiple properties then the earliest date over all properties will be used.
    - Set a max number of days into the future in the Setup>Main >> Account>Info tab for the second limit.
    - The earliest of the two limits above ahead will be used.
    - No booking can be made on quotes that return zero amounts.

Integration Notes

After the web page loads, the calendar will be created inside a div with an id of "mvrz_uob", secondary scripts and css files will be placed inline around that div.

  • It is recommended to enclose/wrap the SCRIPT in your own div to give better control:
    <div id="uob_wrap"><script type="text/javascript" src="MY_SRC_LINK"></script></div>
  • The mvrz_uob DIV will set itself to be 100% wide - use the uob_wrap div to set the width and position
  • The script makes use of other scripts (there's a check if they already exist to avoid reloading):
    jQuery: version 1.5.1 or later is needed
    chosen: for making select boxes look better
    prettyPhoto: for dealing with capturing info for emailing, contact and booking
    color: for animating color changes in the cell highlights
  • Only one calendar can be on a page at a time. If you need more than one then put it in an IFRAME to keep it separate.

Examples

As this calendar does not use IFRAMEs, then it needs to be part of an existing web page for it to be seen.

NOTE about the example links - read this

What you see in text is NOT the same as the underlying link in the "a" tag's "ref" attribute

I have created a website that will allow me to demonstrate how the different parameters work. The links below pass parameters to the SCRIPT src attribute on that webpage. Click on the link and then view the page source in your browser to see the SCRIPT src used - it will be the same as that shown as the visible text in the example link below.

Displaying one property

If you only have one property then you do not need to set the PID part of the CID parameter. If you have more than one then set PID to the proeprty ID you wish to display.

No quoting or booking, default number of months, default colors

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2-2&t=0"></SCRIPT>

No quoting or booking, 4 months, predefined theme (Light Blue) for better match to site

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2-2&t=30&m=4"></SCRIPT>

No quoting or booking, 3 months, predefined theme (Green) on green site

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2-2&t=4&m=3"></SCRIPT>

With quoting and booking, default otherwise

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2-2&t=0&uob=1"></SCRIPT>

Displaying multiple properties

The examples in the Single property section above are showing a single property even though the account has more than one. This was done by setting the PID part of the CID parameter to a specific property ID.

If you have more than one property you can display availability for all properties at once if you like by setting the PID part of the CID paramter to "0" (zero) or not setting it at all. The following examples do that.

No quoting or booking, default number of weeks, default colors

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2&t=0"></SCRIPT>

No quoting or booking, 6 weeks, predefined theme (Light Blue) for better match to site

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2&t=30&w=6"></SCRIPT>

No quoting or booking, 3 months, predefined theme (Green) on green site

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2&t=4&m=3"></SCRIPT>

With quoting and booking, default otherwise

<SCRIPT type="text/javascript" src="http://www.myvrzone.com/onlinebooking/render_js.php?cid=2&t=0&uob=1"></SCRIPT>