0

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

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

我的日历

<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
          }
        }}
      />

组件DidMount

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...
)

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

4

1 回答 1

0

经过大量搜索，这非常有效。我希望它可以帮助别人。当然，任何改进都会受到赞赏！干杯!

  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>
      );
    }
  };
于 2019-08-09T01:21:53.077 回答