javascript - 即使在完成选择后，也会在 react-big-calendar 中突出显示所选插槽的背景

Question

现在默认行为是每当有人选择一个插槽时，它就会以灰色突出显示，但一旦选择停止，突出显示的日历字段就会消失。如果我们在选择时打开模式，则没有必要，但在我的情况下，70% 的宽度是日历，30% 是表单。因此，当进行选择时，表格中的日期会更新，但没有任何内容突出显示，因此会造成混乱。

fullcalendar 有一个选项“unselectAuto”，默认为 true。

react-big-calandar 还没有实现这个，并且对 PR 开放。有什么解决方案/黑客可以解决这个问题吗？

Answer 1

我使用slotPropGetter和跟踪做到了这一点selected

  // This handles styling the 'selected' slot background in the Scheduler
  const slotPropGetter = (slotDate) => {
    if (
      selected &&
      !selected.IsAllDayAppointment &&
      moment(slotDate).isBetween(
        moment(selected.StartDateTime).subtract(1, 'm').toJSON(),
        selected.EndDateTime
      )
    ) {
      return {
        style: { backgroundColor: '#999', borderTop: '1px solid #999' },
      };
    }
  };

我的日期实现有点不同，但最终它只是检查slotDate我selected的值start和end. 根据文档，使用slotPropGetter您可以将自定义styles 或classes 应用于插槽。