👀 Views: 40 💬 Answers: 1 📅 Created: 2025-06-14

react fullcalendar datetime timezone JavaScript

I'm following best practices but I've been struggling with this for a few days now and could really use some help. I'm not sure how to approach I've been struggling with this for a few days now and could really use some help..... I'm working with an scenario when trying to integrate a `DateTimePicker` from `react-datetime` with `FullCalendar` in my React application. The question arises when I select a date and time using the `DateTimePicker`, it seems to be storing the time in the local timezone, while `FullCalendar` expects the date to be in UTC. Here's a snippet of what I've tried: ```javascript import React, { useState } from 'react'; import Datetime from 'react-datetime'; import { Calendar } from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; const MyComponent = () => { const [eventDate, setEventDate] = useState(null); const handleDateChange = (date) => { // I'm trying to convert the date to UTC before setting it const utcDate = new Date(date.utc().format()); setEventDate(utcDate); }; const handleSubmit = () => { // Here I log the event date before sending it to FullCalendar console.log('Submitting event date:', eventDate); }; return ( <div> <Datetime onChange={handleDateChange} /> <button onClick={handleSubmit}>Submit</button> <Calendar plugins={[dayGridPlugin]} initialView='dayGridMonth' events={[{ title: 'New Event', start: eventDate }]} /> </div> ); }; ``` However, when I submit the date, `FullCalendar` ends up giving me an behavior saying `Invalid date` because it seems to be receiving the local time instead of UTC. I've also tried to explicitly convert the date to UTC like this: ```javascript const utcDate = new Date(Date.UTC(date.year(), date.month(), date.date(), date.hour(), date.minute())); ``` But that still doesn't resolve the scenario. I have both libraries updated to their latest versions: `react-datetime` 2.16.3 and `@fullcalendar/react` 5.9.0. Is there a known way to ensure that the date is correctly formatted and interpreted as UTC when passing it to `FullCalendar`? Any pointers would be greatly appreciated! This is part of a larger web app I'm building. Thanks in advance! I'm working on a web app that needs to handle this. How would you solve this? For context: I'm using Javascript on Linux. Any examples would be super helpful. For context: I'm using Javascript on CentOS. What would be the recommended way to handle this? What would be the recommended way to handle this?