使用 firestore 时事件日期格式不正确

Question

在我的项目中，我将开始日期、结束日期和标题发送到 Cloud firestore，并在我的 React 应用程序中正确接收它。如何将事件从 firestore 解析到 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
          });
        });
      });
  }

和我的日历：

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

日历呈现得很好，我只需要在日历上显示事件。新手反应所以任何帮助表示赞赏！

Answer 1

Firebase 的 Firestore 以时间戳格式存储日期。因此，当您获取事件时，您将以时间戳开始和结束。但是 React 大日历需要日期对象类型而不是时间戳。所以可以使用timestamp的toDate()方法将timestamp转换为date。

所以代码应该是这样的

   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
      });
    });
  });

}

使用 firestore 时事件日期格式不正确

event date is not formatted correctly when using firestore

react-big-calendar

google-cloud-firestore