设置validRange后FullCalendar无法正常显示？技术求助

看起来你在通过日期输入框控制FullCalendar的validRange时遇到了显示异常，我帮你梳理几个关键问题和修复方案：

1. 避免直接访问moment的私有属性_i #

_i是moment.js内部用于存储原始输入值的私有属性，直接依赖它会导致代码不稳定（不同moment版本可能会修改这个属性）。应该用moment提供的公开API来判断日期是否有效：

• 用moment(inputVal).isValid()判断日期是否合法
• 先检查输入框的值是否为空，再创建moment对象

2. validRange的格式不符合要求 #

FullCalendar的validRange需要明确的start和/或end参数，空对象{}可能会导致日历解析出错。当需要清除范围限制时，应该设置为null而不是空对象。

3. 处理部分日期为空的场景 #

当只有起始日期或只有结束日期时，要确保validRange的格式正确，只传对应的start或end即可，不要留空值。

修复后的代码示例 #

<div class="show-schedule"></div>
起始日期：<input id="start-at" type="date">
结束日期：<input id="end-at" type="date">

$('#start-at, #end-at').change(function(){
  // 先获取输入框的值，避免创建无效的moment对象
  const startVal = $('#start-at').val();
  const endVal = $('#end-at').val();
  
  let fromDate = startVal ? moment(startVal, "YYYY-MM-DD") : null;
  let toDate = endVal ? moment(endVal, "YYYY-MM-DD").add(1, 'days') : null;
  
  let validRange = null; // 默认清除范围限制
  
  if (fromDate && toDate) {
    // 确保起始日期不晚于结束日期
    if (fromDate.isBefore(toDate)) {
      validRange = { start: fromDate, end: toDate };
    } else {
      // 可以在这里提示用户日期范围无效
      console.warn("起始日期不能晚于结束日期");
    }
  } else if (fromDate) {
    validRange = { start: fromDate };
  } else if (toDate) {
    validRange = { end: toDate };
  }
  
  // 更新FullCalendar的validRange
  $('.show-schedule').fullCalendar('option', 'validRange', validRange);
});

额外检查点 #

• 确认你使用的FullCalendar版本是否支持validRange（v4及以上版本支持，旧版本可能用visibleRange或者其他参数）
• 检查浏览器控制台是否有报错信息，比如moment或FullCalendar的初始化错误
• 确保moment.js的版本与FullCalendar兼容，避免版本冲突

内容的提问来源于stack exchange，提问作者Đặng Nam