Question

想要使用单击月份单元格时的状态以编程方式将视图从一个月更改为另一个月，则捕获了click事件，但不起作用：

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

单击月视图单元格时移至日视图

1 个答案: