fullcalendar v3.1（JS/C#）如何高亮gotoDate函数定位到的特定日期

问题根因 #

• fullCalendar('gotoDate') 属于异步渲染方法，调用后日历需要重新加载对应月份的DOM节点，同步执行DOM选择逻辑时，目标日期的DOM还未渲染完成，自然匹配不到元素
• 日期格式不匹配：.fc-day的data-date属性值为YYYY-MM-DD格式，直接拼接moment对象会生成不符合要求的字符串，导致选择器失效
• 未清理旧高亮样式，多次搜索会残留多个高亮日期块

稳定修复方案 #

在日历初始化时绑定视图渲染完成回调，跳转后自动执行高亮逻辑，避免异步渲染导致的DOM匹配问题：

// 全局存储待高亮的日期
let highlightDate = null;

$(document).ready(function () {
  // 初始化日历
  $("#calendar").fullCalendar({
    // 保留你原来的所有日历配置项，新增下面的viewRender配置
    viewRender: function() {
      // 视图渲染完成后，判断是否有需要高亮的日期
      if (highlightDate) {
        // 先清除所有旧高亮
        $('.fc-day').css('background-color', '');
        // 格式化日期为YYYY-MM-DD匹配data-date属性规则
        const formatDate = highlightDate.format('YYYY-MM-DD');
        $(`.fc-day[data-date="${formatDate}"]`).css('background-color', 'red');
        // 高亮完成后清空标记，避免切换视图时重复高亮
        highlightDate = null;
      }
    }
  });

  $("#btnsearch").click(function () {
    var res = $("#txtSearch").val();
    res = res.substring(0,19);
    // 解析日期后赋值给全局高亮标记
    highlightDate = moment(res, "DD/MM/YYYY HH:mm");
    // 跳转到指定日期，触发视图重新渲染
    $("#calendar").fullCalendar('gotoDate', highlightDate);
  })
})

临时快速验证方案 #

如果不想修改日历初始化配置，也可以给DOM操作加短延迟等待渲染完成：

$("#btnsearch").click(function () {
  var res = $("#txtSearch").val();
  res = res.substring(0,19);
  const date = moment(res, "DD/MM/YYYY HH:mm");
  $("#calendar").fullCalendar('gotoDate', date);
  // 加100ms延迟等待日历DOM渲染完成
  setTimeout(() => {
    $('.fc-day').css('background-color', '');
    const formatDate = date.format('YYYY-MM-DD');
    $(`.fc-day[data-date="${formatDate}"]`).css('background-color', 'red');
  }, 100)
})

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