bookingsync-calendar-widget

Calendar Widget

TL;DR

Development

• npm
• npm start
• npm run mock-server
• npm run test-ci

Usage

• load dist/bookingsync-calendar-widget.js script

• add <div data-bookingsync-calendar-widget></div> tag to the place you would like to put the widget.

• Or as global.

const calendar = new BookingSyncCalendarWidget({ el: document.querySelector('.my-widget') });

• Or as module

import Calendar from 'bookingsync-calendar-widget';

const calendar = new Calendar({ el: document.querySelector('.my-widget') });

@see index.html for more examples.

Setup

• Webpack based.
• ES6 as a source.
• Exports in a umd format, runs everywhere.
• ES6 tests with Mocha, Chai and Karma runner.
• Linting with Airbnb eslint

Getting started with Development

• npm to get the project's dependencies.
• npm start to start development server with live-reload and hot module replacement
• go to http://localhost:8080/index.html

Additionally you can run json-mock server

• npm run mock-server it serve maps api for local development. Mocks are in db.json file.

Scripts

• npm start - starts development server with live-reload and hot module replacement
• npm run build - produces production version under the dist folder
• npm run test - runs tests.

Config

Option	Description	Type	Default
el	HTMLElement to act as a container (only this one is MANDATORY)	HTMLElement	null
apiHost	API host name	String	http://localhost:3000 for development, https://www.bookingsync.com for production
apiNamespace	API namespase	String	/api/v2/public
apiMapsRoute	route for maps	String	/maps.json?rental_id={params} - {params} is replaced with rentalId
rentalURL	URL route for maps	Function
rentalId	parameter to pass in API request for availability maps	String or Number	null
currency	Set currency conversion	String	null
minStay	Minimum selectable range	Number	1
maxStay	Maximum selectable range	Number	Infinity
allowShorterMinStaySelection	Force minimum selection to opts.minStay	Boolean	false
allowShorterMaxStaySelection	Force maximum selection to opts.maxStay	Boolean	false
monthStart	Calendar starts months, the left up most, 0 - 11 range	Number	Current month
yearStart	Calendar start year, YYYY format (2016)	Number	Current year
displayMonths	How many months to render	Number	2
selectable	Allow to select range	Boolean	false
showRates	Show rates from availability map	Boolean	false
showMinStay	Show minimum stay per single day (be careful to use together with showRates or showMaxStay, can be too munch information)	Boolean	false
showMaxStay	Show maximum stay per single day (be careful to use together with showRates or showMinStay, can be too munch information)	Boolean	false
isReverseSelectable	User selects end date first	Boolean	false
isBackDisabled	Disable back button for past months	Boolean	true
isDropDown	Act like drop down, good idea to specify elStartAt and elEndAt	Boolean	false
elStartAt	Input field to show start selected, open drop-down on focus	HTMLElement	null (will try to find .bookingsyncCalendarWidget__start-at if null)
elEndAt	Input field to show end selected, open drop-down on focus	HTMLElement	null (will try to find .bookingsyncCalendarWidget__end-at if null)
elSingleInput	Single input field to show start/end selected, open drop-down on focus	HTMLElement	null (will try to find .bookingsyncCalendarWidget__single-input if null)
isSingleInput	Allow to use the single input, hides start/end inputs	Boolean	null
elReset	Any element on click resets calendar selections and input values	HTMLElement	null
formatDate	Overwrite locale defined date format	String	%m/%d/%y (https://github.com/pineapplemachine/strtime-js/blob/HEAD/directives.md)
hiddenElFormat	Duplicate start/end inputs with a different date format	String	null
disableAvailabityMap	Overwrite each days to be available	Boolean	false
enableAllDays	Force past days/months to be selectable	Boolean	false
currentDate	Current date Date object	Date	new Date()

Callbacks

• onSelectStart(ISO String, Date)
• onSelectEnd(ISO String, Date)
• onSelectionCompleted(ISO String, ISO String)

see index.html for more examples. All options can be passed as data- attributes to HTMLElement calendar placeholders, with dasherized way. e.g.

<div 
  data-bookingsync-calendar-widget
  data-selectable="true"
  data-format-date="%m/%d/%y">
</div>

Events

Calendar implements event Emitter, receiver can subscribe/unsubscribe to events and subscribe one-time.

var cal = new bookingsyncCalendarWidget({
  el: document.querySelector('.calendar-wrapper'),
});

cal.on('selection-end', function(a, b) {
  console.log('selection-end', a, b)
});
cal.on('selection-start', function(a, b) {
  console.log('selection-start', a, b)
});

cal.once('selection-end', function(a, b) {
    console.log('selection-end', a, b)
 });
 
cal.off('selection-end', function(a, b) {
    console.log('selection-end', a, b)
 }); 

Event	Description	Params
init	Finished initializing, data is NOT loaded
maps-loaded	Availability, rates and minimum stay maps are loaded and added to calendar	{Object} raw response from the server
maps-error	Error when loading maps
loading-show	Loading indicator shows
loading-hide	Loading indicator hides
selection-start	User selected start date	{String} {Date}, ISO format '2016-01-01', Date
selection-end	User selected end date	{String} {Date}, ISO format '2016-01-01', Date
selection-reset	Selection reset	{Array}, {Array}, selection start, selection end ([yyyy, m, dd])
selection-completed	User selects end date when start date was already selected	{Array}, {Array}, selection start, selection end ([yyyy, m, dd])
drop-open	Calendar-drop open
drop-close	Calendar-drop close

Changelog

[2.1.5] - 2024-04-04

Added

• Improved accessibility features