How to select multiple days in react-big-calendar

问题

I'm using react-big-calendar for calendar purpose.

When i want to display the month, day and week it is showing correctly. But when i want to select multiple days and weeks, it is just selecting.

The actual thing i want to do is, When i selected multiple days an alert box should come. Can anyone please show me how to do it.

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

This is my imported react-big-calendar.

回答1:

You can select multiple days, and even weeks, through click and drag. You initiate your click on the beginning date and drag through to your ending date before releasing the button. You capture this by using React-Big-Calendar's onSelectSlot property.

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

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

回答2:

This should work also, please refer the link below it has many easy to understand examples.

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

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

来源：https://stackoverflow.com/questions/54997228/how-to-select-multiple-days-in-react-big-calendar

标签

reactjs

react-big-calendar