4

I have a simple system, which on node creation form, allows user to select start and end dates along with hours and minutes:

The problem is that the date gets messed up somewhere in the middle, or I don't know how to convert it.

In the database, two values gets saved as follows:

start: "2019-08-01T14:00:00.000Z"
end: "2019-08-01T16:00:00.000Z"

Seems correct, as in the datepicker I chose 2pm and 4pm. Then, using momentjs and react-big-calendar, I try to put that event into calendar. It seems that it puts +3 hours every time. I assume, it is because it saves it in UTC format, and I live in Eastern Europe, which is +3 hours from UTC.

enter image description here

What is strange, is that I already get back time converted to my own when I make a request to the database:

enter image description here

Thu Aug 01 2019 17:00:00 GMT+0300 (Eastern European Summer Time)

Could someone help me out? I would expect to have the same hours returned and displayed, as I save them, meaning if I select 2pm, it should be 2pm. I think the solution here would be to ignore timezones, and always display everything in UTC? But how to do that? I have access to momentjs if that helps. I tried something like this:

moment.utc(event.start);

But it still returns the same value, which is:

Thu Aug 01 2019 17:00:00 GMT+0300 (Eastern European Summer Time)
Kelb56
  • 587
  • 3
  • 8
  • 21
  • Perhaps your database in configured in UTC+3 time? Which database are you using and can you try changing the database configuration to run in UTC? (is that important to you?) – caladeve Aug 15 '19 at 22:03
  • Have you tried `moment.utc().zone(3).format() ` or `moment().format()` – jad Sep 23 '19 at 15:13

1 Answers1

4

When you setup React-Big-Calendar, you define a localizer. By default, the calendar will display in the local timezone of the browser the user is using. Any and all dates given to the calendar will be converted to that local timezone. If your dates, coming from the db, use an offset of +5, but you're sitting in +3, it will automatically convert those times to display +3 (part of the beauty of UTC).

This is where it can get tricky. Say I want to get all values from my db between Sep 19th and Sep 21st. I have to remember those offsets when requesting data from the system. I could use moment and say moment('2019-09-19').startOf('day'), and it would give me 2019-09-19T00:00:00Z, but this isn't exactly correct for me, as I'm at an offset of -5, which means I actually needed 2019-09-18T19:00:00Z to get the start of my day. The same holds true for my end datetime, where I would say moment('2019-09-21').endOf('day') and it would give me 2019-09-21T23:59:59Z, when I would need 2019-09-21T18:59:59Z.

Now, I'm not positive of this (you'll have to do some testing), but if you use moment-timezone instead of moment it may handle all of this for you. You'll have to play around to know for sure.

FINAL EDIT: I worked out timezone handling with moment-timezone as my localizer. I put the entire thing in a GitHub project, as well as creating a CodeSandbox where people can play with it.

TRULY FINAL EDIT: The (0.36.0) latest version of RBC has full timezone support now, when using either the momentLocalizer or the new luxonLocalizer. Doc site isn't up to date yet, but if you run the 'examples' locally you'll find all the info.

Steve -Cutter- Blades
  • 5,057
  • 2
  • 26
  • 40
  • Thanks for the CodeSandbox example, this save my day! – Albert Hidalgo Feb 04 '21 at 15:06
  • @AlbertHidalgo you should know that there are still issues, in that example, depending on the time range you show in 'time' views and what your offset is. There's no real answer yet, (see Issue https://github.com/jquense/react-big-calendar/issues/1478), but hopefully we can eventually get full support from RBC. – Steve -Cutter- Blades Feb 04 '21 at 16:50
  • For what I need this works for me, I just need a boost of where to start. – Albert Hidalgo Feb 05 '21 at 13:43