All Collections
Booking Widget (booking.js)
Customizing the Booking Widget
Forcing a specific timezone in the booking widget
Forcing a specific timezone in the booking widget

The booking widget automatically shows timeslots in the visitor's local timezone. Here's how to change that

d
Written by derrick mak
Updated over a week ago

Start by reading this introduction article on how to make booking widget customizations. Once you feel comfortable making config code changes, you can continue here.

Sometimes, automagic behaviour is a little too... well.. magical. For instance, if you want to show bookable timeslots to visitors on your website, people from abroad with more than 9 hours of timezone difference can potentially see open timeslots during the night because your business hours are skewed from theirs. Although this might be technically correct, it might be beneficial to simply show the time slots in your local time and explain it by text instead.

In short, here's how:

ui: {
  timezone: 'America/Los_Angeles'
}

This forces the calendar rendering to convert the timeslots to Los Angeles local time instead of guessing the visitors' browser timezone.

The entire list of supported timezones we use is the timezone database 2021.5 https://github.com/tzinfo/tzinfo-data/releases which is also listed here https://www.php.net/manual/en/timezones.php

You can even hide the timezone helper in the footer if you don't want to allow your customers to change their timezone. Here's how:

ui: {
  timezone: 'America/Los_Angeles',
  show_timezone_helper: false
}

Note: this setting is not supported in Projects so you can't save the values remotely in our system. Instead, you have to add it to your widget configuration client-side.

Did this answer your question?