前言：
最近在做项目时，遇到了需要用日历的项目。一开始考虑使用antd的日历组件。后来 调研技术库，发现了fullcalendar 库。经过对比 fullcalendar 更强大，更灵活。
其实 antd的日历组件 也不错，简单的需求用他也行。antd 的优点是文档清晰且完善。
安装需要的包：
npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid
npm @fullcalendar/react 官网
Fullcalendar 官网
用法：
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
const events = [
{ title: 'Meeting', start: new Date() }
]
export function DemoApp() {
return (
<div>
<h1>Demo App</h1>
<FullCalendar
plugins={[dayGridPlugin]}
initialView='dayGridMonth'
weekends={false}
events={events}
eventContent={renderEventContent}
/>
</div>
)
}
// a custom render function
function renderEventContent(eventInfo) {
return (
<>
<b>{eventInfo.timeText}</b>
<i>{eventInfo.event.title}</i>
</>
)
}
效果图：
有什么问题可以查看文档:
fullcalendar 文档
使用心得：
文档查看：
因为文档是英文的，我的英文不好，只能借助 一些插件来翻译。建议使用edge浏览器来看。之前都是用 浏览器自带的翻译功能，但是 会直接把英文换成中文。很不友好，无法对照着来。
后来发现了一个 插件很好用：沉浸式翻译对的插件（沉浸式翻译插件地址）
这个直接在插件商店搜素就行，如果想在chrome上用就得科学上网或者看看这篇文章：
immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题
翻以前:
自定义样式：
1.可以审查元素 强行覆盖其样式
.fc-daygrid-event {
background-color: #4CAF50; /* 自定义事件背景色 */
border-radius: 4px; /* 圆角 */
color: white; /* 事件文本颜色 */
padding: 5px; /* 内间距 */
}
2.fullcalendar/react 使用了 css 变量，可以用css变量来控制一些样式，甚至可以定制一个简易的主题。
例如:边框颜色：–fc-border-color这个变量控制的，只需要在css/less/scss里加上：
--fc-border-color:red;
--fc-today-bg-color:red; //选中的背景色
3.用fullcalenda 提供的主题系统
fullcalenda Theme
小结：我觉得 修改样式可以 配合 css变量和 找到其类名进行覆盖比较好（个人观点）。
不显示 周日、周六列
weekends=false
设置语言:
设置成这个就显示成 周一 至 周五 默认就是 英文
locale='zh-cn'// 设置语言
标题不想 要周字（我的需求），自定义dayHeaderContent
dayHeaderContent={(arg) => {
// 自定义星期内容
const days = ['日', '一','二', '三', '四', '五', '六']; // 星期的中文表示
return days[arg.date.getDay()]; // 获取对应星期的中文名称
}}
自定义单元格内容：
dayCellContent={(data)=>{return "xx"}}
单元格点击dateClick（需要引入交互插件）：
只加dateClick
dateClick={(info) => {
console.log(info, "9086");
}}
不管用还需要给plugins里加上interactionPlugin，这个是交互插件。最好把selectable={true}也加上
import interactionPlugin from "@fullcalendar/interaction"
plugins={[dayGridPlugin,interactionPlugin]}
selectable={true}
dateClick 文档
实战用法：
具体可参考：react使用Fullcalendar 实战用法
