如何使用 firestore 中的数据填充月视图中的日标题

Question

在 React-Big-Calendar 中，我正在尝试为月视图中的日期设置标题。我的标题数据是从一个外部组件设置的，该组件将日期和城市名称上传到 firestore，并使用 componentDidMount 加载到我的日历组件中，并将其加载到一个名为标签的 object 数组中。我想要标签 object 来比较日期，并将标题应用于日期，但我不明白如何将 firestore object 连接到日历。

我可以 console.log firestore 数据并在控制台中查看它，并且当我比较 RBC 日期和硬编码日期时，我可以使用 IF 语句手动设置标题。我一直在寻找 examples/info 数周...任何方向都是有帮助的。

我的日历

<DnDCalendar
        localizer={localizer}
        defaultDate={new Date()}
        views={["day", "agenda", "work_week", "month", "week"]}
        defaultView={"month"}
        events={this.state.events}
        onEventDrop={this.moveEvent}
        resizable
        onEventResize={this.resizeEvent}
        selectable
        onSelectEvent={this.selectEvent}
        eventPropGetter={this.eventStyleGetter}
        style={{ height: "85vh" }}
        components={{
          month: {
            dateHeader: this.customDateHeader
          }
        }}
      />

componentDidMount

firebase
  .firestore()
  .collection("calLabel")
  .onSnapshot(snapshot => {
    let newLabels = [];
    snapshot.forEach(doc => {
      let label = doc.data();
      label.id = doc.id;
      newLabels.push(label);
      this.setState({
        labels: newLabels
      });
    });
  });

customDateHeader 组件

 customDateHeader = ({ label, date, drilldownView, onDrillDown }) => {
    return (
      <div className='row p-0 m-0'>
        <div className='col-md-10 text-center p-0 mt-1'>City</div>
        <div className='col-md-2 p-0'>
          <button
            className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
            onClick={onDrillDown}
          >
            {label}
          </button>
        </div>
      </div>
    );
  };

我尝试了很多不同的 if 语句..

if (moment(date) === moment(this.state.labels[0].labelDate.toDate())) {
return (
 jsx here...
)

如果日期匹配，希望看到标题填充城市名称。非常感谢任何指导或帮助，因为我在这里度过了很多天。

Answer 1

经过多次搜索，这很有效。我希望它能帮助别人。当然，任何改进都是值得赞赏的！干杯！

  customDateHeader = ({ label, date, drilldownView, onDrillDown }) => {
    if (this.state.labels) {
      let cityLabel = "";
      let dayLabels = this.state.labels;
      dayLabels.forEach(
        label => {
          if (label.labelDate.toDate().getTime() === date.getTime()) {
            cityLabel = label.locationName;
          }
        }
      );
      return (
        <div className='row p-0 m-0'>
          <div className='col-md-10 text-center p-0 mt-1'>{cityLabel}</div>
          <div className='col-md-2 p-0'>
            <button
              className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
              onClick={onDrillDown}
            >
              {label}
            </button>
          </div>
        </div>
      );
    } else {
      return (
        <div className='row p-0 m-0'>
          <div className='col-md-10 text-center p-0 mt-1'>City</div>
          <div className='col-md-2 p-0'>
            <button
              className='btn btn-sm btn-outline-primary font-weight-bold mt-1'
              onClick={onDrillDown}
            >
              {label}
            </button>
          </div>
        </div>
      );
    }
  };

如何使用 firestore 中的数据填充月视图中的日标题

How to populate the day title in month view with data from firestore

reactjs

react-big-calendar

google-cloud-firestore