Easybooking-widget NPM

Easyviewing Widget and Platform

Embed a widget linked with an Easyviewing Api anywhere

Uses FullCalendar with a custom theme for dynamic calendar rendering with available viewing slots fetched from Easyviewing (Using the Rest API).

Get started

You can use this repo in two different ways:

Build it using yarn build and host the dist folder online. You need to:

Set API_URL to the Easyviewing Api Server (default value is localhost:3030 for development purpose).
Set PLATFORM_URL to the server's url (the one hosting the /dist folder)
Set DEBUGGING to false
Follow the integration guide below

Just import EasyViewingWidget from 'easyviewing-widget' to your code and follow the doc

Integration

Add this snippet to the target website

 <script src="//cdn.easyviewing.co.uk/easyviewing_integration.js"></script>

Add this javascript somewhere in the body of the target website

  easyviewing_integration({
        buttonShow: document.getElementById("button"),
        organisationId: THE_ORGANISATION_ID,
        flatId: THE_FLAT_ID
  });

Dependencies

Bundled together with the library:

fullCalendar - a customizable and flexible event calendar built for the browser
moment - parse, validate, manipulate, and display dates in JavaScriptPI

Module loading

CDN

<script type="text/javascript" src="//cdn.easyviewing.co.uk/easyviewing_integration.js"></script>

Direclty span the widget (without the platform)

The module is published on NPM and can be require'd as a CommonJS, AMD or in a script tag.
npm install easyviewing-widget

// Booking.js still needs access to jquery, so make sure its available
require('jquery')
// Pull in the module, ES2015 imports also works:
// import widget from 'easyviewing-widget'
var widget = require('easyviewing-widget')
// The widget is now available as local var widget
var easyviewing_widget = new widget();
  eayviewing_widget.init({
  organisationId: organisationId,
  flatId: flatId
  });
// The widget will be mounted at #easyviewing-widget

Configuration

- `fullCalendar`

You can supply and override all the FullCalendar settings:

fullCalendar: {
  header: {
    left:       '',
    center:     '',
    right:      'today, prev, next'
  },
  views: {
    agenda: {
      displayEventEnd: false
    }
  },
  allDaySlot:   false,
  scrollTime:   '08:00:00',
  timezone:     'local',
  defaultView:  sizing.view,     // Inserted dynamically based on the current width of the widget
  height:       sizing.height,   // Inserted dynamically based on the current width of the widget
  eventClick:   function(event), // Handled internally in Booking.js (overwrite if you want to replace the booking page)
  windowResize: function(view)   // Handled internally in Booking.js (overwrite if you want to disable or change automatic resizing)
}

See below for FullCalendar language support.

- `localization`

For quick localization of time/date formats, we provide a simple "preset" setting, timeDateFormat, that sets a range of different FullCalendar and localization settings.

By default, it's set to "12-hour clock, M/D/Y date format, Sunday first day of week" (12h-mdy-sun). It can be changed to "24-hour clock, D/M/Y date format, Monday first day of week" (24h-dmy-mon).

localization: {
  showTimezoneHelper: true, // Should the timezone difference helper (bottom) be shown?
  timeDateFormat: '12h-mdy-sun', // US-style per default. For EU-style formatting, use '24h-dmy-mon'
  bookingDateFormat: 'MMMM D, YYYY', // Override the default date format on the booking page
  bookingTimeFormat: 'h:mma' // Override the default time format on the booking page
  strings: { ... } // See below
},

For full language support, FullCalendar also takes a "locale" option, accompanied by a language file. Make sure to use defer attribute on a script tag loading the language file if you are deferring booking.js, language file should be loaded after booking.js, but before initialization.

Remember to set localization.timeDateFormat to false so it doesn't override the language file's settings.

fullCalendar: {
  locale: 'de'
},
localization: {
  timeDateFormat: false
}

If you're using the widget in another language, you might want to customize the text strings used in e.g. submit button and success message. This can be done in the localization.strings key.

localization: {
  strings: { // Customize string used in the widget, defaults are shown below
    allocatedResourcePrefix: 'with',
    submitText: 'Book it',
    successMessageTitle: 'Thanks!',
    successMessageBody: 'An invitation has been sent to: <br /> %s <br /><br /> Please accept the invitation to confirm the booking.',
    timezoneHelperLoading: 'Loading..',
    timezoneHelperDifferent: 'Your timezone is %s hours %s of %s (calendar shown in your local time)',
    timezoneHelperSame: 'You are in the same timezone as %s'
  }
}

Methods

After you instantiated the widget, you can control it with the following methods:

var widget = new widget();
widget.init(config);          // Initializes the widget with the given config
widget.render();              // Re-renders the widget with it's instance config
widget.setConfig(config);     // Push a new config into it (call render() afterwards)
widget.getConfig();           // Returns the current config
widget.destroy();             // Cleans the DOM element and empty config
widget.fullCalendar(action);  // Direct access to FullCalendar's own method (for advanced use)