Time zone in Flutter Event Calendar (SfCalendar)

3 Apr 20246 minutes to read

Flutter Calendar allows you to create appointments in various time zones and display them in users’ time zone or any other time zone. You can use a time zone in the following four different ways:

  • Create appointments in different time zones.
  • Display appointments based on the client’s time zone.
  • Display appointments based on calendar time zone.
  • Display appointments at the same time everywhere regardless of client’s time zone.

We have added the following Time Zone’s for the respective countries to cover all the time zone regions, you can use any of the time zones from the following list for calendar time zone.

Time Zone Region UTC Offset
Samoa Standard Time Pacific/Apia UTC - 13:00
Dateline Standard Time Etc/GMT+12 UTC - 12:00
UTC-11 Pacific/Midway UTC - 11:00
Hawaiian Standard Time Pacific/Honolulu UTC - 10:00
Alaskan Standard Time America/Anchorage UTC - 09:00
Pacific Standard Time America/Los_Angeles UTC - 08:00
Pacific Standard Time (Mexico) America/Santa_Isabel UTC - 08:00
Mountain Standard Time America/Denver UTC - 07:00
Mountain Standard Time (Mexico) America/Chihuahua UTC - 07:00
US Mountain Standard Time America/Phoenix UTC - 07:00
Canada Central Standard Time America/Regina UTC - 06:00
Central America Standard Time America/Guatemala UTC - 06:00
Central Standard Time America/Chicago UTC - 06:00
Eastern Standard Time America/New_York UTC - 05:00
SA Pacific Standard Time America/Bogota UTC - 05:00
US Eastern Standard Time America/Indianapolis UTC - 05:00
Venezuela Standard Time America/Caracas UTC - 04:30
Atlantic Standard Time America/Halifax UTC - 04:00
Central Brazilian Standard Time America/Cuiaba UTC - 04:00
Pacific SA Standard Time America/Santiago UTC - 04:00
Paraguay Standard Time America/Asuncion UTC - 04:00
SA Western Standard Time America/La_Paz UTC - 04:00
Newfoundland Standard Time America/St_Johns UTC - 03:30
Bahia Standard Time America/Bahia UTC - 03:00
Argentina Standard Time America/Buenos_Aires UTC - 03:00
E. South America Standard Time America/Sao_Paulo UTC - 03:00
Greenland Standard Time America/Godthab UTC - 03:00
Montevideo Standard Time America/Montevideo UTC - 03:00
SA Eastern Standard Time America/Cayenne UTC - 03:00
UTC-02 America/Noronha UTC - 02:00
Azores Standard Time Atlantic/Azores UTC - 01:00
Cape Verde Standard Time Atlantic/Cape_Verde UTC - 01:00
GMT Standard Time Europe/London UTC
Greenwich Standard Time Atlantic/Reykjavik UTC
Morocco Standard Time Africa/Casablanca UTC
UTC America/Danmarkshavn UTC
Central Europe Standard Time Europe/Budapest UTC + 01:00
Central European Standard Time Europe/Warsaw UTC + 01:00
Namibia Standard Time Africa/Windhoek UTC + 01:00
Romance Standard Time Europe/Paris UTC + 01:00
W. Central Africa Standard Time Africa/Lagos UTC + 01:00
W. Europe Standard Time Europe/Berlin UTC + 01:00
Egypt Standard Time Africa/Cairo UTC + 02:00
FLE Standard Time Europe/Kiev UTC + 02:00
GTB Standard Time Europe/Bucharest UTC + 02:00
Israel Standard Time Asia/Jerusalem UTC + 02:00
Libya Standard Time Africa/Tripoli UTC + 02:00
Middle East Standard Time Asia/Beirut UTC + 02:00
South Africa Standard Time Africa/Johannesburg UTC + 02:00
Syria Standard Time Asia/Damascus UTC + 02:00
Turkey Standard Time Europe/Istanbul UTC + 02:00
Arab Standard Time Asia/Riyadh UTC + 03:00
Arabic Standard Time Asia/Baghdad UTC + 03:00
Belarus Standard Time Europe/Minsk UTC + 03:00
E. Africa Standard Time Africa/Nairobi UTC + 03:00
Jordan Standard Time Asia/Amman UTC + 03:00
Kaliningrad Standard Time Europe/Kaliningrad UTC + 03:00
Iran Standard Time Asia/Tehran UTC + 03:30
Arabian Standard Time Etc/GMT-4 UTC + 04:00
Azerbaijan Standard Time Asia/Baku UTC + 04:00
Caucasus Standard Time Asia/Yerevan UTC + 04:00
Georgian Standard Time Asia/Tbilisi UTC + 04:00
Mauritius Standard Time Indian/Mauritius UTC + 04:00
Russia Time Zone 3 Europe/Samara UTC + 04:00
Russian Standard Time Europe/Moscow UTC + 04:00
Afghanistan Standard Time Asia/Kabul UTC + 04:30
Pakistan Standard Time Asia/Karachi UTC + 05:00
West Asia Standard Time Asia/Tashkent UTC + 05:00
India Standard Time Asia/Calcutta UTC + 05:30
Sri Lanka Standard Time Asia/Colombo UTC + 05:30
Nepal Standard Time Asia/Kathmandu UTC + 05:45
Bangladesh Standard Time Asia/Dhaka UTC + 06:00
Central Asia Standard Time Asia/Almaty UTC + 06:00
Ekaterinburg Standard Time Asia/Yekaterinburg UTC + 06:00
Myanmar Standard Time Asia/Rangoon UTC + 06:30
SE Asia Standard Time Asia/Bangkok UTC + 07:00
N. Central Asia Standard Time Asia/Novosibirsk UTC + 07:00
China Standard Time Asia/Shanghai UTC + 08:00
North Asia Standard Time Asia/Krasnoyarsk UTC + 08:00
Singapore Standard Time Asia/Singapore UTC + 08:00
Taipei Standard Time Asia/Taipei UTC + 08:00
Ulaanbaatar Standard Time Asia/Ulaanbaatar UTC + 08:00
W. Australia Standard Time Australia/Perth UTC + 08:00
Korea Standard Time Asia/Seoul UTC + 09:00
North Asia East Standard Time Asia/Irkutsk UTC + 09:00
Tokyo Standard Time Asia/Tokyo UTC + 09:00
AUS Central Standard Time Australia/Darwin UTC + 09:30
Cen. Australia Standard Time Australia/Adelaide UTC + 09:30
AUS Eastern Standard Time Australia/Sydney UTC + 10:00
E. Australia Standard Time Australia/Brisbane UTC + 10:00
Tasmania Standard Time Australia/Hobart UTC + 10:00
West Pacific Standard Time Pacific/Port Moresby UTC + 10:00
Yakutsk Standard Time Asia/Yakutsk UTC + 10:00
Central Pacific Standard Time Pacific/Guadalcanal UTC + 11:00
Russia Time Zone 10 Asia/Srednekolymsk UTC + 11:00
Vladivostok Standard Time Asia/Vladivostok UTC + 10:00
Fiji Standard Time Pacific/Fiji UTC + 12:00
Magadan Standard Time Asia/Magadan UTC + 12:00
New Zealand Standard Time Pacific/Auckland UTC + 12:00
Russia Time Zone 11 Asia/Kamchatka UTC + 12:00
UTC+12 Pacific/Tarawa UTC + 12:00
Tonga Standard Time Pacific/Tongatapu UTC + 13:00
Line Islands Standard Time Pacific/Kiritimati UTC + 14:00

Create appointment in different time zones

You can create appointments at different time zones using the startTimeZone and endTimeZone properties of Appointment. An appointment’s start time and end time are calculated based on the given time zone information for the start time and end time. You can set different time zones to the startTimeZone and endTimeZone properties.
You can use the startTime and endTime properties of Appointment to get the exact start time and end time of an appointment.

List<Appointment> appointments = <Appointment>[];

appointments.add(Appointment(
	startTime: DateTime(2019, 12, 16, 10),
	endTime: DateTime(2019, 12, 16, 12),
	subject: 'Meeting',
	startTimeZone: 'India Standard Time',
	endTimeZone: 'India Standard Time',
	color: Colors.blue));

NOTE

  • If the recurring appointment is converted to another time zone, then the whole sequence will be recalculated according to the new time zone information.
  • If you create an all-day appointment, its start time and end time will be set to 12 A.M. and 12 A.M. by default, so time zone is not applicable for all-day appointments.
  • Calendar supports daylight saving time.
  • The time zone support is applicable for custom appointments too, so you need to map the corresponding property.
  • You can use TimeZone for custom appointments by mapping the startTimeZoneMapper and endTimeZoneMapper custom properties of CalendarDataSource.

Display appointment based on client’s time zone

You can display the appointments based on the client’s local time zone in calendar. For example, consider a scenario that you are in North Carolina and you want to set up a meeting at 10 A.M. on North Carolina time. You have colleagues in London and Chennai, and they also need to participate. The time for this meeting will be 3 P.M. (15:00) in London and 5.30 A.M. in Chennai. When you each view your calendar, you need to see the appointment displayed relative to your local time zones 5.30 A.M., 10 A.M., and 3 P.M., respectively. It can be achieved by setting calendar time zone to default (it will consider your device’s local time zone as calendar time zone) and appointment’s time zone to Eastern Standard Time (North Carolina) [as you are in North Carolina and its time zone is Eastern Standard Time].

Display appointments based on calendar time zone

You can set specific time zone to calendar using the timeZone property of calendar. On this scenario, the appointments will be displayed in UTC time when the startTimeZone and endTimeZone properties of Appointment are set to null. The appointments will be displayed in UTC time based on the given calendar time zone.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        child: SfCalendar(
          view: CalendarView.week,
          timeZone: 'Central America Standard Time',
        ),
      ),
    ),
  );
}

Display appointments at same time everywhere regardless of client’s time zone

You can display appointments at the same time everywhere without considering the time zone when you set the timeZone property of calendar, the startTimeZone and endTimeZone properties of Appointment to null. The appointments will be displayed based on the given startTime and endTime of appointment everywhere without considering the time zone.