IBIS Calendar Widget

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

If you want multiple IBIS Calendar Widgets on a single page, please follow the instructions on the following page /widgets/ibis-calendar-widget/ibis-calendar-widget-multiple-widgets-on-page/

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-calendar"></div>

ibisCalendarWidget({
  appURL: 'https://book.yourwebsite.com',
  cartDir: '/cart',
  mode: 'iframe',
  rollover: '15:00'
});

ibisCalendarWidget({
  appURL: 'https://book.yourwebsite.com',
  cartDir: '/cart',
  mode: 'iframe',
  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.

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)

container [compulsory only for the second widget onward on the page]
This is where you specify the class or ID name of the element into which the widget is generated.

Format: String
Default: ‘.ibis-widget-calendar’

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 or a product group to show the departures for. The prodCode comes from the IBIS system.

To specify a product group, the value should to be ‘ProdGroup-’ then 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

showAvail [optional]
Set this option to false to hide the Availability column.

Format: Boolean
Default: true

showBookLink [optional]
Set this option to false to hide the booking links.

Format: Boolean
Default: true

bookLinkText [optional]
Adjust this option to change the booking link text.

Format: String
Default: ‘Book Now’

bookLinkTextMobile [optional]
Adjust this option to change the booking link text for the mobile view. This option is particularly useful when you specify a prodCode so that the Calendar Widget is only showing availabilities for one specific product. You may wish to set this to ‘Book Now’ or similar. Setting the showAvail option to false will hide the availability display here also.

Format: String
Default: PRODUCT NAME (Availability) (i.e. ‘Beach Tour (5+)’)

loadOnInit [optional]
Set this option to false to NOT show the available departures for the current date on the widget load.

Format: Boolean
Default: true

mobileViewThreshold [optional]
Specify a value for the screen width in pixels (JavaScript window.innerWidth) where the widget display switches between the desktop mode and the mobile mode. Setting a large value (eg. 8000) to this option will make the widget to always display in the mobile mode. This is particularly useful if the area allocated to the widget is smaller than 580px in width regardless of the window size.

Format: Integer
Default: 580

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

Format: Callback function