JetBooking. JavaScript API documentation

booking-calendar-api-doc.md

Documentation for JetBooking calendar JS API!

Filter jet-booking/input/config

Allows to change initial set up of booking calendar. Usage example:

window.jetBookingState.filters.add( "jet-booking/input/config", ( config ) => {

	const validateDay = config.beforeShowDay;

	config.beforeShowDay = function( t ) {

		let day = moment( t );
		let value = jQuery( "[data-field-name=\'_capacity\']:checked" ).val();
		let availableDays = [ 5 ];

		if ( 7 == value ) {
			availableDays.push( 2 );
		}

		if ( ! availableDays.includes( day.day() ) ) {
			return [ false, "", "Not available" ];
		} else {
			return validateDay( t );
		}

	}

	return config;
} );

To work correctly this code should be added after booking-init.js file with JetBookin calendar initialization is loaded.

Available config options:

• format (String) The date format string used for Moment. click here to see Moment documentation

• separator (String) The separator string used between date strings

• language (String) pre-defined languages are "en" and "cn", you can define your own language then set this to the name of new language. You can also set this to "auto" to make it auto detect browser language.

• startOfWeek (String) "sunday" or "monday"

• getValue (Function) This function is called when get date range string from DOM When it is called, the context of this function is set to the datepicker DOM

• setValue (Function) This function is called when set date range string to DOM

• startDate (String or false) This string defines the earliest date which is allowed for the user, same format as format

• endDate (String or false) This string defines the latest date which is allowed for the user, same format as format

• minDays (Number) This number defines the minimum days of the selected range if this is 0, means do not limit minimum days

• maxDays (Number) This number defines the maximum days of the selected range if this is 0, means do not limit maximum days

• showShortcuts (Boolean) hide or show shortcuts area

• shortcuts (Object) define the shortcuts buttons. there are some built in shortcuts, see source code

• time (Object) If enabled adds time selection controls.

• customShortcuts (Array) define custom shortcut buttons. see demo.js

• inline (Boolean) whether to render the date range picker dom in inline mode instead of overlay mode, if set to true, please set container too

• container (String, CSS selector || DOM Object) where should the date range picker dom should be renderred to

• alwaysOpen (Boolean) if you use inline mode, you may want the date range picker widget to be renderred when the page loads set this to true will also hide the "close" button

• singleDate (Boolean) choose a single date instead of a date range. If singleMonth option is set to true it will show only one month instead of two months.

• batchMode (false / 'week' / 'month') auto batch select mode false (default), week, month, week-range, month-range

• beforeShowDay (Function) A function that takes a date as a parameter and must return an array with: [0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date The function is called for each day in the datepicker before it is displayed.

• stickyMonths (Boolean) If true, there will only be one previous and one next button. Clicking them will change both the months. This setting will have no effect if singleDate option is set to true

• singleMonth (Boolean || 'auto') Default value: 'auto' If true, it will show only one month instead of two months. You can select date range in the one month view. If this is set to 'auto', it will be changed to true if the screen width is lower than 480.

• showDateFilter ( Function(Int time, Int date) ) This is a callback function when creating each date element in the calendar. First paramter will be the timestamp of that day. Second parameter will be the date of that month.

• customTopBar ( Function || String) If you set this parameter, it will use this value in the top bar.

• extraClass (String) Set extra class name to the date range picker dom.

• customArrowPrevSymbol (String / String HTML) Set custom previous symbol, you can use html snippet too.

• customArrowNextSymbol (String / String HTML) Set custom next symbol, you can use html snippet too.

• showTopbar (Boolean) If show the top bar.

• swapTime (Boolean) If true and if time is enabled, on choosing first enddate and than startdate, endtime and starttime will be swapped. If this configkey is false, only date will be swapped, time will stay constant. If time is disabled, this config key is not used.

• selectForward (Boolean) Default: false If this is true, you can only select second date after the first selected date.

• selectBackward (Boolean) Default: false If this is true, you can only select second date before the first selected date.

• showWeekNumbers (Boolean) Default: false If this is true, it will show week number of the year in the calendar.

• getWeekNumber (Function( Date object ) ) the function called to generate the week number. the first parameter will be the first day of a week

• monthSelect (Boolean) Default: false If this is true, you can quickly change month by clicking on month name

• yearSelect (Boolean || Array || Function) Default: false If this is true, you can quickly change year by clicking on year number. By default select will contain years from "current year - 5" to "current year + 5" but you can change this. You can set year range by array like this [1900, 2017]. And if you want more control you can set function which get selected year and should return array. For example: function(current) { return [current - 10, current + 10]; }

Filter jet-booking/calendar/config

Allows to change initial set up of booking calendar widget. Works similar to jet-booking/input/config.

Filter jet-booking/apartment-price

Allows to change %ADVANCED_PRICE% macros apartment price result.

Trigger jet-booking/init

Fires when all JetBooking-realted JS handlers are attached. Example of usage:

jQuery( document ).on( 'jet-booking/init', () => {
	console.log( 'JetBooking initialized' );
} );

Trigger jet-booking/init-field

Fires after Check In/Check Out field inside booking form initialized. Usage example:

jQuery( document ).on( "jet-booking/init-field", ( $event, $field ) => {
	$field.bind( "datepicker-first-date-selected", ( event, obj ) => {
		$field.data( "dateRangePicker" ).setEnd( moment( obj.date1 ).add( 7, "d" ).format( "YYYY-MM-DD" ) );
	} );
} );

Trigger jet-booking/init-calendar

Fires after Check In/Check Out field inside booking form initialized. Usage example:

Works the same way as previous. Only difference - triggers on Booking Calendar widget initialization. Usage example also will be the same, just accepts appropriate calendar element as second argument:

jQuery( document ).on( "jet-booking/init-calendar", ( $event, $calendar ) => {
	$calendar.bind( "datepicker-first-date-selected", ( event, obj ) => {
		$calendar.data( "dateRangePicker" ).setEnd( moment( obj.date1 ).add( 7, "d" ).format( "YYYY-MM-DD" ) );
	} );
} );

Available events for the last 2 triggers:

• datepicker-first-date-selected - This event will be triggered when first date is selected

$el.dateRangePicker().bind( 'datepicker-first-date-selected', ( event, obj ) => {
	console.log(obj);
	// obj will be something like this:
	// {
	// 		date1: (Date object of the earlier date)
	// }
} );

• datepicker-change - This event will be triggered when second date is selected

$el.dateRangePicker().bind('datepicker-change',( event, obj ) => {
	console.log(obj);
	// obj will be something like this:
	// {
	// 		date1: (Date object of the earlier date),
	// 		date2: (Date object of the later date),
	//	 	value: "2013-06-05 to 2013-06-07"
	// }
});

• datepicker-apply - This event will be triggered when user clicks on the apply button

$el.dateRangePicker().bind('datepicker-apply', ( event, obj ) => {
	console.log(obj);
})

• datepicker-close - This event will be triggered before date range picker close animation

$el.dateRangePicker().bind( 'datepicker-close', () => {
	console.log('before close');
})

• datepicker-closed - This event will be triggered after date range picker close animation

$el.dateRangePicker().bind('datepicker-closed', () => {
	console.log('after close');
})

• datepicker-open - This event will be triggered before date range picker open animation

$el.dateRangePicker().bind( 'datepicker-open', () => {
	console.log('before open');
})

• datepicker-opened - This event will be triggered after date range picker open animation

$el.dateRangePicker().bind( 'datepicker-opened', () => {
	console.log('after open');
})

Available methods for the last 2 triggers:

• setDateRange - set dates range. Two date strings should follow the format in config object. Set the third argument to be true if you don't want this method to trigger a datepicker-change event.
• setStart - set the start date to the specified date. Date string should follow the format in config object.
• setEnd - set the end date to the specified date. Set the second argument to true if you don't want this method to trigger a datepicker-change event.
• clear - clear date range.
• close - close date range picker overlay.
• open - open date range picker overlay.
• resetMonthsView - reset to default months.
• destroy - destroy all date range picker related things.

Example:

$el.data('dateRangePicker').setDateRange('2013-11-20','2013-11-25');
$el.data('dateRangePicker').setStart('2013-11-20');
$el.data('dateRangePicker').setEnd('2013-11-25');
$el.data('dateRangePicker').clear();