如何在react-calendar月视图中仅选择一天

如何解决如何在react-calendar月视图中仅选择一天

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

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

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

解决方法

我终于想出了使用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',

,

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

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