一、使用

参照 官方文档
中文参数文档
中文参数文档2
其他示例

1.安装依赖

npm install --save \@fullcalendar/core \@fullcalendar/react \@fullcalendar/daygrid

2.引入页面

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!export default class DemoApp extends React.Component {render() {return (<FullCalendarplugins={[ dayGridPlugin ]}initialView="dayGridMonth"/>)}
}

3.常用参数说明

headerToolbar：用于定义日历头部的按钮和标题
示例：

{left:   'title',center: '',right:  'today prev,next'
}

header置为false，则不会显示头部内容。
值是字符串类型的，使用逗号或者空格分隔开，区别在于：空格分隔，按钮之间有间隙；逗号分隔，按钮之间没有间隙，即紧邻。字符串的值可以使用下面的：
title：包含当前月/周/日内容
prev：按钮，用于切换到上一 月/周/日
next： 按钮，用于切换到下一 月/周/日
prevYear：按钮，用于切换到上一年
nextYear ：按钮，用于切换到下一年
today：按钮，返回当前月/周/日
[a View Name]：用于切换到指定View
如果为这些属性指定一个空字符串，则不会显示任何内容。

locale：自定义语言和本地化选项。字符串，默认是"en"。
使用需引入

import locale from '@fullcalendar/core/locales/zh-cn';

initialView：初始视图
包括dayGridMonth, dayGridWeek, dayGridDay, dayGrid 视图

plugins：提供视图插件

views：自定义视图

firstDay：设置一周中显示的第一天是哪天，周日是0，周一是1，类推

contentHeight：设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应

weekMode：在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定

event
events（Object）：事件对象，用来存储一个日历事件信息的标准对象，只有title和start是必须的
event属性：
title：必须，事件在日历上显示的title
id：可选，事件唯一标识，重复的事件具有相同的id
allDay：可选，true or false，是否是全天事件。
start：必须，事件的开始时间。
end：可选，结束时间。
url：可选，当指定后，事件被点击将打开对应url。
className：指定事件的样式。
editable：事件是否可编辑，可编辑是指可以移动, 改变大小等。
source：指向次event的eventsource对象。
color：背景和边框颜色。
backgroundColor：背景颜色。
borderColor：边框颜色。
textColor：文本颜色。

datesSet
datesSet（callback）：视图变化后的回调，切换月份年份也会触发

完整代码
jsx代码

<FullCalendar// ref={withFullCalendar}plugins={[dayGridPlugin]}locale={locale} // 中文插件initialView="dayGridMonth"headerToolbar={{left: null,center: 'prev,title,next',right: null}}views={{dayGridMonth: {dayCellContent(item) {// 设置日历展示内容let text = '';if(new Date(item.date).getTime() == new Date(new Date().setHours(0, 0, 0, 0)).getTime()){text = '今';}else{text = item.date.getDate();}return (<><labelclassName="fc-daygrid-day-solar"data-date={moment(item.date).format()}// onClick={handleNavLink}>{text}</label></>);},},}}firstDay={1}contentHeight={544}weekMode="liquid"// 事件点击方法// eventClick={(data) => { console.log('eventClick,', data) }} //  events={calenderData} // 一次性获取数据events={(arg, callback) => {var events = [];let today = new Date().getTime();// calenderData异步获取的数据，会同步更新日历calenderData.forEach(ele => {let attendDatetime = ele.date;let bgc = 'transparent';let color = '#B2B2B2';let text = '';let thisDay = new Date(ele.date).getTime();let classNameStr = '';if(thisDay <= today){if(ele.title && parseInt(ele.title) > 0){bgc = '#D9FBE7';color = '#22CC76';text = formatCount(ele.title) + '字';classNameStr = 'updated';}else{bgc = '#FFD4AF';color = '#FFA033';text = '未更新';classNameStr = 'not-updated'}}else{bgc = '#F5F5F5';}events.push({title: text,start: attendDatetime,display: 'background',color: bgc,classNames: classNameStr});});callback(events);}}datesSet={(dateInfo) => {// 可异步调用接口获取数据// console.log('dateInfo',dateInfo, dateInfo.view.currentStart, dateInfo.view.currentEnd) //start of the range the calendar datesetTimes([new Date(dateInfo.view.currentStart), new Date(dateInfo.view.currentEnd).getTime() - 1000]);}}/>

scss代码

.chapterContainer {height: 100%;display: flex;width: 100%;flex-direction: column;.chapterContent {padding-top: 16px;flex: 1;overflow-y: auto;.searchBox {display: flex;> div {display: flex;}}}:global {.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid{border: 0px;}.fc .fc-toolbar.fc-header-toolbar{margin-top: 16px;margin-bottom: 0;border: 1px solid #EFEFEF;border-bottom: hidden;}.fc-header-toolbar{height: 70px;}.fc-toolbar-chunk:nth-child(2){width: 100%;}.fc-toolbar-chunk:nth-child(2) > div{display: flex;justify-content: center;h2{margin: 0 56px;font-size: 16px;color: #494949;line-height: 30px;}button{width: 24px;height: 24px;padding: 0;background-color: #22CC76;border-color: #22CC76;.fc-icon{font-size: 16px;line-height: 13px;}}}table.fc-scrollgrid thead .fc-scroller-harness{border: 1px solid #EFEFEF;border-top: hidden;line-height: 70px;a.fc-col-header-cell-cushion{color: #494949;font-size: 16px;font-weight: 400;}}table.fc-scrollgrid{thead{height: 70px;table.fc-col-header {height: 70px;}}}.fc-scrollgrid .fc-daygrid-body{margin-top: 16px;border: 1px solid #EFEFEF;}.fc .fc-daygrid-day-frame{// width: 160px !important;height: 80px !important;min-height: 80px;max-height: 80px;background: transparent;margin: 13px;box-sizing: border-box;}.fc .fc-daygrid-day.fc-day-today{background-color: transparent;}.fc .fc-bg-event{opacity: 1;.fc-event-title{font-size: 16px;text-decoration: none;font-style: normal;text-align: center;margin-top: 43px;}&.updated{.fc-event-title{color: #22CC76;}}&.not-updated{.fc-event-title{color: #FFA033;}}}.fc .fc-daygrid-day-top{flex-direction: row;justify-content: center;margin-top: 12px;.fc-daygrid-day-number{color: #494949;font-size: 16px;}}.fc.fc-media-screen.fc-direction-ltr.fc-theme-standard{min-width: 800px;}}
}

效果图

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！