Fullcalendar插件的使用

快来打我* 2022-09-09 04:51 500阅读 0赞

## 设计需求 ##

因为设计稿是这样的

![设计稿][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXZld2Vpc2NzZG4_size_20_color_FFFFFF_t_70_g_se_x_16]  
像日历又不完全是日历，所以本来想用antd的日历组件也用不了

![在这里插入图片描述][cdfb420ad9a7477a8e93cca9a34b9cd7.jpg]

还好Fullcalendar插件可以满足

## 安装 ##

npm install --save @fullcalendar/react @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

## 不说太多上代码 ##

具体看注释

import React, {  useState, useRef, useMemo } from 'react';
    import {  Space, Row, Divider, message } from 'antd';
    import FullCalendar from '@fullcalendar/react'; // must go before plugins
    import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
    import timeGridPlugin from '@fullcalendar/timegrid';
    import interactionPlugin from '@fullcalendar/interaction'; // needed for dayClick
    import dayjs from 'dayjs';
    import moment from 'moment';
    import {  uniqueId } from 'lodash';
    import '@fullcalendar/daygrid/main.css';
    import '@fullcalendar/timegrid/main.css';
    import '../styles/dialTimeRange.scss';
    
    
    const week = [ '周日', '周一', '周二', '周三', '周四', '周五', '周六' ];
    
    // 拨打时间范围弹窗
    const DialTimeRange = ({ timeList = [], ...props }) => { 
     const [ eventList, setEventList ] = useState(useMemo(() => timeList, [timeList]));
     const calendarComponentRef = useRef();
    
    
     // render header
     // 每列的头部渲染
     const columnHeaderHtml = (date) => { 
      const day = dayjs(date.date).day(); // 获取周几
      return <span>{ week[day]}</span>;
     };
    
     // 判断时间是否重复
     const getRepeatDates = (start, end, eventsList) => { 
      let repeats =
       eventsList &&
       eventsList.filter((x) => { 
        return (
         (x.start < start && x.end > start) ||
         (x.start > start && x.end <= end) ||
         (x.start < end && x.end >= end)
        );
       });
      return repeats;
     };
    
     const weekList = () => { 
      const weekTimeList = [ { } ];
      for (let i = 0; i < 7; i++) { 
       weekTimeList.push({ 
        start: dayjs(`2021-08-${ 16 + i} 09:00:00`).format(),
        end: dayjs(`2021-08-${ 16 + i} 20:00:00`).format()
       });
      }
      return weekTimeList;
     };
    
     // 将跨天的事件转化成单天的事件
     const handleTransformEventList = (eStart, eEnd, startWeek, endWeek) => { 
      const weeklist = weekList();
    
      // 开始时间不是09：00
      eventList.push({ 
       ...weeklist[startWeek],
       start: eStart,
       id: uniqueId(),
       weekRange: startWeek,
       startTimeStr: dayjs(eStart).format('HH:mm'),
       endTimeStr: dayjs(weeklist[startWeek]['end']).format('HH:mm')
      });
    
      if (endWeek - startWeek >= 2) { 
       // 比如框选了周一某点到周三某点
       // 这是中间肯定被选了整天，所以用09：00~20：00 即可
       for (let i = startWeek + 1; i <= endWeek - startWeek; i++) { 
        eventList.push({ 
         ...weeklist[i],
         id: uniqueId(),
         weekRange: i,
         startTimeStr: dayjs(weeklist[startWeek]['start']).format('HH:mm'),
         endTimeStr: dayjs(weeklist[startWeek]['end']).format('HH:mm')
        });
       }
      }
      // 结束时间不是20：00
      eventList.push({ 
       ...weeklist[endWeek],
       end: eEnd,
       id: uniqueId(),
       weekRange: endWeek,
       startTimeStr: dayjs(weeklist[startWeek]['start']).format('HH:mm'),
       endTimeStr: dayjs(eEnd).format('HH:mm')
      });
    
      return eventList;
     };
    
     // 选择
     const handleSelect = (event) => { 
      const eStart = event.start;
      const eEnd = event.end;
      // 校验时间是否重叠
      let repeats = getRepeatDates(eStart, eEnd, eventList);
      if (repeats.length > 0) { 
       calendarComponentRef.current._calendarApi.unselect(); // 清除选择的重复时间段
       message.error('选择的时间段中已存在重复时间段');
       return;
      }
    
      const startWeek = dayjs(eStart).day();
      const endWeek = dayjs(eEnd).day() || 7; // 后面都是把7当做周日，而不是0
    
      if (startWeek === endWeek) { 
       // 说明选的是同一天的
       eventList.push({ 
        id: uniqueId(),
        start: eStart,
        end: eEnd,
        weekRange: startWeek,
        startWeek,
        endWeek,
        startTimeStr: dayjs(eStart).format('HH:mm'),
        endTimeStr: dayjs(eEnd).format('HH:mm')
        // display: 'background', // 添加了这个就不能获取事件点击事件
        // color: '#466DFF'
       });
      } else { 
       // 跨天了
       handleTransformEventList(eStart, eEnd, startWeek, endWeek);
      }
      // }
      // console.log('handleSelect', eventList);
      setEventList([...eventList]);
     };
     // 事件点击
     const handleventClick = (arg) => { 
      let id = arg.event.id;
      // let data = arg.event.extendedProps; // 可以查看自定义数据
      const idIndex = eventList.findIndex((ev) => ev.id === id);
      eventList.splice(idIndex, 1); //删除已选择的事件
      setEventList([ ...eventList ]);
    
      // console.log('handleventClick', arg)
     };
    
    
     const handleUnSelect = (event) => { 
      console.log({  event });
     };
     // console.log({ eventList, setEventList });
     return (
       <FullCalendar
        ref={ calendarComponentRef}
        plugins={ [ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
        initialView="timeGridWeek" // 默认为哪个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
        locale="zh-cn"
        firstDay={ 1} // 设置周一为第一天
        headerToolbar={ false} // 设置日历头部按钮
        // editable={true}
        slotLabelFormat={ { 
         hour: '2-digit',
         minute: '2-digit',
         meridiem: true,
         hour12: false // 设置时间为24小时
        }}
        initialDate={ moment('2021-08-16').format('YYYY-MM-DD')} // 自定义设置背景颜色时一定要初始化日期时间
        selectable={ true} // 是否可选择
        allDaySlot={ false} // 周，日视图时，all-day 不显示
        aspectRatio={ 1.6} // 设置日历单元格宽度与高度的比例。
        select={ handleSelect} // 选中日历格事件
        unselect={ handleUnSelect} // 不选触发的事件
        eventClick={ handleventClick} // 点击日历日程事件
        events={ eventList} // 事件数据
        dayHeaderContent={ columnHeaderHtml} // 每天的头部内容
        slotMinTime="09:00:00" // 左边的时间最小从几点展示
        slotMaxTime="20:00:00" // 左边的时间最大展示到几点
        // eventContent={eventRender} // 时间的内容渲染
       />
     );
    };
    
    export default DialTimeRange;

## [官网传送门][Link 1] ##

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBARXZld2Vpc2NzZG4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/c36134ef3d70430181487415d41c8581.png
[cdfb420ad9a7477a8e93cca9a34b9cd7.jpg]: /images/20220829/ca4ac31cdc3d4efd865e1a3ff924d0a4.png
[Link 1]: https://fullcalendar.io/