React dva项目 日程/日历插件 FullCalendar
2019-12-03 本文已影响0人
Sasoli
整理不易，转载请注明出处！！！
我这里一共有两个列表，一个列表是单独的日程，一个列表是重复的日程
列表本来是从服务端请求的，这里为了方便理解使用，先写死
// 非循环日程列表，日程ID，日程名，日程开始时间，日程结束时间
let matchList = [
{
id: '1',
name: '第一个任务',
startTime: "2019-12-02 13:22:05",
endTime: "2019-12-02 15:38:05",
repeatExecute: false,
},
{
id: '2',
name: '第二个任务',
startTime: "2019-12-05 09:45:23",
endTime: "2019-12-05 15:10:23",
repeatExecute: false,
},
{
id: '3',
name: '第三个任务',
startTime: "2019-12-07 15:37:18",
endTime: "2019-12-07 19:43:18",
repeatExecute: false,
},
{
id: '4',
name: '第四个任务',
startTime: "2019-12-07 14:49:05",
endTime: "2019-12-08 03:15:05",
repeatExecute: false,
},
];
// 循环任务， 数据结构差不多
let repeatMatchList = [
{
id: '5',
name: '每周一，周三重复任务',
startDate: "2019-12-01", // 任务创建于12月1日
startTime: "09:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期一","星期三"],
repeatExecute: true,
},
{
id: '6',
name: '每周二重复任务',
startDate: "2019-12-01", // 任务创建于12月1日
startTime: "15:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期二"],
repeatExecute: true,
}
];
两组数据使用前先做一些转化
// 先过滤一遍repeatExecute，防止出现问题数据，然后转换
matchList && matchList.filter(match => !match.repeatExecute).forEach(item => {
// title为FullCalendar插件的 任务名称的设置
item.title = item.name;
// start为FullCalendar插件的 任务开始时间的设置
item.start = item.startTime;
// end为FullCalendar插件的 任务结束时间的设置
item.end = item.endTime;
// borderColor为FullCalendar插件的 任务边框颜色的设置
item.borderColor = 'red';
})
repeatMatchList && repeatMatchList.filter(match => match.repeatExecute).forEach(item => {
// 如果item.repeatDates包含在repeatMap中，那么后面的格式化不会有问题
if (this.includes(repeatMap, item.repeatDates)) {
item.title = item.name;
item.borderColor = 'black';
item.daysOfWeek = [];
// startRecur为FullCalendar插件的 任务从几号开始重复的设置
// 这里也可以设置item.startRecur = item.startDate; 我这里需求是当天以前的重复任务不需要展示，所以直接设置为new Date()
item.startRecur = new Date();
item.repeatDates.forEach(date => {
// 这里再格式化一次
// daysOfWeek为FullCalendar插件的 周几重复的设置
item.daysOfWeek.push(this.formartRepeat(date))
})
}
})
完整代码如下
import React, { Component } from 'react';
import { connect } from 'dva';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from "@fullcalendar/timegrid";
import styles from './index.less';
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
const repeatMap = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
let matchList = [
{
id: '1',
name: '第一个任务',
startTime: "2019-12-02 13:22:05",
endTime: "2019-12-02 15:38:05",
repeatExecute: false,
},
{
id: '2',
name: '第二个任务',
startTime: "2019-12-05 09:45:23",
endTime: "2019-12-05 15:10:23",
repeatExecute: false,
},
{
id: '3',
name: '第三个任务',
startTime: "2019-12-07 15:37:18",
endTime: "2019-12-07 19:43:18",
repeatExecute: false,
},
{
id: '4',
name: '第四个任务',
startTime: "2019-12-07 14:49:05",
endTime: "2019-12-08 03:15:05",
repeatExecute: false,
},
];
let repeatMatchList = [
{
id: '5',
name: '每周一，周三重复任务',
startDate: "2019-12-10", // 任务创建于12月10日
startTime: "09:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期一", "星期三"],
repeatExecute: true,
},
{
id: '6',
name: '每周二重复任务',
startDate: "2019-12-02", // 任务创建于12月2日
startTime: "15:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期二"],
repeatExecute: true,
}
];
class CalendarDemo extends Component {
constructor(props) {
super(props);
this.state = {
};
}
includes = (arr1, arr2) => {
return arr2.every(val => arr1.includes(val));
}
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;
}
render() {
matchList && matchList.filter(match => !match.repeatExecute).forEach(item => {
item.title = item.name;
item.start = item.startTime;
item.end = item.endTime;
item.borderColor = 'red';
})
repeatMatchList && repeatMatchList.filter(match => match.repeatExecute).forEach(item => {
if (this.includes(repeatMap, item.repeatDates)) {
item.title = item.name;
item.borderColor = 'black';
item.daysOfWeek = [];
item.startRecur = item.startDate;
item.repeatDates.forEach(date => {
item.daysOfWeek.push(this.formartRepeat(date))
})
}
})
return (
<div className={styles.container}>
<FullCalendar
height={500} // 此处高度为方便截图，可不设置
defaultView="dayGridMonth"
plugins={[dayGridPlugin, timeGridPlugin]}
header={{
left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
center: "title", // 当前年月
right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
}}
locale='zh-cn'
buttonText={{
today: '今天',
month: '月',
week: '周',
day: '天'
}}
allDayText='全天'
firstDay={1}
slotLabelFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}}
eventSources={[matchList, repeatMatchList]}
/>
</div>
);
}
}
export default connect()(CalendarDemo);
此时各窗口样式为
截屏2019-12-0322.17.48.png
截屏2019-12-0322.14.48.png
截屏2019-12-0322.15.56.png
然后如果想让月视图的任务既显示开始时间又显示结束时间
加一个属性
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, timeGridPlugin]}
header={{
left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
center: "title", // 当前年月
right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
}}
locale='zh-cn'
buttonText={{
today: '今天',
month: '月',
week: '周',
day: '天'
}}
allDayText='全天'
firstDay={1}
slotLabelFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}}
eventSources={[matchList, repeatMatchList]}
displayEventEnd
/>
截屏2019-12-0322.20.26.png
然后任务的时间也想显示为24小时格式，那么加属性
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, timeGridPlugin]}
header={{
left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
center: "title", // 当前年月
right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
}}
locale='zh-cn'
buttonText={{
today: '今天',
month: '月',
week: '周',
day: '天'
}}
allDayText='全天'
firstDay={1}
slotLabelFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}}
eventSources={[matchList, repeatMatchList]}
displayEventEnd
eventTimeFormat={
{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}
}
/>
截屏2019-12-0322.22.06.png
截屏2019-12-0322.22.53.png
假设点击任务想获得任务id或其他相关内容，那么加eventClick属性，完整代码如下
import React, { Component } from 'react';
import { connect } from 'dva';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from "@fullcalendar/timegrid";
import styles from './index.less';
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
const repeatMap = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
let matchList = [
{
id: '1',
name: '第一个任务',
startTime: "2019-12-02 13:22:05",
endTime: "2019-12-02 15:38:05",
repeatExecute: false,
},
{
id: '2',
name: '第二个任务',
startTime: "2019-12-05 09:45:23",
endTime: "2019-12-05 15:10:23",
repeatExecute: false,
},
{
id: '3',
name: '第三个任务',
startTime: "2019-12-07 15:37:18",
endTime: "2019-12-07 19:43:18",
repeatExecute: false,
},
{
id: '4',
name: '第四个任务',
startTime: "2019-12-07 14:49:05",
endTime: "2019-12-08 03:15:05",
repeatExecute: false,
},
];
let repeatMatchList = [
{
id: '5',
name: '每周一，周三重复任务',
startDate: "2019-12-10", // 任务创建于12月10日
startTime: "09:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期一", "星期三"],
repeatExecute: true,
},
{
id: '6',
name: '每周二重复任务',
startDate: "2019-12-02", // 任务创建于12月2日
startTime: "15:10:00", // 每次任务的开始时间
endTime: "17:30:23", // 每次任务的结束时间
repeatDates: ["星期二"],
repeatExecute: true,
}
];
class CalendarDemo extends Component {
constructor(props) {
super(props);
this.state = {
};
}
includes = (arr1, arr2) => {
return arr2.every(val => arr1.includes(val));
}
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;
}
eventClick = eventInfo => {
console.log(eventInfo);
console.log(eventInfo.event._def);
}
render() {
matchList && matchList.filter(match => !match.repeatExecute).forEach(item => {
item.title = item.name;
item.start = item.startTime;
item.end = item.endTime;
item.borderColor = 'red';
})
repeatMatchList && repeatMatchList.filter(match => match.repeatExecute).forEach(item => {
if (this.includes(repeatMap, item.repeatDates)) {
item.title = item.name;
item.borderColor = 'black';
item.daysOfWeek = [];
item.startRecur = item.startDate;
item.repeatDates.forEach(date => {
item.daysOfWeek.push(this.formartRepeat(date))
})
}
})
return (
<div className={styles.container}>
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, timeGridPlugin]}
header={{
left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
center: "title", // 当前年月
right: "dayGridMonth,timeGridWeek,timeGridDay" // 月 周 天
}}
locale='zh-cn'
buttonText={{
today: '今天',
month: '月',
week: '周',
day: '天'
}}
allDayText='全天'
firstDay={1}
slotLabelFormat={{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}}
eventSources={[matchList, repeatMatchList]}
displayEventEnd
eventTimeFormat={
{
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
}
}
eventClick={this.eventClick}
/>
</div>
);
}
}
export default connect()(CalendarDemo);
截屏2019-12-0322.26.26.png
到此为止，日程展示相关基本完成，点击下一月，上一月按钮重新获取数据请看第三篇
https://www.jianshu.com/p/047f0a8d86f1
