nowIndicator is not updated when the timeZone changes

[dbanisimov]

I'm trying to achieve nowIndicator displaying the correct current time when the timeZone changes. Luxon plugin is used to work with named timezones.

Naive approach of just updating the timezone prop does nothing. Neither trying to update the now property with the ISO string of the current time in the new timezone. Judging by the code, and as I've seen in some other discussion here now property is not changeable at all currently.

It would be great if nowIndicator was timezone-aware.

Repro code here: https://codesandbox.io/s/zen-brook-4gtll?file=/src/DemoApp.jsx

[close-issue-app]

This issue was closed because it does not fulfill the issue template (for example, if it had no reduced test case). Please create a new issue and follow the instructions more carefully. If this is a question, please visit the StackOverflow fullcalendar tag.

[acerix]

Thanks, confirmed. I transferred the issue since it's not specific to React:

https://codepen.io/acerix/pen/VwabvVL?editors=001

[ehahn9]

Does anyone have a workaround? I too have tried manually updating now, fn or Date), nowIndicator, etc. Once set initially, seems to be no way to move the now indicator based on the timezone. Pretty much makes nowIndicator unusable for tz-aware applications?

[thaoula]

Hi @acerix,

Do you know of any workaround to manually force the now indicator to redraw as work around?

Also, is there a fix for this issue planned?

Regards,
Tarek

[rptmat57]

I was able to get around it somewhat, by using:

"now": function (){ return new Date().toLocaleString("en-US", {timeZone: "America/New_York"})},

however, I am getting a warning that I'd like to avoid:
moment.js:724 Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.

if anyone has any idea on how to remove it, I'd appreciate it

[brandonwestcott]

@acerix / @arshaw any suggestions here? The only hack we've found is to fully re-render the entire FullCalendar component, which is terrible UX.

[HamedSaidi]

Hello @acerix / @arshaw, do you know when we should expect a fix for this issue?

[ennostubler]

Hey, i am facing the same Problem as:

"now": function (){ return new Date().toLocaleString("en-US", {timeZone: "America/New_York"})},

is only working initially and not dynamically. Rerendering the whole Calendar especially within the resourceTimeline view is not good since we have a lot of events to render.

@acerix / @arshaw is there a renderNowIndicator() function in the newer versions, like described here? #3628 (comment)

Regards

Enno

[aliakseikulba]

@brandonwestcott Now I have the same issue and see only this solution, but can't rerender calendar with existing methods. what is your solution despite the heavy rerender?

[brandonwestcott]

@brandonwestcott Now I have the same issue and see only this solution, but can't rerender calendar with existing methods. what is your solution despite the heavy rerender?

We create a new luxon DateTime object on time zone change, which triggers:

useEffect(() => {
    const cal = calendar()
    if (!cal) return
    cal.setOption('timeZone', selectedDate.zoneName)
    cal.gotoDate(selectedDate.toMillis())
}, [selectedDate])

[aliakseikulba]

@brandonwestcott unfortunately doesn't work for me. nowIndicator doesn't change its position, but 'now' value is changed

[andreymakaroff]

@aliakseikulba I have just added as a key={timezone} to FullCalendar component

[acerix]

For reference, an demo of the workaround with now function and re-rendering: https://codepen.io/acerix/pen/abXJXOv?editors=0010 (reported in https://fullcalendar.freshdesk.com/a/tickets/7435)