0
点赞
收藏
分享

微信扫一扫

react dva项目日历插件FullCalendar(v5)的使用


一、下载依赖

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



二、基本使用

  Calendar/index.tsx

import React, { useEffect, useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
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<props> = () => {
matchList &&
matchList.forEach((item: any) => {
item.title = item.name
item.start = item.startTime
item.borderColor = item.type === 1 ? '#62D78E' : '#416EFF'
})

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

return (
<PageHeaderWrapper>
<div className={styles.main}>
<FullCalendar
height={800}
// aspectRatio={2} // 宽度为高度的2倍
initialView="timeGridWeek" // 初始化在week维度
plugins={[dayGridPlugin, timeGridPlugin]}
headerToolbar={{
left: '', // prevYear,prev,next,nextYear today 上一年,上一月,下一月,下一年 今天(逗号为紧相邻,空格为有间隙,不写哪个就不展示哪个按钮)
center: 'prev,title,next today', // 默认显示当前年月
// right: 'dayGridMonth,timeGridWeek,timeGridDay' // 右侧月 周 天切换按钮
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}
/></div>
</PageHeaderWrapper>
)
}

export default connect()(Calendar)


  数据源:Calendar/data.ts

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


  样式:Calendar/index.less

react dva项目日历插件FullCalendar(v5)的使用_数据源react dva项目日历插件FullCalendar(v5)的使用_数据源_02

.main {
padding: 30px;
background-color: var(--theme-pro-table-bk);
border-radius: 15px;
box-shadow: var(--theme-pro-card-shadow);
:global {
.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;
}
}
}
}
}
}
}
}
}
}

View Code




举报

相关推荐

0 条评论