Start by reading this introduction article on how to make 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:

fullCalendar: {
  timezone: 'America/Chicago'

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

See a list of all available timezones here.

For UTC, you can do this:

fullCalendar: {
  timezone: 'UTC'

You might want to consider disabling the Timezone Helper bar that pops up at the bottom of the widget to avoid confusion:

localization: {
  showTimezoneHelper: true

Our project widget uses FullCalendar, a javascript library, behind the scenes. Here's the relevant docs on this topic. And here's an interactive demo where you can see the difference in rendering.

Did this answer your question?