React dva项目日程/日历插件 FullCalendar

作者: Sasoli | 来源:发表于2019-12-03 22:32 被阅读0次

整理不易，转载请注明出处！！！

我这里一共有两个列表，一个列表是单独的日程，一个列表是重复的日程
列表本来是从服务端请求的，这里为了方便理解使用，先写死

// 非循环日程列表，日程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

React dva项目日程/日历插件 FullCalendar

整理不易，转载请注明出处！！！

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React dva项目 日程/日历插件 FullCalendar

整理不易，转载请注明出处！！！

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React dva项目日程/日历插件 FullCalendar