FullCalendar功能很強大，但網上容易找到的大多都是JQuery的使用方法，在此記錄一下本人在react專案中用到的功能點

FullCalendar的安裝

按照官方文件的react章節進行基本安裝

npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

這裡使用import引入專案

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

同時還需要引入相關的樣式檔案

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";

然後直接使用就可以看到基本的樣式了

<FullCalendar
	defaultView="dayGridMonth"
	plugins={[dayGridPlugin]}
/>

新增月周天檢視

需要另外安裝一個外掛

npm i @fullcalendar/timegrid

• 1

同樣使用import引入到專案中

import timeGridPlugin from "@fullcalendar/timegrid";

import "@fullcalendar/timegrid/main.css";
 

然後在外掛屬性plugins中新增timeGridPlugin，並定義日曆的頭部內容

<FullCalendar
	defaultView="dayGridMonth"
	plugins={[dayGridPlugin, timeGridPlugin]}
	header={{
		// 上一年，上一月，下一月，下一年 今天(逗號為緊相鄰，空格為有間隙，不寫哪個就不展示哪個按鈕)
		left: "prevYear,prev,next,nextYear today",
		// 預設顯示當前年月
		center: "title",
		// 右側月 周 天切換按鈕
		right: "dayGridMonth,timeGridWeek,timeGridDay"
	}}
/>
 

漢化

直接新增locale='zh-cn'屬性即可
但對按鈕文字不生效，周和天檢視中的全天也不生效
所以要使用屬性指定這些文字

        <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          header={{
            left: "prevYear,prev,next,nextYear today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay"
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
        />

使日曆一週的開始為週一

新增屬性firstDay={1} // 週一至週六為1～6，週日為0，喜歡周幾開始就填幾

側欄時間格式化為24小時制

新增屬性

slotLabelFormat={{
	hour: '2-digit',
	minute: '2-digit',
	meridiem: false,
	hour12: false
}}

到此樣式部分完畢，其他關於事件日程的渲染互動可以檢視
FullCalendar 單次 重複日程

https://blog.csdn.net/nk_Sasoli/article/details/103405184