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 (
<>
<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.如果想让月视图的任务既显示开始时间又显示结束时间,加一个属性:
displayEventEnd