FullCalendar的使用，react日历组件

1.下载

yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

2.运行

import React from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";const ExperimentalSchedule = () => {return (<><FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin]}/></>);
};export default ExperimentalSchedule;

3.右上角需要，日周月

yarn add @fullcalendar/timegrid<FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}/>

4.汉化，locale='zh-cn'

 <FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'/>

5.修改，周一开头，时间修改为24小时制

 <FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几slotLabelFormat={{hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false}}/>

6.创建循环任务和单独任务

import React, { useEffect, useState } from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";const ExperimentalSchedule = () => {let matchList = [{id: '1',name: '第一个任务',startTime: "2024-07-09 13:22:05",endTime: "2024-07-09 15:38:05",repeatExecute: false,},{id: '2',name: '第二个任务',startTime: "2024-07-13 09:45:23",endTime: "2024-07-13 15:10:23",repeatExecute: false,},{id: '3',name: '第三个任务',startTime: "2024-07-20 19:37:18",endTime: "2024-07-20 19:43:18",repeatExecute: false,},{id: '4',name: '第四个任务',startTime: "2024-07-25 14:49:05",endTime: "2024-07-25 03:15:05",repeatExecute: false,},];let repeatMatchList = [{id: '5',name: '每周一，周三重复任务',startDate: "2024-07-09", // 任务创建于12月10日startTime: "09:10:00", // 每次任务的开始时间endTime: "17:30:23", // 每次任务的结束时间repeatDates: ["星期一", "星期三"],repeatExecute: true,},{id: '6',name: '每周二重复任务',startDate: "2024-07-09", // 任务创建于12月2日startTime: "15:10:00", // 每次任务的开始时间endTime: "17:30:23", // 每次任务的结束时间repeatDates: ["星期二"],repeatExecute: true,}];const formartRepeat = (value) => {switch (value) {case '星期一':value = 1;break;case '星期二':value = 2;break;case '星期三':value = 3;break;case '星期四':value = 4;break;case '星期五':value = 5;break;case '星期六':value = 6;break;case '星期日':value = 0;break;}return value;}const [events, setEvents] = useState([]);useEffect(() => {// 准备事件数据const preparedEvents = (list) => {return list.map(({ id, name, startTime, endTime, repeatExecute, repeatDates, startDate }) => {let event = {id,title: name,start: repeatExecute ? `${startDate}T${startTime}` : startTime, // 格式化时间end: repeatExecute ? `${startDate}T${endTime}` : endTime, // 格式化时间borderColor: repeatExecute ? 'black' : 'red',};if (repeatExecute) {event.daysOfWeek = repeatDates.map(formartRepeat); // 设置星期几重复event.startRecur = startDate; // 重复开始日期}return event;});};const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];setEvents(formattedEvents);}, []);const  eventClick = (eventInfo) => {console.log(eventInfo.event);}return (<><FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几slotLabelFormat={{hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false}}events={events}eventClick={eventClick}/></>);
};export default ExperimentalSchedule;

7.如果想让月视图的任务既显示开始时间又显示结束时间，加一个属性：

displayEventEnd

8.用后端数据

  const [matchList,setMatchList] = useState([]);const [repeatMatchList,setRepeatMatchList] = useState([]);useEffect(() => {const init=async()=>{const res= await scheduleService.getScheduleList()// console.log(res.data);setMatchList(res.data)}init()}, []);const preparedEvents = (list) => {return list.map(({ experimentName, startTime, endTime, id, remindTime }) => {let event = {id: id,title: experimentName, // 事件标题使用实验名称start: startTime, // 格式化时间end: endTime, // 格式化时间// 假设 borderColor 根据 remindTime 的值来设置颜色borderColor: 'red',};// 如果有 remindTime 并且需要设置重复提醒，则进行相应的设置if (remindTime) {// 这里可以添加重复事件的逻辑，例如根据 remindTime 设置重复提醒的规则// 例如：event.daysOfWeek = ...;// event.startRecur = remindTime;}return event;});}useEffect(() => {const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];setEvents(formattedEvents);}, [matchList]);

9.日程的点击事件

  const eventClick = async(eventInfo) => {const id=eventInfo.event._def.publicIdsetscheduleId(eventInfo.event._def.publicId)console.log(eventInfo.event);setModalVisit1(true)const res=await scheduleService.getScheduleById(id)// console.log(res.data);form1.setFieldsValue(res.data)};eventClick={eventClick}

10.自定义按钮

customButtons={{jia: {text: '添加日程',click: function () {setModalVisit(true);},},}}