IBIS Multiday Calendar Widget

The Multiday Departure Calendar Widget allows you to show an availability calendar and departures for multiple days to your browsing customers, ahead of them reaching the hosted IBIS E-commerce transaction pages.

Below is the IBIS Multiday Calendar Widget implementation example. Full article can be found here.
ibishelp.freshdesk.com

Below are the HTML, basic JavaScript function call used to produce the widgets above, all the available options for the function and a list of required files.

<div class="ibis-widget-multiday-calendar"></div>

ibisMultidayCalendar({
  prodTitle: 'The Far North',
  prodImage: '/img/farnorth.jpg',
  prodDescription: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.',
  mode: 'iframe',
  cartDir: '/cart',
  appURL: 'https://book.yourwebsite.com',
  rollover: '15:00'
});

ibisMultidayCalendar({
  prodTitle: 'The Far North',
  prodImage: '/img/farnorth.jpg',
  prodDescription: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.',
  mode: 'iframe',
  cartDir: '/cart',
  appURL: 'https://book.yourwebsite.com',
  theme: 'dark',
  rollover: '15:00'
});

Tip: Wrap the above function calls in the DOMContentLoaded/DOM ready event (developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event), unless you are sure that the call is placed after all the DOM elements required for the widget.

prodTitle [optional]
This is where you specify the title text to appear in the widget header area.

Format: String

prodDescription [optional]
This is where you specify the description text to appear in the widget header area.

Format: String

prodImage [optional]
This is where you specify the location of the image to appear in the widget header.

Format: String
Examples:
- Good: https://www.yourwebsite.com/images/image.png
- Good: /images/image.png
- Bad: www.yourwebsite.com/images/image.png (does not have the protocol i.e. https://)

appURL [compulsory]
This is where your IBIS E-Commerce website URL goes, and is compulsory. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’

Format: String
Examples:
- Good: https://www.google.com
- Bad: www.google.com (does not have the protocol i.e. https://)
- Bad: https://www.google.com/ (has a trailing forward-slash)

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory on your website. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’. The ‘/’ at the beginning is required.

Format: String

mode [compulsory for iframe only]
Value is ‘iframe’

Format: String

theme [optional]
Select from two available themes, either ‘lite’ or ‘dark’.

Format: String
Default: ‘lite’

defaultDate [optional]
Use this option to specify the date that the widget shows departures for.

Tip: There is an IBIS custom function available that you may wish to use when you set the defaultDate. It’s ibisAddDays(param1, param2). param1 parameter takes JavaScript date object and param2 takes an integer for the number of days you wish to add or subtract. For example ibisAddDays(new Date(), 1) would be tomorrow. ibisAddDays() function is built in to the core IBIS Widget JavaScript library. So no additional include file is required.

Format: JavaScript Date, String (date-like string, i.e. ‘YYYY-MM-DD’)
Default: new Date() (i.e. today)

prodCode [optional]
Use this option to specify a product to show the departures for. The prodCode comes from the IBIS system.

To specify a product group, the value should be ‘ProdGroup-’ followed by the actual product group code (eg. ‘ProdGroup-Walks’ when the product group code is ‘Walks’). Case-insensitive.

Format: String
Default: ‘*’

showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)

Format: Boolean
Default: false

rollover [optional]
Specify the time after which the widget shows the availability for the following day, instead of the current day. The value should be in 24h format (eg. ‘16:00’). This option will be ignored if defaultDate is set.

Format: String (in HH:mm format)
Default: null

showProdName [optional]
Set this option to false to hide the product names.

Format: Boolean
Default: true

showSpace [optional]
Set this option to false for the booking buttons to read what is set in the following bookLinkText option, instead of showing the number of available spots.

Format: Boolean
Default: true

bookLinkText [optional]
Adjust this option to change the booking button text when the showSpace option is set to false.

Format: String
Default: null

closedText [optional]
Adjust this option to change the text appears when the departure is closed (passed the close-off time).

Format: String
Default: ‘Closed’

departedText [optional]
Adjust this option to change the text appears when the departure has been departed.

Format: String
Default: ‘Departed’

noAvailText [optional]
Adjust this option to change the message which appears when no departure is found. This message will be wrapped in a <p> element with ‘ibis-multiday-calendar-no-avail-text’ class, in case you wish to style this text.

Format: String
Default: ‘No departure found for the selected product and date.’

then [optional]
A callback function for when the widget is initiated.

Format: Callback function