Блог

Я использую react-big-calendar для календарных целей.

Когда я хочу отобразить месяц, день и неделю, они отображаются правильно. Но когда я хочу выбрать несколько дней и недель, это просто выбор.

На самом деле я хочу сделать так, чтобы при выборе нескольких дней появлялось окно предупреждения. Кто-нибудь, пожалуйста, может показать мне, как это сделать.

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

Это мой импортированный react-big-calendar.

Вы можете выбрать несколько дней и даже недель с помощью щелчка и перетаскивания. Вы нажимаете на дату начала и перетаскиваете до даты окончания, прежде чем отпустить кнопку. Вы фиксируете это с помощью onSelectSlot свойства React-Big-Calendar.

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

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

Это также должно сработать, пожалуйста, перейдите по ссылке ниже, там много простых для понимания примеров.

     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