You can refer to v2 advance configuration for advanced option: V2 Advanced Configurations.

BookingJS v3 contains some breaking changes follow document below to upgrade your existing code. Following are some of the breaking changes you have to consider when upgrading from v2 to v3.

Full Calendar

We have upgraded full calendar to v5.

The Booking Widget is built on top of Full Calendar. Setting a fullcalendar configuration will allow you to override all the internal FullCalendar settings.

Below is an example of us changing a few things:

fullcalendar: {
  headerToolbar: {
    left:   '',
    center: '',
    right:  'today, prev, next'
  },
  views: {
    agenda: {
      displayEventEnd: false
    }
  },
  allDaySlot:   false,
  scrollTime:   '08:00:00',
  initialView:  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)
}

Callbacks

Followings are some of the callbacks no longer exists in v3.

callbacks: {
  getUserTimezoneStarted:      function(args) {},
  getUserTimezoneSuccessful:   function(response) {},
  getUserTimezoneFailed:       function(response) {}
}

Methods

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

const widget = new TimekitBooking();

widget.getVersion();          // Shows you current version of widget
widget.init(config);          // Initializes the widget with the given config
widget.getConfig().all();     // Returns the current config
widget.getConfig.set(config); // Push a new config into it (call render() afterwards)
widget.destroy();             // Cleans the DOM element and empty config
widget.render();              // Re-renders the widget with it's instance config
widget.getCalendar();         // Direct access to FullCalendar's own method (for advanced use)

Advanced Example

Following code can help you understand how you can use different configurations using bookingJS. Adjust configurations to adjust your need.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Booking.js autoload example</title>
  <link rel="shortcut icon" href="/favicon.png">
  <link rel="stylesheet" href="https://cdn.timekit.io/booking-js/v3/booking.min.css" />
  <style type="text/css">
    body { background-color: #E6E6E6; max-width: 700px; margin: 0 auto; }
  </style>
 </head>
 <body>
  <div id="bookingjs"></div>
  <script type="text/javascript" src="https://cdn.timekit.io/booking-js/v3/booking.min.js"></script>
  <script type="text/javascript">
    const widget = new TimekitBooking();
    widget.init({
      app_key: 'test_widget_key_9hRBjTw2yphubH2bYiNDaiE4awc6zlpC',
      resources: ['6ed66588-b3a9-4124-90d0-235c542b2f22'],
      ui: {
        availability_view: 'agendaWeek',
        time_date_format: '12h-mdy-sun',
        display_name: 'Martys Timetravel Service',
        avatar: 'http://via.placeholder.com/100x100',
        localization: {
          submit_button: 'Book it now!',
          allocated_resource_prefix: 'for',
          success_message: 'Thanks for booking!'
        }
      },      
      availability: {
        length: '30 minutes'
      },
      disable_confirm_page: true,
      callbacks: {
        clickTimeslot: function (timeslot) {
          const customer = {
            name: 'Marty',
            email: '[email protected]'
          }
          widget.timekitCreateBooking(customer, timeslot)
            .then(function () {
              console.log('Success, booking created!');
            });
        }
      },      
      customer_fields: {
        name: {
          title: 'Full name',
          prefilled: false,
          readonly: false
        },
        email: {
          title: 'E-mail',
          prefilled: '[email protected]',
          readonly: true
        },
        comment: {
          title: 'Comment',
          prefilled: false,
          required: true,
          readonly: false,
          format: 'textarea'
        },
        phone: {
          title: 'Phone number',
          prefilled: false,
          required: false,
          readonly: false,
          format: 'tel'
        }
      }
    });
  </script>
</body>
</html>