Smily Calendar Widget (formerly BookingSync)

TL;DR

Development

• pnpm install
• pnpm dev
• pnpm run mock-server
• pnpm run test-ci

Usage

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

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

• Or as global.

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

• Or as module

import Calendar from 'bookingsync-calendar-widget';

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

Note: npm package name and dist filename remain bookingsync-calendar-widget.

Theme note: the built-in default is now data-theme="basic" only. If you need the previous skew look, use SKEW_THEME_CSS.md.

@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

• pnpm install to get the project's dependencies.
• pnpm dev 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

• pnpm run mock-server serves the maps API for local development. Mocks are in db.json.

Scripts

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

Positioning

The widget no longer bundles Popper. For dropdown and invalid-range tooltip positioning it will use the first runtime it finds:

1. window.Popper with a Popper 2 style createPopper()
2. window.FloatingUIDOM, window.FloatingUI, or window.floatingUI with computePosition()
3. a built-in fallback

The built-in fallback is intentionally basic. It supports top / bottom / left / right placement, -start / -end alignment, tooltip arrow positioning, and repositioning on resize and scroll. It does not implement collision-aware behavior such as flip, shift, or advanced hide handling. If you need that, expose Popper or Floating UI in the page runtime.

Config

| Option | Description | Type | Default | | --- | --- | --- | --- | | el | Calendar container element. This is the only required option. | HTMLElement | null | | lang | Locale key such as en-US or fr-FR. Invalid values fall back to en-US. | String | en-US | | theme | Theme name stored in data-theme. The bundled stylesheet currently ships basic only. | String | basic | | apiHost | API host name. | String | http://localhost:3000 in development, https://secure.smily.com otherwise | | apiNamespace | API namespace prefix. | String | /api/v2/public | | apiMapsRoute | Maps route template used by the default rentalUrl() implementation. | String | /maps.json?{apiRentalId}{apiCurrency} | | rentalUrl(ids) | Function used to build the maps URL. By default it derives the URL from apiHost, apiNamespace, apiMapsRoute, apiRentalId, and apiCurrency. | Function | built-in implementation | | rentalId | Rental identifier used when loading availability maps. | String or Number | null | | currency | Target currency for rate conversion and display. | String | null | | startOfWeek | First weekday index, 0 for Sunday through 6 for Saturday. If omitted, the locale value is used. | Number | locale default | | minStay | Minimum selectable range in nights. | Number | 1 | | maxStay | Maximum selectable range in nights. | Number | Infinity | | allowShorterMinStaySelection | Ignore per-day minimum-stay constraints and use minStay only. | Boolean | false | | allowLongerMaxStaySelection | Ignore per-day maximum-stay constraints and use maxStay only. | Boolean | false | | monthStart | First visible month, 0 through 11. If omitted, the current month is used. | Number | current month | | yearStart | First visible year. If omitted, the current year is used. | Number | current year | | displayMonths | Number of visible months on desktop. | Number | 2 | | displayMonthsMobile | Number of visible months on mobile. If omitted, displayMonths is used. | Number | null | | mobileBreakpoint | Mobile viewport max width in px. <= this breakpoint is treated as mobile. | Number | 767 | | showPaginationMobile | Keep the month pagination controls visible in mobile mode. | Boolean | true | | monthsPaginationJump | Number of months to move when the forward/back controls are used. | Number | 1 | | selectable | Enable range selection. | Boolean | false | | showRates | Show rates from the availability map. | Boolean | false | | showMinStay | Show minimum-stay text per day cell. | Boolean | false | | showMaxStay | Show maximum-stay text per day cell. | Boolean | false | | isReverseSelectable | Start selection from the end date instead of the start date. | Boolean | false | | isBackDisabled | Prevent month navigation into the past. | Boolean | true | | enableAllDays | Make past days and months selectable even when maps are not loaded. | Boolean | false | | isDropDown | Render the widget as a dropdown anchored to an input or trigger element. | Boolean | false | | dropPlacement | Preferred dropdown placement passed to the active positioning engine. | String | bottom-start | | elStartAt | Start-date input. Also used as the dropdown opener when isDropDown is enabled. | HTMLElement | null, then .SmilyCalendar__start-at if found | | elEndAt | End-date input. Also used as the dropdown opener when isDropDown is enabled. | HTMLElement | null, then .SmilyCalendar__end-at if found | | elSingleInput | Single combined input used for dropdown mode. | HTMLElement | null, then .SmilyCalendar__single-input if found | | isSingleInput | Use the single input and hide the start/end inputs. | Boolean | null | | singleInputDateFormat | Date format used when filling the combined single input. | String | locale date format | | singleInputSeparator | Separator inserted between start and end dates in the single input. | String | → | | elReset | Element that clears the current selection when clicked. | HTMLElement | null | | formatDate | Date format used for parsing and formatting visible input values. | String | locale date format | | hiddenElFormat | If set, duplicates the start/end inputs into hidden fields formatted with this pattern. | String | null | | disableAvailabityMap | Treat every mapped day as available. | Boolean | false | | currentDate | Date used as "today" for disabling and clamping logic. | Date | new Date() |

Callbacks

• onSelectStart(ISO DateTime String, ISO Date String)
• onSelectEnd(ISO DateTime String, ISO Date String)
• onSelectionCompleted(ISO DateTime String, ISO DateTime String)
• onClearSelection([yyyy, m, dd] | null, [yyyy, m, dd] | null)

See index.html for more examples. All options can be passed as data- attributes to HTMLElement calendar placeholders, with camelCase options converted to kebab-case. e.g.

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

Events

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

var cal = new SmilyCalendarWidget({
  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}, {String}: ISO datetime, ISO date | | selection-end | User selected end date | {String}, {String}: ISO datetime, ISO 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 | |