Timezone problems. Moves everything over a day

[ghostit-dev]

Do you want to request a feature or report a bug?

Code for screenshot(13)
//moment.tz.setDefault("America/Vancouver"); console.log(moment().format()); BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

Code for screenshot(14)
moment.tz.setDefault("America/Vancouver"); console.log(moment().format()); BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

You can see that the current date in the calendar moves over to the 16th when it is in fact the 17th in both timezones. You can see that I am console logging the moment date out. Does anyone have any ideas on how to fix this?

What's the current behavior?

You can see the error clearly in this sandbox:
https://codesandbox.io/s/m34q6xw6lx

It shifts all of the days over by one. Saying the current date is one less than the real current date.
Line 7 in the sandbox makes this occur, for some reason setting the moment timezone shifts all the days over by 1.

What's the expected behavior?

The expected behavior would be to display the correct dates, instead of moving everything over a day.

[thienlhh]

I have the same problem when setting the timezone that behind the local timezone

[ghostit-dev]

@jquense Hi there, do you know of any way to fix this? If not could you point me in the right direction to try myself and then I will make a push request.

[HartiganHM]

@ghostit-dev @thienlhh I've been working on this issue for a while now and have a few things I can add that might help fix (some) of the issues.

First and foremost, the largest problem with timezone lies in the fact that, when converting to JS Dates (which react-big-calendar requires) it uses the timezone of your machine. Setting a time zone with moment and then converting to a JS Date will ignore the set time zone.

My current workaround for events has been to pass strings to my component that houses BigCalendar and convert those to JS Dates (ie moment('2018-04-21 15:30:00').toDate()). The time zone of the JS Date will be incorrect, but the date/time will be accurate.

For setting the highlighted date of 'Today', it's best to use the defaultDate prop for react-big-calendar. This isn't documented anywhere, which is a problem, but I found it in a past issue. However, it's best to use a string here as well for the time you're trying to set (also not convenient, but it works). For us, we have it set up as a prop in local state. It looks something like this:

class CalendarWrapper extends Component {
  state = {
    today: null
  }

  comonentDidMount() {
    const { todayString } = this.props

    this.setState({ today: moment(todayString).toDate() })
  }


  render() {
    const { today } = this.state

    return (
      <BigCalendar
        defaultDate={today}
      />
    )
  }
}

There's also a getNow prop you can use that is a function that returns a JS Date (mostly used for placing the time indicator). This is, unfortunately, another prop that isn't documented in the react-big-calendar examples page. It also only works up to a point. If you're a day ahead or behind, it will place on either tomorrow or yesterday respectively due to the today() method in the dates utilities, which uses new Date() to determine what the current date is.

I'm about to open an issue for this to see if anyone has a solution, though, admittedly, if timezone capabilities were added, none of this would require a workaround. I know this may not answer your question specifically, but maybe it can shed some light on how to solve some of the time zone issues.

[arecvlohe]

Timezone support is a known issue but we need support if we are going to fix it. #118

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[joarhal]

Does anyone know a fix for this problem?

[KenneyE]

I am also currently running into this problem. We show class schedules for a gym in the gym's timezone. When the user is in a timezone ahead of the gym's, it offsets the entire calendar by 1 day and starts the day at 10pm instead of midnight in the case of the user's timezone being ahead by 2 hours.

It also starts the week on Saturday instead of Sunday.

Correct:

Incorrect: (User 2 Hours Ahead)

I've reviewed all other timezone issues in react-big-calendar and nothing has resolved this issue...

I think this deserves being re-opened.

[goktugerce]

I have the same issue. My local time is CET and timezones work correctly if I set it to Tokyo, for example. But not for USA timezones.

@KenneyE were you able to find a workaround for this problem?

[KenneyE]

@goktugerce I didn't. We actually ended up displaying everything in the user's local timezone to not have to deal with this.

We added a notice above the calendar that detected if the user was in a different tz than the facility, and let them know which tz the events are being displayed in, and that it isn't the same as the facility.

[goktugerce]

I found a simple workaround for this, but it only works for display purposes. We are not doing any actions from the calendar apart from showing the events.

// Find the difference of hours between your local timezone and the requested timezone.
const gymOffset = moment.tz(gym.timezone).utcOffset();
const localOffset = moment().utcOffset();
const offsetHours = (gymOffset - localOffset) / 60;

// Change props startAccessor and endAccessor accordingly
<BigCalendar
   ...
   startAccessor={(event) => moment(event.from).clone().add(offsetHours, 'hours').toDate()}
   endAccessor={(event) => moment(event.to).clone().add(offsetHours, 'hours').toDate()}
/>

No need to do anything specific for the localizer, just use your local one without setting the default timezone for moment.

[NomiIqbal]

@goktugerce you are life savior. Thank you