如何禁止React Big Calendar事件被拖拽或创建到今日之前的日期

禁止创建今日之前的新事件 #

通过onSelectSlot回调做日期拦截即可：

• 先定义今日零点的时间对象，排除时分秒对日期判断的干扰
• 在选中时间段的回调中先校验起始日期，早于今日直接终止创建逻辑

const today = new Date(new Date().setHours(0, 0, 0, 0))

const handleSelectSlot = (slotInfo) => {
  // 选中时间段早于今日，直接返回不执行创建
  if (slotInfo.start < today) return
  // 下方写正常的事件创建逻辑
}

// 组件绑定属性
<Calendar
  selectable
  onSelectSlot={handleSelectSlot}
  // 其他原有属性
/>

禁止拖拽事件到今日之前 #

使用拖拽功能时通过onEventDrop回调做拦截：

const handleEventDrop = (dropInfo) => {
  // 拖拽后的新开始时间早于今日，直接返回不更新事件
  if (dropInfo.start < today) return
  // 下方写正常的事件时间更新逻辑
}

// 组件绑定属性
<Calendar
  onEventDrop={handleEventDrop}
  // 其他原有属性
/>

可选交互优化 #

如果希望从UI层面直接禁止用户点击今日之前的时间槽，可以搭配slotPropGetter属性添加禁用样式：

const slotPropGetter = (date) => {
  if (date < today) {
    return {
      style: {
        backgroundColor: '#f0f0f0',
        pointerEvents: 'none',
        cursor: 'not-allowed'
      }
    }
  }
  return {}
}

// 组件绑定属性
<Calendar
  slotPropGetter={slotPropGetter}
  // 其他原有属性
/>

内容的提问来源于stack exchange，提问作者Bhaskar Jha