react-big-calendar - 单击月视图单元格时移动到日视图

Question

想要在单击月份单元格时使用状态以编程方式逐月更改视图，单击事件被捕获，但不起作用：

const localizer = BigCalendar.momentLocalizer(moment);

export default class Calendario extends React.Component {
  state = {
    defaultView: "month",
    defaultDate: new Date()
  };

  renderCell = props => (
    <Card
      {...props.children.props}
      onClick={() => {
        this.handleSelect(props.value);
      }}
    >
      {props.children}
    </Card>
  );

  handleSelect = (date) => {
    this.setState({ defaultView: "day" });
  };
  render() {
    const { defaultView, defaultDate } = this.state;
    return (
      <div>
        <h4>Agenda</h4>
        <div style={{ display: "flex", height: "600px" }}>
          <BigCalendar
            components={{
              dateCellWrapper: this.renderCell
            }}
            defaultDate={defaultDate}
            defaultView={defaultView}
            localizer={localizer}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
      </div>
    );
  }
}

我查看了 API 文档，最相似的是 onView，但它是从库中触发的。

Answer 1

您可以创建一个自定义工具栏，您可以在其中访问onView

export const CustomToolbar = ({ onView, views = ['month', 'week', 'day', 'agenda'] }) => (
  <div>
    {
      views.map(view => (
        <button
          key={view}
          onClick={() => onView(view)}
        >
          {view}
        </button>
      ))
    }
  </div>
)

<BigCalendar components={{ toolbar: CustomToolbar }} />