FullCalendar的使用,react日历组件

1.下载

yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

2.运行

import React from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";const ExperimentalSchedule = () => {return (<><FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin]}/></>);
};export default ExperimentalSchedule;

3.右上角需要,日周月

yarn add @fullcalendar/timegrid<FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年,上一月,下一月,下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}/>

4.汉化,locale='zh-cn'

 <FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年,上一月,下一月,下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'/>

5.修改,周一开头,时间修改为24小时制

 <FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年,上一月,下一月,下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'firstDay={1} // 周一至周六为1~6,周日为0,喜欢周几开始就填几slotLabelFormat={{hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false}}/>

6.创建循环任务和单独任务

import React, { useEffect, useState } from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";const ExperimentalSchedule = () => {let matchList = [{id: '1',name: '第一个任务',startTime: "2024-07-09 13:22:05",endTime: "2024-07-09 15:38:05",repeatExecute: false,},{id: '2',name: '第二个任务',startTime: "2024-07-13 09:45:23",endTime: "2024-07-13 15:10:23",repeatExecute: false,},{id: '3',name: '第三个任务',startTime: "2024-07-20 19:37:18",endTime: "2024-07-20 19:43:18",repeatExecute: false,},{id: '4',name: '第四个任务',startTime: "2024-07-25 14:49:05",endTime: "2024-07-25 03:15:05",repeatExecute: false,},];let repeatMatchList = [{id: '5',name: '每周一,周三重复任务',startDate: "2024-07-09", // 任务创建于12月10日startTime: "09:10:00", // 每次任务的开始时间endTime: "17:30:23", // 每次任务的结束时间repeatDates: ["星期一", "星期三"],repeatExecute: true,},{id: '6',name: '每周二重复任务',startDate: "2024-07-09", // 任务创建于12月2日startTime: "15:10:00", // 每次任务的开始时间endTime: "17:30:23", // 每次任务的结束时间repeatDates: ["星期二"],repeatExecute: true,}];const formartRepeat = (value) => {switch (value) {case '星期一':value = 1;break;case '星期二':value = 2;break;case '星期三':value = 3;break;case '星期四':value = 4;break;case '星期五':value = 5;break;case '星期六':value = 6;break;case '星期日':value = 0;break;}return value;}const [events, setEvents] = useState([]);useEffect(() => {// 准备事件数据const preparedEvents = (list) => {return list.map(({ id, name, startTime, endTime, repeatExecute, repeatDates, startDate }) => {let event = {id,title: name,start: repeatExecute ? `${startDate}T${startTime}` : startTime, // 格式化时间end: repeatExecute ? `${startDate}T${endTime}` : endTime, // 格式化时间borderColor: repeatExecute ? 'black' : 'red',};if (repeatExecute) {event.daysOfWeek = repeatDates.map(formartRepeat); // 设置星期几重复event.startRecur = startDate; // 重复开始日期}return event;});};const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];setEvents(formattedEvents);}, []);const  eventClick = (eventInfo) => {console.log(eventInfo.event);}return (<><FullCalendardefaultView="dayGridMonth"plugins={[dayGridPlugin, timeGridPlugin]}headerToolbar={{left: "prevYear,prev,next,nextYear today", // 上一年,上一月,下一月,下一年 今天center: "title", // 当前年月right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月}}locale='zh-cn'buttonText={{today: '今天',month: '月',week: '周',day: '天'}}allDayText='全天'firstDay={1} // 周一至周六为1~6,周日为0,喜欢周几开始就填几slotLabelFormat={{hour: '2-digit',minute: '2-digit',meridiem: false,hour12: false}}events={events}eventClick={eventClick}/></>);
};export default ExperimentalSchedule;

7.如果想让月视图的任务既显示开始时间又显示结束时间,加一个属性:

displayEventEnd

8.用后端数据

  const [matchList,setMatchList] = useState([]);const [repeatMatchList,setRepeatMatchList] = useState([]);useEffect(() => {const init=async()=>{const res= await scheduleService.getScheduleList()// console.log(res.data);setMatchList(res.data)}init()}, []);const preparedEvents = (list) => {return list.map(({ experimentName, startTime, endTime, id, remindTime }) => {let event = {id: id,title: experimentName, // 事件标题使用实验名称start: startTime, // 格式化时间end: endTime, // 格式化时间// 假设 borderColor 根据 remindTime 的值来设置颜色borderColor: 'red',};// 如果有 remindTime 并且需要设置重复提醒,则进行相应的设置if (remindTime) {// 这里可以添加重复事件的逻辑,例如根据 remindTime 设置重复提醒的规则// 例如:event.daysOfWeek = ...;// event.startRecur = remindTime;}return event;});}useEffect(() => {const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];setEvents(formattedEvents);}, [matchList]);

9.日程的点击事件

  const eventClick = async(eventInfo) => {const id=eventInfo.event._def.publicIdsetscheduleId(eventInfo.event._def.publicId)console.log(eventInfo.event);setModalVisit1(true)const res=await scheduleService.getScheduleById(id)// console.log(res.data);form1.setFieldsValue(res.data)};eventClick={eventClick}

10.自定义按钮

customButtons={{jia: {text: '添加日程',click: function () {setModalVisit(true);},},}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376245.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

13--memcache与redis

前言&#xff1a;数据库读取速度较慢一直是无法解决的问题&#xff0c;大型网站应对的方式主要是使用缓存服务器来缓解这种情况&#xff0c;减少数据库访问次数&#xff0c;以提高动态Web等应用的速度、提高可扩展性。 1、简介 Memcached/redis是高性能的分布式内存缓存服务器…

paddlepaddle2.6,paddleorc2.8,cuda12,cudnn,nccl,python10环境

1.安装英伟达显卡驱动 首先需要到NAVIDIA官网去查自己的电脑是不是支持GPU运算。 网址是&#xff1a;CUDA GPUs | NVIDIA Developer。打开后的界面大致如下&#xff0c;只要里边有对应的型号就可以用GPU运算&#xff0c;并且每一款设备都列出来相关的计算能力&#xff08;Compu…

C语言 | Leetcode C语言题解之第230题二叉搜索树中第K小的元素

题目&#xff1a; 题解&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/int search_num(struct TreeNode* root, int k, int *result, int num) {if(num k 1){retu…

计算机的错误计算(二十九)

摘要 &#xff08;1&#xff09;讨论近似值的错误数字个数。有时&#xff0c;遇到数字9或0, 不太好确认近似值的错误数字个数。&#xff08;2&#xff09;并进一步解释确认计算机的错误计算&#xff08;二十八&#xff09;中一个函数值的错误数字个数。 理论上&#xff0c;我…

Java数据结构-二叉树

树型结构 概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成的一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上叶朝下的。 树具有以下特点&#xff1a; 有一个特殊结点&…

javaweb个人主页设计(html+css+js)

目录 1 前言和要求 1.1 前言 1.2 设计要求 2 预览 2.1 主页页面 2.2 个人简介 2.3 个人爱好 2.4 个人成绩有代码&#xff0c;但是图片已省略&#xff0c;可以根据自己情况添加 2.5 收藏夹 3 代码实现 3.1 主页 3.2 个人简介 3.3 个人爱好 3.4 个人成绩&#xff…

CSS技巧专栏:一日一例 1.纯CSS实现 会讨好的热情按钮 特效

题外话: 从今天开始,我准备开设一个新的专栏,专门写 使用CSS实现各种酷炫按钮的方法,本专栏目前准备写40篇左右,大概会完成如下按钮效果: 今天,我来介绍第一个按钮的实现方法:会讨好的热情按钮。为什么我给它起这样的名字呢?你看它像不像一个不停摇尾巴的小黄?当你鼠…

SvANet:微小医学目标分割网络,增强早期疾病检测

SvANet&#xff1a;微小医学目标分割网络&#xff0c;增强早期疾病检测 提出背景前人工作医学对象分割微小医学对象分割注意力机制 SvANet 结构图SvANet 解法拆解解法逻辑链 论文&#xff1a;SvANet: A Scale-variant Attention-based Network for Small Medical Object Segmen…

中职网络安全B模块渗透测试server2003

通过本地PC中渗透测试平台Kali对服务器场景Windows进⾏系统服务及版本扫描渗透测 试&#xff0c;并将该操作显示结果中Telnet服务对应的端⼝号作为FLAG提交 使用nmap扫描发现目标靶机开放端口232疑似telnet直接进行连接测试成功 Flag&#xff1a;232 通过本地PC中渗透测试平台…

【Lora模型推荐】Stable Diffusion创作具有玉石翡翠质感的图标设计

站长素材AI教程是站长之家旗下AI绘图教程平台 海量AI免费教程&#xff0c;每日更新干货内容 想要深入学习更多AI绘图教程&#xff0c;请访问站长素材AI教程网&#xff1a; AI教程_深度学习入门指南 - 站长素材 (chinaz.com) logo版权归各公司所有&#xff01;本笔记仅供AIGC…

基于stm32+小程序开发智能家居门禁系统-硬件-软件实现

视频演示&#xff1a; 基于stm32智能家居门禁系统小程序开发项目 视频还有添加删除卡号&#xff0c;添加删除指纹&#xff0c;关闭继电器电源等没有演示。 代码Git&#xff1a; https://github.com/Abear6666/stm32lock 总体功能&#xff1a; 本门禁系统主要解锁功能分别为卡…

android13 设置左右分屏修改为单屏幕,应用分屏改为单屏

总纲 android13 rom 开发总纲说明 目录 1.前言 2.系统设置实现分析 3. 设置修改 4.编译与验证 5.猜测 6.彩蛋 1.前言 android13中,系统设置变成,左边是一级菜单,右侧是二级菜单, 这样跟我们以前android7/8/9的布局是不一样的,我们需要将它修改为一级菜单,点进去…

mysql 5.7.44 32位 zip安装

前言 因为研究别人代码&#xff0c;他使用了5.7的 32位 mysql &#xff0c;同时最新的 8.4 64位 mysql 不能用官方lib连接。所以安装这个版本使用&#xff0c;期间有些坑&#xff0c;在这里记录一下。 下载路径 mysql官方路径&#xff1a;https://downloads.mysql.com/archi…

Unity如何查找两个transform最近的公共parent

查找两个子对象最近的父对象 一、问题背景二、解决方案思路核心算法代码 三、总结 一、问题背景 最近看到个关于Unity的问题&#xff1a;在Hierarchy面板中的游戏对象&#xff0c;给定两个子物体transform对象&#xff0c;如何查找这两个transform最近的公共父级parent。感觉挺…

从 ArcMap 迁移到 ArcGIS Pro

许多 ArcMap 用户正在因 ArcGIS Pro 所具有的现代 GIS 桌面工作流优势而向其迁移。 ArcGIS Pro 与其余 ArcGIS 平台紧密集成&#xff0c;使您可以更有效地共享和使用内容。 它还将 2D 和 3D 组合到一个应用程序中&#xff0c;使您可以在同一工程中使用多个地图和多个布局。 Arc…

Linux桌面溯源

X窗口系统(X Window System) Linux起源于X窗口系统&#xff08;X Window System&#xff09;&#xff0c;亦即常说的X11&#xff0c;因其版本止于11之故。 X窗口系统&#xff08;X Window System&#xff0c;也常称为X11或X&#xff09;是一种以位图方式显示的软件窗口系统。…

保姆级教你如何在大学期间获得自己的一项个人软著(1)

注册与实名认证 1. 注册与实名认证 已注册和实名认证 or 直接使用组织账号 进行软著申请的&#xff0c;可以跳过这部分 1.1 注册 登录中国版权保护中心 中国版权登记业务平台 点击右上角的用户中心 点击立即注册 选择个人身份进行注册 返回登记页面中国版权登记业务平台…

【教程】Hexo 部署到 Github Page 后,自定义域名失效的问题

目录 前言&问题描述解决方案细节 前言&问题描述 近期给 Github Page 上托管的静态网站映射了自定义域名&#xff08;aiproducthome.top&#xff09;&#xff0c;之后发现每次更新并部署 hexo 到 Github Page &#xff08;hexo d&#xff09;后就会出现自定义域名失效的…

FDL与Kettle功能对比分析之定时任务DDL

开发者在进行数据处理任务时&#xff0c; 一旦源数据库的表结构发生变化&#xff0c;而目标数据库没有及时进行同步&#xff0c;就会导致任务执行失败。DDL同步就是用来解决这一问题&#xff0c;它会自动识别源表结构变化&#xff0c;并及时更新到目标数据库中&#xff0c;保障…

使用 Python OpenCV 创建图像到卡通转换器

https://pyseek.com/2022/07/image-to-cartoon-converter-in-python/ 一、说明 你有没有试过把自己的照片转换成卡通画&#xff1f;顺便说一句&#xff0c;这不是开玩笑。很多人喜欢把他们的照片变成卡通画并在社交媒体上分享。就连我自己也多次尝试过这种技术。有很多在线工具…