React Calendar tileDisabled问题：当月首日禁用时整月选择器失效

问题背景 #

现有React Calendar组件代码如下：

<Calendar
  prev2Label={false}
  next2Label={false}
  onChange={handleChangeDate}
  value={date}
  tileClassName="tile"
  tileDisabled={({ date }) =>
    !schedule.data.some(
      ({ schedule_date, schedule_avail, schedule_closing }) => {
        return (
          moment(schedule_date).isSame(date) &&
          moment().isBefore(schedule_closing) &&
          +schedule_avail > 0
        );
      }
    )
  }
/>

当前通过tileDisabled属性判断日期是否禁用：当日程无可用时段时禁用对应日期。但存在问题：若当月1号被禁用，即使当月其他日期可用，整个月份选择器也会被禁用，导致无法切换到该月份。

曾尝试以下方案，但无法满足需求：

function disabledDate(value) {    
    return value.format("YYYY-MM-DD") !== moment(value).startOf('month').format("YYYY-MM-DD");
}

该方案能保证月份选择器正常使用，但无法按需禁用1号等不可用日期。

可行解决方案 #

核心思路是将单个日期的禁用逻辑与月份导航的禁用逻辑分离：

1. 预处理可用月份数据 #

先从日程数据中提取所有存在可用日期的月份，存为集合方便快速判断：

// 提取所有有可用日程的月份（格式为YYYY-MM）
const availableMonths = new Set(
  schedule.data
    .filter(item => {
      // 筛选出当前时间未截止且有可用名额的日程
      return +item.schedule_avail > 0 && moment().isBefore(item.schedule_closing);
    })
    .map(item => moment(item.schedule_date).format("YYYY-MM"))
);

2. 修改Calendar组件配置 #

保留原有的tileDisabled逻辑禁用单个日期，新增导航控制属性（以react-calendar为例，属性名为navigationDisabled），仅当整个月份无可用日期时才禁用该月份的导航：

<Calendar
  prev2Label={false}
  next2Label={false}
  onChange={handleChangeDate}
  value={date}
  tileClassName="tile"
  // 保持原有单个日期禁用逻辑
  tileDisabled={({ date }) =>
    !schedule.data.some(
      ({ schedule_date, schedule_avail, schedule_closing }) => {
        return (
          moment(schedule_date).isSame(date) &&
          moment().isBefore(schedule_closing) &&
          +schedule_avail > 0
        );
      }
    )
  }
  // 单独控制月份导航的禁用状态
  navigationDisabled={({ view, date }) => {
    // 仅在月份视图下判断
    if (view === 'month') {
      const currentMonth = moment(date).format("YYYY-MM");
      // 只有当该月份不在可用集合中时，才禁用导航
      return !availableMonths.has(currentMonth);
    }
    // 年份视图可根据需求调整，默认不禁用
    return false;
  }}
/>

说明 #

• 不同Calendar组件的导航控制属性名可能不同，需参考对应组件文档（例如部分组件可能使用disableNavigation或类似属性）。
• 此方案既保留了单个不可用日期的禁用功能，又确保只要月份内存在可用日期，就能正常通过月份选择器切换到该月份。

内容的提问来源于stack exchange，提问作者M. Ali Akbar