单击月份视图单元格时移动到日期视图

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