1

在我的项目中，我将开始日期、结束日期和标题发送到 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" }}
          />

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

4

1 回答 1

0

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

所以代码应该是这样的

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

}

于 2018-11-04T16:35:31.467 回答