I spend a lot of time with React, these days, converting a rather large AngularJs application from the inside out. Our app deals extensively with date/time, and has to be able to do so within the context of changing timezones.

We chose to use React-Big-Calendar because it checked off all the boxes: configurability, skinnable, flexible, customizable. Need an 'event' to look different based on it's data? No problem. Need external view state control? No problem.

But the one thing it doesn't do, out of the box, is handle timezones. It's not that it can't, it's just that the authors of the component believe that this is the purview of the developer. And, since the developer can control which date localization library they wish to use, that handling can be different for each one.

We use MomentJs along with Moment-Timezone as our date localization library-of-choice. And, since we required the ability to have a timezone specific display of RBC, I was tasked with researching and finding a solution to making that happen.

One of the great things, about working with React, is that extending an existing component is relatively simple. I can write a component that wraps RBC, as a base, to add my own custom properties and functionality. Now, I can go into a long post, showing you a ton of code of how to do this, but I thought it would be better to just provide the example for you to work with, and a GitHub repository to grab the code. Now, you can't just import this into your project (figured you might want to customize this for you), but I put it out there as an example for you and your project. Here's a CodeSandbox to see it in action.