如何在反应大日历月视图中仅选择一天答案

【问题标题】：How to select only one day in react-big-calendar month view如何在反应大日历月视图中仅选择一天
【发布时间】：2020-09-15 13:36:25
【问题描述】：

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

我知道onSelectEvent 将只选择现有事件而不是一整天，这不是我需要的，而且 selectable={true} 将启用多选，这在我的情况下是无用的。

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

【问题讨论】：

您可以使用 onSelectSlot 事件道具来访问日历中的日期单元格。
嗨 @AhmadSuddle，事情是 onSelectSlot 仅在 selectable={true} 时有效，这将启用我不想要的多选（选择超过一天）

标签： reactjs react-big-calendar

【解决方案1】：

我终于想出了使用onSelectSlot并使用css手动隐藏多选效果，它并不完美，但它的工作原理！

        <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隐藏多选效果：

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

【讨论】：

【解决方案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"
/>

【讨论】：