Change timezone doesn't affect recurring event start/end time.

[bbagdad]

Hi,

I am using fullcalendar with angular, with "timeGridWeek", I have recurring events that contain starttime and endtime as Duration Parsable strings.
the bug is when I change the timezone these events doesn't update in the view. they stay on the same timeslot they where at.

I've tried to recreate it on codepen.. but not with Angular on the below link.
https://codepen.io/bbagdad/pen/bGdgRza?editors=0010

[acerix]

Please refer to the support page and use Stack Overflow for help.

The timezone setting only updates event positions if the events are provided by a server and the server does converts the times according to that param. You need a plugin to do that on the client side:

https://fullcalendar.io/docs/timeZone#with-a-timezone-plugin

[bbagdad]

I used the moment timezone plugin for that matter, and it still didn't work. the problem only occurs on the recurring events, that are expanded by the calendar library. it works normally on the other ones.

I updated it to be exactly as my issue on this stackblitz url :
https://stackblitz.com/edit/angular-fullcalendar-timezone

[acerix]

Thanks for the demo, I can see the timezone plugin is not working for recurring events.

I also confirmed the issue in the debug template and the same happens with rrule.

https://codepen.io/acerix/pen/VwLpEWX?editors=0010 (Changing the timezone should also move the recurring events)

[danaki]

timeZone parameter is still ignored

[adenta]

@danaki have you found a workaround? I really don't want to have to rebuild the RRULE string client-side

[danaki]

@danaki have you found a workaround? I really don't want to have to rebuild the RRULE string client-side

Yes, my workaround is to do everything on backend, not relying on calendar tomezone handling. Moment just for string formatting.

[adenta]

Like, doing everything on the backend is impossible, no?

On the back-end, I don't know what timezone the user is in. if I send over '1500' to fullcalendar, the event will always be at 3PM, no matter what timezone the user is in.

How can you do everything on the backend, are you tracking the users timezone there?

[danaki]

Full callendar sends the timeone when it requests for events so it can be handled on the backend.

[meness]

I have the same issue with RRule plugin. timeZone will be applied perfectly without that plugin. I work with UTC datetimes, but the calendar doesn't apply given timeZone.

[jusfeel]

@danaki have you found a workaround? I really don't want to have to rebuild the RRULE string client-side

Yes, my workaround is to do everything on backend, not relying on calendar tomezone handling. Moment just for string formatting.

Hi, using the backend, the time can be formatted. but there is this "UTC" string auto-attached by calendar. How did you handle it? How to remove it? Or better , show the correct time zone but startTime/endTime can have time zone?

[zalharash]

Same issue here, I am trying to enforce timezone despite the client browser's timezone, but timeZone option same to be broken and it does nothing, I tried with @fullcalendar/moment-timezone and without it.

Language: React
Release: "@fullcalendar/react": "^5.3.1"

[gustavogr]

Hi! Dropping a comment here as I just stumbled with the same problem. We are using Luxon + RRule plugins to handle recurrent events in different timezones.

Is there any clue on where is the problem?

RRule has support for timezone handling. Wouldn't it be possible to delegate the timezone resolution to RRule when present?

I'm sorry if the questions are way off, I'm just trying to understand the scale of the issue to work on possible solutions.

[OliverBalfour]

We have a monkey patch which seems to work. We're pretty sure it works around daylight savings changeover boundaries and other special cases but haven't tested exhaustively

After importing and before using rrulePlugin add this:

// Monkey patch rrulePlugin for FullCalendar to fix https://github.com/fullcalendar/fullcalendar/issues/5273
// (Recurring events don't respect timezones in FullCalendar)
// We simply replace the expand function here: https://github.com/fullcalendar/fullcalendar/blob/ede23c4b2bf0ee0bb2cbe4694b3e899a09d14da6/packages/rrule/src/main.ts#L36-L56
// With a custom version below
rrulePlugin.recurringTypes[0].expand = function (errd, fr, de) {
  return errd.rruleSet.between(
    fr.start,
    fr.end,
    true, // inclusive (will give extra events at start, see https://github.com/jakubroztocil/rrule/issues/84)
  ).map(date => new Date(de.createMarker(date).getTime() + date.getTimezoneOffset() * 60 * 1000))
}

In our case with the React fullcalendar component and Luxon + RRule plugins we can then set the timeZone prop on <FullCalendar /> to a string like Australia/Sydney and it works as expected

(Snippet is under the MIT license, use how you like)

[pl4nty]

+1, I wasn't sure whether returning a date vs createMarker would break anything, but seems fine so far

[Jorgen-VikingGod]

I have the same issue. rrule + moment-timezone plugin
f.e.

rrule: {
  byweekday: ['th']
  dtstart: "2022-04-14T01:20:00+02:00"
  freq: "weekly"
  interval: 1
},
duration: "01:40"

My fullcalendar uses timeZone: "local" to show the entries in local time of browser.
All entries are saved as ISO format with UTC-Offset (like above)

Error case is:
in Germany it should show the entry on Thursday every week on 1:40 AM, but it is shown on Friday at 1:40 AM.
As soon I change the entry to

rrule: {
  byweekday: ['th']
  dtstart: "2022-04-14T02:20:00+02:00"
  freq: "weekly"
  interval: 1
},
duration: "01:40"

It is shown correctly on Thursday at 2:20 AM.

So I think the issue is, that the timezone UTC offset calculation was done wrong - so in the case of 1:40+02:00 it will land on Wednesday in UTC time, so it will correct it later on by one day, but the calendar then shows it on Friday...

I adapted an exiusting codepen example with two entries, one on 1:30 the other one on 2:30 to show the issue:
https://codesandbox.io/s/black-meadow-tvy9vi

  {
    id: createEventId(),
    title: "rrule",
    rrule: {
      byweekday: ["th"],
      dtstart: "2022-04-14T02:30:00+02:00",
      freq: "weekly",
      interval: 1
    },
    duration: "01:00"
  },
  {
    id: createEventId(),
    title: "rrule 2",
    rrule: {
      byweekday: ["th"],
      dtstart: "2022-04-14T01:30:00+02:00",
      freq: "weekly",
      interval: 1
    },
    duration: "01:00"
  }

[jgalb]

We have a monkey patch which seems to work. We're pretty sure it works around daylight savings changeover boundaries and other special cases but haven't tested exhaustively

After importing and before using rrulePlugin add this:

// Monkey patch rrulePlugin for FullCalendar to fix https://github.com/fullcalendar/fullcalendar/issues/5273
// (Recurring events don't respect timezones in FullCalendar)
// We simply replace the expand function here: https://github.com/fullcalendar/fullcalendar/blob/ede23c4b2bf0ee0bb2cbe4694b3e899a09d14da6/packages/rrule/src/main.ts#L36-L56
// With a custom version below
rrulePlugin.recurringTypes[0].expand = function (errd, fr, de) {
  return errd.rruleSet.between(
    fr.start,
    fr.end,
    true, // inclusive (will give extra events at start, see https://github.com/jakubroztocil/rrule/issues/84)
  ).map(date => new Date(de.createMarker(date).getTime() + date.getTimezoneOffset() * 60 * 1000))
}

In our case with the React fullcalendar component and Luxon + RRule plugins we can then set the timeZone prop on <FullCalendar /> to a string like Australia/Sydney and it works as expected

(Snippet is under the MIT license, use how you like)

This wasn't exactly what I needed particularly, but, you did point me in the right direction of getting daylight savings errors solved. Thank you so much.

My fix looks like this :

rrulePlugin.recurringTypes[0].expand = function (errd, fr, de) {
  const hours = errd.rruleSet._dtstart.getHours();
  return errd.rruleSet.between(de.toDate(fr.start), de.toDate(fr.end), true).map((d) => {
    return new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), hours, d.getMinutes()));
  });
};

It takes the hours from the dtstart option and uses that for all other dates within the rrule.

[arshaw]

This has been fixed in v6.1.6

Updated repro:
https://codepen.io/arshaw/pen/RweKOEp?editors=0010
(timed events will shift when timezone changed)

[tedroden]

This has been fixed in v6.1.6

Updated repro: https://codepen.io/arshaw/pen/RweKOEp?editors=0010 (timed events will shift when timezone changed)
This has been fixed in v6.1.6

Updated repro: https://codepen.io/arshaw/pen/RweKOEp?editors=0010 (timed events will shift when timezone changed)

This bug that the OP mentioned affects recurring events. The linked codepen does not include any recurring events.

For other readers, the monkeypatch by @OliverBalfour seems to work.

[arshaw]

@tedroden, this should be fixed for recurring event as well. Sorry i forgot to update the repro. This updated repro proves it: https://codepen.io/arshaw/pen/RweKOEp?editors=0010

could it be that you don't have a timezone plugin ?

[tcjens]

@arshaw - In your pen, it appears that this is still not working.

Am I doing something incorrectly? I didn't modify the pen and the times were still reverting to original timezone when navigating.

Thank you.

[arshaw]

@tcjens, you're right, the bug is still present after navigating dates.

Updated repro with latest fc:
https://codepen.io/arshaw/pen/yLWmvwm?editors=0010

I'll get this fixed for the next bugfix release.

[prabhuraj-dev]

@arshaw any timeline regarding when we can expect the next bugfix?