如何将自定义标题添加到 Fullcalendar

Question

我想知道是否有办法通过 API 将一些自定义元素（按钮除外）放入 fullcalendar 标头中，但在尝试找到解决方案后我发现这是不可能的。所以，也许有人也在找它，我是这样解决的：

import React, { useEffect, useState } from "react"
import moment from "moment"

const CalendarHeader = ({ calendarRef }) => {
 const [title, setTitle] = useState(new moment().format("MMMM DD, YYYY"))
 const [calendarApi, setApi] = useState()
 const setTitle = () => setTitle(calendarApi.currentDataManager.data.viewTitle)

 useEffect(() => {
  setTitle(calendarRef.current.getApi().currentDataManager.data.viewTitle)
  setApi(calendarRef.current.getApi())
 }, [title])

 const nextHandle = () => {
  calendarApi.next()
  setTitle()
 }
 const prevHandle = () => {
  calendarApi.prev()
  setTitle()
 }
 const todayHandle = () => {
  calendarApi.today()
  setTitle()
 }

 return (
  <div className="calendar_header">
   <div className="calendar_block__ml">
    <h2 className="calendar_date">{title}</h2>
   </div>

   <div className="calendar_block__nav">
    <button onClick={prevHandle} className="cl_btn cl_btn__prev" title="Previous week">
     <span className="fc-icon fc-icon-chevron-left" />
    </button>
    <button onClick={nextHandle} className="cl_btn cl_btn__next" title="Next week">
     <span className="fc-icon fc-icon-chevron-right" />
    </button>
    <button onClick={todayHandle} className="cl_btn cl_btn__today" title="This week">
     today
    </button>
   </div>
  </div>
 )
}

export default CalendarHeader

它的工作原理与原始标题相同，除了今天按钮（当周当前时它不会被禁用，但我认为如果花一些时间围绕它是有办法做到这一点的）。所以，希望它能帮助别人；D