大概效果： 

以 react 为例：

日历组件所需依赖： (Plugin Index - Docs | FullCalendar)

    "@fullcalendar/core": "^6.1.10",

    "@fullcalendar/daygrid": "^6.1.10",

    "@fullcalendar/interaction": "^6.1.10",

    "@fullcalendar/react": "^6.1.10",

安装以上依赖

npm install @fullcalendar/core @fullcalendar/daygrid  @fullcalendar/interaction @fullcalendar/react

引入依赖

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';// 日历格子显示
import interactionPlugin from '@fullcalendar/interaction'; // 拖拽插件
import locale from '@fullcalendar/core/locales/zh-cn';// 中文import { Form, Input, Modal } from 'antd';
import React, { Component } from 'react';

     <FullCalendarref='fullcalendar'locale={locale} // 中文插件headerToolbar={{left: '',center: 'prev,title,next',right: '',}}dayHeaderFormat={(date, index) => {// 自定义 日历表头 周日 周一 可以改成其他的const week = Moment(date.date.marker).format('ddd');return week;}}firstDay={0} // 每周周几为开始日0周日 1周一 以此类推editable // false之后不可以拖拽selectablescrollweekMode='liquid'plugins={[dayGridPlugin, interactionPlugin]}initialView='dayGridMonth'showNonCurrentDates={false}eventContent={this.renderEventContent}dateClick={(info) => {// 单击某个日期this.showModal(info, 'date');this.setState({ selectDate: info.dateStr });}}select={(info) => {// 托选某几个日期this.showModal(info, 'range');}}eventClick={(info) => {// 事件被点击this.setState({isModalOpen: true,items: info.event.title,modalMsg: {id: info.event.id,allDay: info.event.allDay,startStr: info.event.startStr,endStr: info.event.endStr,dateStr: info.event.startStr,type: info.event.extendedProps.type,},});console.log(this.state.eventList);}}eventDrop={(eventDropInfo) => {// 事件被拖拽const { eventList,   } = this.state;if (eventDropInfo.event.id) {const eventListTemp = eventList.map((e) => {if (e.id === eventDropInfo.event.id) {return {...e,start: eventDropInfo.event.startStr,end: eventDropInfo.event.endStr,};}return e;});this.setState({eventList: eventListTemp,});}}}eventResize={(eventResizeInfo) => {// 事件变化 缩短或者 拉长了时间const { eventList } = this.state;if (eventResizeInfo.event.id) {const eventListTemp = eventList.map((e) => {if (e.id === eventResizeInfo.event.id) {return {...e,start: eventResizeInfo.event.startStr,end: eventResizeInfo.event.endStr,};}return e;});console.log(eventListTemp,'eventListTemp');this.setState({eventList: eventListTemp,});}}}events={this.state.eventList}/>

 新增事件的模态框：（根据需求自定义）

        <Modal title='添加日历事项' visible={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel}><p>选中时间： {this.state.modalMsg.dateStr}{this.state.modalMsg.endStr ? '~' + this.state.modalMsg.endStr : ''}</p><InputaddonBefore='添加日期事项'defaultValue='活动1'value={this.state.items}onChange={(e) => {this.setState({ items: e.target.value });}}/></Modal>

使用的事件：

 this.state = {eventList: [],isModalOpen: false,modalMsg: { type: 'date' },items: '',};

dateClick、select 事件打开模态框  （传入事件等等参数）

  showModal = (info, type) => {this.setState({ isModalOpen: true, modalMsg: { ...info, dateStr: info.startStr || info.dateStr, type } });};

事件模态框点击确定

  handleOk = () => {const { eventList, modalMsg, items } = this.state;console.log(modalMsg);if (modalMsg.id) {const eventListTemp = eventList.map((e) => {if (e.id === modalMsg.id) {return { ...e, title: items };}return e;});this.setState({eventList: eventListTemp,});} else {if (modalMsg.type === 'range') {this.setState({eventList: [...eventList,{id: random(),title: items,start: modalMsg.startStr,end: modalMsg.endStr,allDay: true,type: modalMsg.type,},],});} else {this.setState({eventList: [...eventList,{title: items,start: modalMsg.dateStr,allDay: true,id: random(),type: modalMsg.type,},],});}}console.log('eventList', this.state.eventList);this.setState({ isModalOpen: false, items: '', modalMsg: { type: 'date' } });};

模态框点击取消
 

  handleCancel = () => {this.setState({ isModalOpen: false, items: '', modalMsg: { type: 'date' } });};

 使用的属性解析：  

【locale】（Locale - Docs | FullCalendar）

选项用于定义本地化设置，以便使日历适应不同的语言和地区

1. 英语（美国）：'en' 或 'en-us'
2. 中文（简体中文）：'zh' 或 'zh-cn'
3. 法语：'fr' 或 'fr-fr'
4. 德语：'de' 或 'de-de'
5. 西班牙语（西班牙）：'es' 或 'es-es'
6. 日语：'ja' 或 'ja-jp'
7. 俄语：'ru' 或 'ru-ru'
8. 阿拉伯语：'ar' 或 'ar-sa'

【headerToolbar】

如果设置为false，则不显示头部信息。

1. left: 左侧区域的按钮和标题配置。
2. center: 中间区域的按钮和标题配置。
3. right: 右侧区域的按钮和标题配置。

每个区域的配置可以包含以下属性：

• prev: 切换到上一个日期或视图的按钮。
• next: 切换到下一个日期或视图的按钮。
• today: 切换到当前日期的按钮。
• title: 显示当前日期范围或视图名称的区域。
• prevYear: 切换到上一年的按钮。
• nextYear: 切换到下一年的按钮。
• prevMonth: 切换到上个月的按钮。
• nextMonth: 切换到下个月的按钮。
• dayGridMonth: 切换到月视图的按钮。
• timeGridWeek: 切换到周视图的按钮。
• timeGridDay: 切换到天视图的按钮。
• todayButton: 切换到今天的按钮。

【dayHeaderFormat】 

设置在天视图中每个天的列上显示的日期格式。可以自定义这些列头的文本格式，以适应你的需求。

以下是一些 dayHeaderFormat 的示例以及它们的含义：

• 'dd'：显示短格式的星期几（例如：周一、周二）。
• 'dddd'：显示完整的星期几名称（例如：星期一、星期二）。
• 'D'：显示天的数字，不带前导零（1、2、3）。
• 'DD'：显示天的数字，带前导零（01、02、03）。

也可以完全自定义

         dayHeaderFormat={(date, index) => {// 自定义 日历表头 周日 周一 可以改成其他的const week = Moment(date.date.marker).format('ddd');return week;}}

【weekMode】

在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。

• fixed：固定显示6周高，日历高度保持不变
• liquid：不固定周数，高度随周数变化
• variable：不固定周数，但高度固定

【initialView】

 默认为哪个视图

• 月：dayGridMonth 
• 周：timeGridWeek 
• 日：timeGridDay 

 

【showNonCurrentDates】

属性为true，即非当前月份的日期会显示出来。如果将showNonCurrentDates属性设置为false，则非当前月份的日期将不会显示。 

【dateClick】 

dateClick是fullcalendar插件中的一个事件，当用户点击日历中的某个日期时触发 

          dateClick={(info) => {// 单击某个日期}}

【select】

用于表示用户选择了日期范围的操作

          select={(info) => {// 托选某几个日期this.showModal(info, 'range');}}

 【eventClick】

用于表示用户点击了事件的操作

          eventClick={(info) => {// 事件被点击}}

 【eventDrop】表示拖动事件

          eventDrop={(eventDropInfo) => {// 事件被拖拽}}