How to select only one day in react-big-calendar month view

Question

I'm using react-big-calendar for calendar purpose in month view. https://github.com/jquense/react-big-calendar and i want to implement Add a new event by clicking on any cell (day) and i'm not sure what props should i use.

I know onSelectEvent will select only existing events no the entire day and this is not what i need and also selectable={true} will enable multi-selecting which in my case is useless.

so i need something like onDayClick or something but i wasn't so much lucky so far

You can use onSelectSlot event prop for getting access to the day cell in the calendar. — Ahmad Suddle, Sep 15 '20 at 13:42
Hi @AhmadSuddle, the thing is `onSelectSlot` only works when selectable={true} and this will enable multi-selecting ( select more than one day) which I don't want it — Alireza Esfahani, Sep 15 '20 at 13:45

score 0 · Accepted Answer · answered Sep 16 '20 at 05:21

I finally came up with using onSelectSlot and hiding multi-selecting effect manually using css, it's not perfect but its working!

        <BigCalendar
          view="month"
          onNavigate={onNavigate}
          culture="en-GB"
          date={currentDate}
          selectable={true}
          onSelectEvent={onSelectEvent}
          onSelectSlot={onSelectSlot}
          onView={() => {}}
          localizer={localizer}
          events={events}
        />

Using end of selected slot as selected day: (I know it's not perfect!)

  const onSelectSlot = (slotInfo: {
    start: stringOrDate;
    end: stringOrDate;
    slots: Date[] | string[];
    action: 'select' | 'click' | 'doubleClick';
  }) => {
     // use moment(slotInfo.end) as selected day!
  };

Hiding multi-selecting effect using css:

  calendar: {
    '& > .rbc-calendar': {
      width: '100%',
      minHeight: '500px',
    },
    '& .rbc-month-view': {
      border: 'none',
      '& .rbc-event': {
        paddingLeft: '2px',
        borderRadius: 3,
        backgroundColor: theme.palette.secondary.main,
      },
      '& .rbc-now': {
        color: theme.palette.secondary.main,
      },
      '& .rbc-selected-cell': {
        backgroundColor: '#fff',
      },
      '& .rbc-today.rbc-selected-cell': {
        backgroundColor: '#eaf6ff',
      },
      '& .rbc-off-range-bg.rbc-selected-cell': {
        background: '#e6e6e6',
      },
      '& .rbc-month-row': {
        cursor: 'pointer',
      },
    },
  },

score 0 · Answer 2 · edited Apr 16 '21 at 19:56

You can do it like this it will work.
I just made a modal popup on click of a slot, you can put an alert or a console log

const handleSelectSlot = (start) => {
  this.getModalData(start);
  this.setState({ modalOpen: true });
  this.setState({ valueIntoModal: start.start });
};

<Calendar
  selectable={true}
  formats={formats}
  localizer={localizer}
  events={[
    ...this.state.submittedData.data,
    ...this.state.savedData.data,
  ]}
  view="month"
  views={["month"]}
  onSelectSlot={handleSelectSlot}
  startAccessor="start"
  endAccessor="end"
/>

How to select only one day in react-big-calendar month view

2 Answers2