1.下载
yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid2.运行
import React from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
const ExperimentalSchedule = () => {
return (
<>
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin]}
/>
</>
);
};
export default ExperimentalSchedule;
3.右上角需要，日周月
yarn add @fullcalendar/timegrid
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, timeGridPlugin]}
headerToolbar={{
left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
center: "title", // 当前年月
right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
}}
/>
4.汉化，locale='zh-cn'
<FullCalendar
defaultView="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小时制
<FullCalendar
defaultView="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 (
<>
<FullCalendar
defaultView="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.如果想让月视图的任务既显示开始时间又显示结束时间，加一个属性：
displayEventEnd8.用后端数据
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.publicId
setscheduleId(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);
},
},
}}
