bookingsync-calendar-widget v2.1.5

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

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)
 });