如何在 react-big-calendar 月视图中 select 只有一天

Question

我在月视图中使用 react-big-calendar 日历。 https://github.com/jquense/react-big-calendar 我想通过点击任何单元格（天）来实现 Add a new event，但我不确定我应该使用什么道具。

我知道 onSelectEvent 将 select 仅存在一整天的事件，这不是我需要的，而且 selectable={true} 将启用 multi-selecting 对我来说没用。

所以我需要 onDayClick 之类的东西，但到目前为止我并没有那么幸运

Answer 1

我终于想出了使用 onSelectSlot 并使用 css 手动隐藏 multi-selecting 效果，它并不完美，但它的工作！

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

将所选时段的结尾用作所选日期：（我知道这并不完美！）

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

使用css隐藏multi-selecting效果：

  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',
      },
    },
  },

Answer 2

你可以这样做它会起作用。
我只是在点击插槽时制作了一个模态弹出窗口，您可以放置警报或控制台日志

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

如何在 react-big-calendar 月视图中 select 只有一天

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

reactjs

react-big-calendar