如何在反应大日历中选择多天答案

【问题标题】：How to select multiple days in react-big-calendar如何在反应大日历中选择多天
【发布时间】：2019-03-05 07:09:49
【问题描述】：

我将 react-big-calendar 用于日历目的。

当我想显示月、日和周时，它会正确显示。但是当我想选择多天和多周时，它只是选择。

我真正想做的是，当我选择多天时，应该会出现一个警报框。谁能告诉我怎么做。

<BigCalendar
            selectable
            events={this.state.events}
            defaultDate={new Date(2019, 2, 1)}
            localizer={localizer}
        />

这是我导入的 react-big-calendar。

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

您可以通过单击和拖动来选择多天，甚至几周。在释放按钮之前，您开始单击开始日期并拖动到结束日期。您可以使用 React-Big-Calendar 的 onSelectSlot 属性来捕获这一点。

const handleSlotSelection = ({start, end, action}) => {
  // do something with it all
};

<BigCalendar { ...otherProps } onSelectSlot={ handleSlotSelection } />

【讨论】：

【解决方案2】：

这应该也可以，请参考下面的链接，它有很多易于理解的示例。

    this.state = {
       events: []
    }  

    handleSelect = ({ start, end }) => {
        const title = window.prompt('New Event name')
        if (title)
          this.setState({
            events: [
              ...this.state.events,
              {
                start,
                end,
                title,
              },
            ],
          })
      }

    <Calendar
              selectable={true}
              localizer={localizer}
              defaultDate={new Date()}
              defaultView="month"
              scrollToTime={new Date(1970, 1, 1, 6)}
              events={this.state.events}
              style={{ height: "85vh" }}
              onSelectSlot={this.handleSelect}
   />

参考：https://github.com/jquense/react-big-calendar/blob/master/examples/demos/createEventWithNoOverlap.js

【讨论】：