event date is not formatted correctly when using firestore

Question

In my project, I am sending a start date, end date, and title to cloud firestore, and recieving it properly in my react app. how do I get the event from the firestore parse to the react-big-calendar?

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
    
  componentDidMount() {
    const newEvents = [];

    firebase
      .firestore()
      .collection("events")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          newEvents.push(doc.data());
          this.setState({
            events: newEvents
          });
        });
      });
  }

and my calendar:

          <DnDCalendar
            localizer={localizer}
            defaultDate={new Date()}
            defaultView="week"
            events={this.state.events}
            style={{ height: "100vh" }}
          />

The calendar renders just fine, I just need events to show up on the calendar. New to react so any help is appreciated!

Answer 1

Firebase's Firestore stores date in Timestamp format. so when you fetch the events you will get start And end in timestamp. But React big calendar expects date of type date object and not a timestamp. So you can use toDate() method of timestamp to convert timestamp to date.

So code should look like this

   componentDidMount() {
const newEvents = [];

firebase
  .firestore()
  .collection("events")
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(doc => {
      let event = doc.data();
      event.start = event.start.toDate();
      event.end= event.end.toDate();
      newEvents.push(event);
      this.setState({
        events: newEvents
      });
    });
  });

}