react使用Fullcalendar

前言：

最近在做项目时，遇到了需要用日历的项目。一开始考虑使用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 实战用法