DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Scheduler - Time Zone Support

The Scheduler allows its users to view appointments in different time zones. Set the timeZone property to specify the current time zone. This property accepts values from the IANA time zone database.

In this demo, you can use the drop-down menu above the Scheduler to choose between the London, Berlin, and Helsinki time zones. To populate the menu, the getTimeZones utility method is used. It returns a list of all IANA time zones that is then filtered.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

Users can edit the time zones of individual appointments in the appointment details form. To enable this functionality, set the editing.allowTimeZoneEditing property to true. Information about individual time zones is saved in the startDateTimeZone and endDateTimeZone fields of the appointment data objects.