react dva项目日历插件FullCalendar（v5）的使用

一、下载依赖

　　cnpm i @fullcalendar/daygrid @fullcalendar/react @fullcalendar/timegrid

二、基本使用

　　Calendar/index.tsx

import React, { useEffect, useState, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Drawer, Button, Form, Input, Select, DatePicker } from 'antd'
import { connect } from 'umi'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import { matchList } from './data'
import styles from './index.less'

interface props {}

const Calendar: React.FC = () => {
  useEffect(() => {}, [])

  matchList &&
    matchList.forEach((item: any) => {
      item.borderColor = item.type === 1 ? '#62D78E' : '#416EFF'
    })

  const eventClick = (eventInfo: any) => {
    console.log(eventInfo)
    console.log(eventInfo.event._def)
  }

  return (
    
      

        
          +新建日程
        
        <FullCalendar
          height={800}
          // aspectRatio={2} // 宽度为高度的2倍
          initialView="timeGridWeek" // 初始化在week维度
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{ left: '', center: 'prev,title,next today', right: '' }}
          locale="zh-cn"
          buttonText={{ today: '今天', month: '月', week: '周', day: '天' }}
          allDaySlot={false} // 不显示all-day
          firstDay={6} // 从周六开始
          scrollTime={'06:00:00'} // 初始滚动条滚动到的时间位置：6点
          slotLabelFormat={{ hour: '2-digit', minute: '2-digit', meridiem: false, hour12: false }} // 左侧时间格式
          weekNumbers // 显示一年中的第n周
          eventSources={[matchList]} // 数据源
          defaultTimedEventDuration={'01:00:00'} // 当没有设置endTime时的持续时间为1个小时
          displayEventEnd
          eventClick={eventClick}
        />
      
    
  )
}

export default connect()(Calendar)

　　数据源：Calendar/data.ts

export const matchList = [
  { id: '0', title: '周计划', start: '2022-03-19 06:30:00', type: 1 },
  { id: '2', title: '自建日程', start: '2022-03-22 09:00:00', type: 2 },
  { id: '3', title: '周计划', start: '2022-03-23 12:30:00', type: 1 },
  { id: '4', title: '周计划', start: '2022-03-24 08:30:00', type: 1 }
]

　　样式：Calendar/index.less

.main {
  position: relative;
  padding: 30px;
  background-color: var(--theme-pro-table-bk);
  border-radius: 15px;
  box-shadow: var(--theme-pro-card-shadow);
  :global {
    .ant-btn.add {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 100px;
      border-radius: 4px;
    }
    .fc {
      .fc-header-toolbar {
        .fc-toolbar-chunk {
          position: relative;
          > div {
            display: flex;
            align-items: center;
            > button.fc-button {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
              height: 32px;
              padding: 0;
              color: #416eff;
              background-color: transparent;
              border: none;
              box-shadow: 0 0;
              span.fc-icon {
                display: flex;
                align-items: center;
                line-height: 0;
              }
            }
            > h2 {
              margin: 0 20px;
              color: var(--theme-text-color);
              font-size: 18px;
            }
          }
          > button.fc-button {
            position: absolute;
            top: 0;
            right: -100px;
            bottom: 0;
            width: 60px;
            height: 32px;
            margin-left: 0;
            line-height: 0;
            background-color: #416eff;
            border: none;
            box-shadow: 0 0;
          }
        }
      }
      .fc-view-harness .fc-scrollgrid {
        thead {
          tr {
            th {
              height: 40px;
              border-color: #e1e9f8;
              border-left: none;
              .fc-scroller {
                overflow: hidden !important;
                a {
                  color: var(--theme-text-color);
                  font-weight: 500;
                  font-size: 16px;
                  line-height: 36px;
                  cursor: default;
                }
              }
              &.fc-day-today {
                background-color: #e0f1ff; // 今天
                a {
                  color: #416eff; // 今天
                }
              }
            }
          }
        }
        tbody {
          :global(.fc-day-grid-event .fc-content) {
            white-space: normal !important;
          }
          tr {
            td {
              height: 24px;
              border-color: #e1e9f8;
              &.fc-timegrid-slot-label {
                color: var(--theme-text-color);
                font-size: 14px;
              }
              &.fc-day-today {
                background-color: #e0f1ff; // 今天
              }
              .fc-timegrid-event-harness .fc-v-event {
                position: relative;
                // background-color: var(--theme-pro-table-bk);
                background-color: #fff;
                border: none;
                border-left: 4px solid;
                border-radius: 0 4px 4px 0;
                box-shadow: 2px 2px 4px 0 rgba(57, 78, 145, 0.1);
                .fc-event-main {
                  padding: 5px 0 5px 4px;
                  .fc-event-main-frame {
                    // color: var(--theme-text-color);
                    color: #373a44;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

三、效果