ReactJS结合Full Calendar V5如何在日历标题追加自定义文本

1. 定位标题DOM类 #

FullCalendar V5内置工具栏标题的固定类名为 fc-toolbar-title，可直接通过该类名定位到目标标题节点。

注意：你之前查看的事件渲染hooks是用来处理日历内部日程卡片的渲染，和工具栏标题自定义无关，不需要使用这类hooks。

2. 代码实现 #

组件逻辑代码 #

import React, { useEffect, useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
// 引入你需要的其他日历插件

const CustomCalendar = () => {
  const calendarRef = useRef(null);

  useEffect(() => {
    // 等待日历渲染完成后操作DOM
    const titleElement = calendarRef.current.el.querySelector('.fc-toolbar-title');
    // 避免重复追加自定义元素
    if (titleElement && !titleElement.querySelector('.custom-calendar-label')) {
      const customLabel = document.createElement('div');
      customLabel.className = 'custom-calendar-label';
      customLabel.innerText = '你的自定义日历名称';
      titleElement.appendChild(customLabel);
    }
  }, []);

  return (
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      // 其余你的日历原有配置保持不变
    />
  );
};

export default CustomCalendar;

配套CSS样式 #

/* 让标题区域内部元素垂直排列 */
.fc-toolbar-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
/* 自定义文本样式，可根据需求调整 */
.custom-calendar-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  font-weight: normal;
}

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