React整合FullCalendar笔记（一）

前期

因为公司的需求，需要一个可以拖动的日历效果。经过前期的调研，找到 FullCalendar 框架比较符合项目的需求。但是碍于现在关于这个框架的文档都比较零散和不全。在经过几天的调研中，我大概实现了部分的功能，由此想做一系列的博文跟大家分享一下。

实现效果

第一期，我们就简单的使用这个框架，在页面上面单纯的展示在页面中。

主要代码

import React, { useRef, useState } from 'react'
import {Modal} from 'antd'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import interactionPlugin from "@fullcalendar/interaction"
import locale from '@fullcalendar/core/locales/zh-cn';
import "@fullcalendar/timegrid/main.css";<div style={{ width: "50vw", height: '50vh', marginLeft: "10vw" }}><FullCalendar// interactionPlugin 移动使用插件// dayGridPlugin 日期网格插件plugins={[ dayGridPlugin, interactionPlugin ]}// 头部展示headerToolbar={{//  默认显示当前年月left: "title",// 设置中间显示的内容// center: "title",// 右侧上一月，下一月，今天(逗号为紧相邻，空格为有间隙，不写哪个就不展示哪个按钮)right: "prev,next today"}}// 设置可以编辑：拖动，缩放editable={true}initialView="dayGridMonth"// 空白点击事件dateClick={handleDateClick}// 这个中文显示locale={locale}// 设置可丢弃droppable={true}// 事件数据events={[// display: 'background', { title:'女神节', start: '2021-12-14', end:"2021-12-17", backgroundColor:"green", id:"1", textColor:'white'},{ title:'女神节2', start: '2021-12-07', end:"2021-12-09", backgroundColor:"Orange", id:"1", textColor:'white'},{ title:'女神节1', start: '2021-12-16', end:"2021-12-20", backgroundColor:"red", id:"4", textColor:'white'},{ title:'99活动 甲乙丙',start: '2021-12-14', end:"2021-12-15", backgroundColor:"blue", id:"2", textColor:'white', display:'list-item'},{ title:'99活动1',start: '2021-12-14', end:"2021-12-15", backgroundColor:"blue", id:"3", textColor:'white', display:'list-item'},{ title:'99活动2',start: '2021-12-14', end:"2021-12-15", backgroundColor:"blue", id:"3", textColor:'white', display:'list-item'},{ title:'99活动3',start: '2021-12-14', end:"2021-12-15", backgroundColor:"blue", id:"3", textColor:'white', display:'list-item'}]}/></div>

本篇只是让大家初步体验体验这个组件，后续还会更多的知识点分享给大家。大家可以到官方文档进行学习。

React整合FullCalendar笔记（一）相关推荐

React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
如何免安装服务器将 React 整合进 Spring Boot
如何免安装服务器将 React 整合进 Spring Boot 下载 Spring Boot 官方 demo 下载 React 官方 demo 开始整合使用 Spring MVC 控制器导向 Rea ...
Spring+Shiro+CAS整合配置笔记
一.前言 Apache Shiro与Spring Security一样是Java的一个安全框架.那为什么与Spring整合却用Shiro?不要问为什么,任性!开个玩笑:D 其实我个人是认为Spring ...
resin3.1+apache2.2.8 整合（笔记）
今天整合了一下apache2 resin3.1 配置过程有一二个注意事项.做一下小笔记. resin3.0开始支持PHP 如果在整合当中apache老是提示配置文件错误,那么就是resin配置不当 ...
使用react实现select_React笔记——核心概念：9.表单
1.受控组件在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新. state:唯一数据源渲染表单的 Rea ...
《SpringBoot框架开发技术整合》笔记（一）
文章目录前言第一章构建简单WEB项目第二章 SpringBoot接口返回Json 第三章 SpringBoot热部署第四章 SpringBoot资源文件属性前言笔者近期在慕课网上 ...
《SpringBoot框架开发技术整合》笔记（二）
文章目录前言第五章 SpringBoot配置全局的异常捕获一. 页面跳转形式二. ajax形式三. 统一返回异常的形式参考前言笔者近期在慕课网上学习了<Springboo ...
【尚硅谷React】——React全家桶笔记
文章目录第1章 React简介 1.1 React的特点 1.2 引入文件 1.3 JSX 1.3.1 为什么要用JSX 1.3.2 JSX语法规则 1.4 虚拟DOM 1.5 模块与组件 1.5. ...

React整合FullCalendar笔记（一）

React整合FullCalendar笔记（一）

前期

实现效果

主要代码

React整合FullCalendar笔记（一）相关推荐

最新文章

热门文章