如何在fullcalendar v3.1中高亮gotodate函数定位到的特定事件？

开发者阿泽

2026-10-7

问题根因

调用gotoDate跳转日期后，FullCalendar需要异步完成新视图的事件渲染，你在跳转后立刻执行DOM选择操作时，对应事件元素还未挂载到页面上，所以选择器匹配失败，样式修改不生效。

修复方案

方案1（推荐：监听渲染回调，稳定性高）

首先在日历初始化配置中添加viewRender回调，该回调会在视图渲染完成后触发：

// 全局变量存储待高亮的目标日期
let targetHighlightDate = null;

// 你的日历初始化逻辑
$("#calendar").fullCalendar({
  // 保留你原来的所有配置项，新增以下配置
  viewRender: function(view, element) {
    if (targetHighlightDate) {
      $(`.fc-event-dot[data-date="${targetHighlightDate}"]`).css('background-color', '#a31a5c');
      targetHighlightDate = null;
    }
  }
});

修改搜索点击逻辑：

$("#btnsearch").click(function () {
  var res = $("#txtSearch").val();
  res = res.substring(0,19);
  const date = moment(res, "DD/MM/YYYY HH:mm");
  // 先赋值待高亮日期，注意format格式要和元素上的data-date属性完全一致
  // 可先F12查看现有.fc-event-dot的data-date实际格式，调整format参数
  targetHighlightDate = date.format("YYYY-MM-DD HH:mm:ss");
  // 再执行日期跳转
  $("#calendar").fullCalendar('gotoDate', date);
});

方案2（简易兜底）

如果不想修改日历初始化配置，可添加短延迟等待渲染完成后再修改样式：

$("#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);
  // 延迟时间可根据实际渲染速度调整
  setTimeout(() => {
    $('.fc-event-dot[data-date="' + date.format("YYYY-MM-DD HH:mm:ss") + '"]').css('background-color', '#a31a5c');
  }, 300);
});