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.

See a list of all available timezones here.

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?