Fullcalendar 6默认渲染日期为链接，如何改为div/span？

数据老陈

2026-7-10

解决FullCalendar 6日期单元格标签替换为div/span的问题

方案1：CSS重置+自定义内容（简单高效）

先禁用导航功能，再通过CSS抹除默认标签的链接特性，最后用dayCellContent自定义内容容器：

配置FullCalendar时关闭导航：

<FullCalendar
  plugins={[dayGridPlugin]}
  navLinks={false}
  // 其他配置项...
/>

添加CSS重置标签的默认样式，让它表现得像普通元素：

.fc-daygrid-day a {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: default;
  border: none;
  background: none;
}

用dayCellContent把日期内容包裹在你需要的标签里：

dayCellContent: (info) => {
  return <span className="custom-day-content">{info.dayNumberText}</span>;
}

这种方法无需修改DOM结构，仅通过样式和内容定制就能满足需求，兼容性和稳定性最佳。

方案2：手动替换DOM元素（彻底替换标签）

如果必须完全移除标签，改用div/span，可以通过dayCellDidMount钩子直接操作DOM：

<FullCalendar
  plugins={[dayGridPlugin]}
  navLinks={false}
  dayCellDidMount={(info) => {
    const dayLink = info.el.querySelector('a.fc-daygrid-day-number');
    if (dayLink) {
      // 创建目标标签，这里以div为例
      const newEl = document.createElement('div');
      // 继承原类名，保留FullCalendar的默认样式
      newEl.className = dayLink.className;
      // 复制原内容
      newEl.innerHTML = dayLink.innerHTML;
      // 替换原a标签
      dayLink.parentNode.replaceChild(newEl, dayLink);
    }
  }}
  // 其他配置项...
/>

这个方法会直接修改DOM结构，把标签替换成你指定的元素，适合对DOM结构有严格要求的场景。