react使用Fullcalendar 实战用法

使用步骤请参考：react使用Fullcalendar

卡片式的日历：

需求图：
需求图
卡片式的日历，其实我是推荐 antd的，我两个都写了一下都能实现。

antd 的代码：

antd的我直接用的官网示例：antd 日历示例

import React, { useEffect, useState, useRef } from 'react';
import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
import "./index.less"
import moment from 'moment';
const ProductFullcalendar = () => {const [currentDate, setCurrentDate] = useState(moment()); //当前日期const onPanelChange = (value, mode) => {console.log(value.format('YYYY-MM-DD'), mode);};return (<div className='vv'>产品日历<Calendarfullscreen={false}onPanelChange={onPanelChange}dateFullCellRender={(current) => {let currentDate1 = moment(current).format('YYYY-MM-DD');let selectDate = currentDate.format('YYYY-MM-DD');if (currentDate1 === selectDate) {return <div className='dateCell selected'><div className='date_select'>{moment(current).format('DD')}</div><div className='event_select'></div></div>} else {return <div className='dateCell'><div className='date'>{moment(current).format('DD')}</div></div>}}}onSelect={(date) => {setCurrentDate(date);}}/></div>)
};
export default ProductFullcalendar;

less:

.vv {.ant-picker-cell {color: rgba(0, 0, 0, 0.3);}.ant-picker-cell-in-view {color: rgba(0, 0, 0, 0.87);}.selected {background: #3D57B1;box-shadow: 0px 2px 6px 0px rgba(33, 77, 208, 0.36);border-radius: 8px;.date_select {font-family: Avenir, Avenir;font-weight: 500;font-size: 20px;color: #FFFFFF;}.event_select{width: 6px;height: 6px;background: #FFFFFF;border-radius: 50%;}}.dateCell {width: 48px;height: 55px;border-radius: 8px;margin: 0 auto;display: flex;align-items: center;justify-content: center;flex-direction: column;.date {font-family: Avenir, Avenir;font-weight: 500;font-size: 20px;}.event{width: 6px;height: 6px;background: red;border-radius: 50%;}}
}

@fullcalendar/react的代码:

它需要处理的东西很多，点击上个月的日期时，需要自己跳到上一个月。

import React, { useEffect, useState, useRef } from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"
import "./index.less"
const ProductFullcalendar = () => {const [currentDate, setCurrentDate] = useState(); //当前日期// 创建一个 ref 来存储 FullCalendar 的实例  const calendarRef = useRef(null);const renderEventContent = (eventInfo) => {return <div className='kk'></div>}const events = [{ title: '', start: new Date(2024, 10, 1) }]const dayCellContent = (data) => {console.log(data, currentDate, "908777");let dayDate = data.dayNumberText.replace("日", "");let isToday = data.isToday;//是不是当月的日期let isOther = data.isOther;return <div className='dayCellContent'><div className={'dayDate'}>{dayDate}</div></div>}return (<div className='vv'>产品日历<FullCalendarref={calendarRef}plugins={[dayGridPlugin, interactionPlugin]}initialView='dayGridMonth'events={events}eventContent={renderEventContent}dayCellClassNames={"dayCell"}locale='zh-cn'// 设置语言selectable={true}dateClick={(info) => {document.querySelectorAll('.fc-day.selected').forEach(function (el) {el.classList.remove('selected');});const clickedDate = info.date;//console.log(calendarRef.current.getApi()?.getDate(),calendarRef,"987")const currentViewDate = calendarRef?.current?.getApi()?.getDate(); // 获取当前视图的日期// 判断是否为同一月份if (clickedDate.getMonth() !== currentViewDate.getMonth() ||clickedDate.getFullYear() !== currentViewDate.getFullYear()) {// 如果不是当月日期，则切换到点击的月份calendarRef?.current?.getApi()?.gotoDate(clickedDate);}// calendarRef?.current?.getApi()?.refetchEvents(); // 刷新事件setTimeout(() => {info.dayEl.classList.add('selected');})}}dayHeaderClassNames={"dayHeader"}dayHeaderContent={(arg) => {// 自定义星期内容const days = ['日', '一', '二', '三', '四', '五', '六']; // 星期的中文表示return days[arg.date.getDay()]; // 获取对应星期的中文名称}}dayCellContent={(data) => {return dayCellContent;}}/></div>)
};
export default ProductFullcalendar;

less代码:

.vv {--fc-border-color: none;--fc-highlight-color: none;--fc-today-bg-color: none;//日历总高度 包括 toolBar 和日历内容--fc-daygrid-height: 390px;// 单元格内容宽度 我自定义的// 单元格内容宽度 我自定义的--fc-daygrid-day-frame-width: 48px;// 单元格内容高度 我自定义的--fc-daygrid-day-frame-height: 55px;.fc-media-screen {height: var(--fc-daygrid-height);}.fc-header-toolbar {margin-bottom: 12px;}a {color: initial;}.fc-daygrid-day-events {min-height: 0 !important;}.dayCell {--fc-border-color: none;width: var(--fc-daygrid-day-frame-width);.fc-daygrid-day-frame {width: var(--fc-daygrid-day-frame-width);height: var(--fc-daygrid-day-frame-height);border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin: 0 auto;}}.fc-theme-standard th {border-bottom: 1px solid #F0F0F0;}}.dayHeader {font-weight: 400;font-size: 14px;color: rgba(0, 0, 0, 0.54) !important;width: var(--fc-daygrid-day-frame-width);
}.kk {width: 6px;height: 6px;background: #FF7D7D;border-radius: 50%;
}.fc-day-other {color: rgba(0, 0, 0, 0.3);
}.fc-daygrid-day {color: rgba(0, 0, 0, 0.87);
}.dayCellContent {display: flex;align-items: center;justify-content: center;flex-direction: column;line-height: 20px;.dayDate {font-family: Avenir, Avenir;font-weight: 800;font-size: 20px;}.dayEvent {margin-top: 2px;.dayEventItem {width: 6px;height: 6px;background: #4982F3;border-radius: 50%;}}}.selected {width: var(--fc-daygrid-day-frame-width);.fc-daygrid-day-frame {width: var(--fc-daygrid-day-frame-width);height: var(--fc-daygrid-day-frame-height);border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-direction: column;margin: 0 auto;background: #3D57B1;box-shadow: 0px 2px 6px 0px rgba(33, 77, 208, 0.36);.fc-daygrid-day-events {.kk {width: 6px;height: 6px;background: #FFFFFF;border-radius: 50%;}}.dayCellContent {display: flex;align-items: center;justify-content: center;flex-direction: column;.dayDate {font-family: Avenir, Avenir;font-weight: 800;font-size: 20px;color: #FFFFFF;}.dayEvent {margin-top: 2px;}}}
}

antd官网代码：

import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
import React from 'react';
const App = () => {const onPanelChange = (value, mode) => {console.log(value.format('YYYY-MM-DD'), mode);};return (<div className="site-calendar-customize-header-wrapper"><Calendarfullscreen={false}headerRender={({ value, type, onChange, onTypeChange }) => {const start = 0;const end = 12;const monthOptions = [];const current = value.clone();const localeData = value.localeData();const months = [];for (let i = 0; i < 12; i++) {current.month(i);months.push(localeData.monthsShort(current));}for (let i = start; i < end; i++) {monthOptions.push(<Select.Option key={i} value={i} className="month-item">{months[i]}</Select.Option>,);}const year = value.year();const month = value.month();const options = [];for (let i = year - 10; i < year + 10; i += 1) {options.push(<Select.Option key={i} value={i} className="year-item">{i}</Select.Option>,);}return (<divstyle={{padding: 8,}}><Typography.Title level={4}>Custom header</Typography.Title><Row gutter={8}><Col><Radio.Groupsize="small"onChange={(e) => onTypeChange(e.target.value)}value={type}><Radio.Button value="month">Month</Radio.Button><Radio.Button value="year">Year</Radio.Button></Radio.Group></Col><Col><Selectsize="small"dropdownMatchSelectWidth={false}className="my-year-select"value={year}onChange={(newYear) => {const now = value.clone().year(newYear);onChange(now);}}>{options}</Select></Col><Col><Selectsize="small"dropdownMatchSelectWidth={false}value={month}onChange={(newMonth) => {const now = value.clone().month(newMonth);onChange(now);}}>{monthOptions}</Select></Col></Row></div>);}}onPanelChange={onPanelChange}/></div>);
};
export default App;

正常日历 antd 和 Fullcalendar 都行：

我的需求是：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/98d2aad49f5c407dae7b53d630ae7c7a.png
我直接用的@fullcalendar/react 因为我的和它基本功能完全一致。具体怎么选看自己。

官网的demo效果:
在这里插入图片描述
我的需求：
在这里插入图片描述

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

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

相关文章

Flutter 正在切换成 Monorepo 和支持 workspaces

Flutter 正在切换成 Monorepo 和支持 workspaces

其实关于 Monorepo 和 workspaces 相关内容在之前《Dart 3.5 发布&#xff0c;全新 Dart Roadmap Update》 和 《Flutter 之 ftcon24usa 大会&#xff0c;创始人分享 Flutter 十年发展史》 就有简单提到过&#xff0c;而目前来说刚好看到 flaux 这个新进展&#xff0c;所以就再…
阅读更多...
在做题中学习（74）：比较含退格的字符串

在做题中学习（74）：比较含退格的字符串

解法&#xff1a;用栈来模拟 思路&#xff1a;不用真的定义一个栈,用字符串string来模拟栈的行为 入栈&#xff1a;s[i] ! #时 push_back(s[i]) 出栈:s[i] # 的时候&#xff0c;并且s.size() > 0&#xff0c;pop_back(s[i])循环结束得到结果 注意&#xff1a;如果真的…
阅读更多...
前后端交互通用排序策略

前后端交互通用排序策略

目录 排序场景 排序实现思路 1. 静态代码排序实现 2.数据库驱动排序实现 3. 基于Java反射的动态排序实现 通用排序工具 SortListUtil 结语 排序场景 在面向前端数据展示的应用场景中&#xff0c;我们旨在实现一个更加灵活的排序机制&#xff0c;该机制能够支持对从后端传递…
阅读更多...
MD5（Crypto）

MD5（Crypto）

解题思路 打开文件发现一串代码&#xff0c;结合题目提示&#xff0c;应该是 MD5 加密。 找个在线的 MD5 解密网站&#xff0c;行云流水得到 flag。 题目设计原理 题目设计&#xff1a;无他&#xff0c;MD5 加密。 题目原理&#xff1a; MD5&#xff08;Message-Digest Algo…
阅读更多...
跟李沐学AI：BERT

跟李沐学AI：BERT

什么是NLP中的迁移学习 使用预训练好的模型来抽取词、句子的特征&#xff1a;Word2Vec或者预训练好的语言模型。 使用预训练好的语言模型&#xff0c;一般不会再对语言模型进行微调&#xff0c;即不进行更新。 Word2Vec一般用于替代embedding层 但是Word2Vec往往忽略了时序…
阅读更多...
单元/集成测试解决方案

单元/集成测试解决方案

在项目开发的前期针对软件单元/模块功能开展单元/集成测试&#xff0c;可以尽早地发现软件Bug&#xff0c;避免将Bug带入系统测试阶段&#xff0c;有效地降低HIL测试的测试周期&#xff0c;也能有效降低开发成本。单元/集成测试旨在证明被测软件实现其单元/架构设计规范、证明被…
阅读更多...
C语言复习第9章 字符串/字符/内存函数

C语言复习第9章 字符串/字符/内存函数

目录 一、字符串函数1.1 读取字符串gets函数原型Example 1.2 字符串拷贝strcpy函数原型模拟实现官方源码 1.3 求字符串长度strlen函数原型关于返回值size_与算术转换的一个易错点模拟实现:递归模拟实现:指针-指针模拟实现:暴力官方源码 1.4 字符串追加strcat函数原型注意自己给…
阅读更多...
WPF 特性------Binding

WPF 特性------Binding

工业控制中&#xff0c;经常会需要把一个bool 型输入信号的状态显示在面板上&#xff0c;使用wpf 绑定的办法&#xff0c;可简洁实现&#xff1a; 实现步骤&#xff1a; 1&#xff0c;定义类&#xff1a; using System; using System.Collections.Generic; using System.Com…
阅读更多...
【MySQL】深层理解索引及特性（重点）--下（12）

【MySQL】深层理解索引及特性（重点）--下（12）

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …
阅读更多...
基于SpringBoot+微信小程序+协同过滤算法+二维码订单位置跟踪的农产品销售平台-新

基于SpringBoot+微信小程序+协同过滤算法+二维码订单位置跟踪的农产品销售平台-新

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; “农产品商城”小程序…
阅读更多...
C++ | Leetcode C++题解之第541题反转字符串II

C++ | Leetcode C++题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; class Solution { public:string reverseStr(string s, int k) {int n s.length();for (int i 0; i < n; i 2 * k) {reverse(s.begin() i, s.begin() min(i k, n));}return s;} };
阅读更多...
一个由Deno和React驱动的静态网站生成器

一个由Deno和React驱动的静态网站生成器

大家好&#xff0c;今天给大家分享一个由 Deno React 驱动的静态网站生成器Pagic。 项目介绍 Pagic 是一个由 Deno React 驱动的静态网站生成器。它配置简单&#xff0c;支持将 md/tsx 文件渲染成静态页面&#xff0c;而且还有大量的官方或第三方主题和插件可供扩展。 核心…
阅读更多...
如何才能实时监测Mac的运行状态

如何才能实时监测Mac的运行状态

实时监测Mac的运行状态&#xff0c;能够让我们更好的了解Mac的情况&#xff0c;因此如何才能监测Mac的运行状态很重要 State&#xff0c;实时监测你的Mac运行状态&#xff0c;能够直观的展示当前Mac的CPU、内存、硬盘、温度、风扇、网络信息以及开机时间等重要信息 除此之外&a…
阅读更多...
python之正则表达式总结

python之正则表达式总结

正则表达式 对于正则表达式的学习&#xff0c;我整理了网上的一些资料&#xff0c;希望可以帮助到各位&#xff01;&#xff01;&#xff01; 我们可以使用正则表达式来定义字符串的匹配模式&#xff0c;即如何检查一个字符串是否有跟某种模式匹配的部分或者从一个字符串中将与…
阅读更多...
练习LabVIEW第三十八题

练习LabVIEW第三十八题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十八题&#xff1a; 创建一个VI&#xff0c;实现对按钮状态的指示和按钮“按下”持续时间简单计算功能&#xff0c;按…
阅读更多...
众测遇到的一些案列漏洞

众测遇到的一些案列漏洞

文章中涉及的敏感信息均已做打码处理，文章仅做经验分享用途，切勿当真，未授权的攻击属于非法行为！文章中敏感信息均已做多层打码处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任，一旦造成后果请自行…
阅读更多...
C#：强大而优雅的编程语言

C#：强大而优雅的编程语言

在当今的软件开发领域&#xff0c;C#作为一种广泛应用的编程语言&#xff0c;以其强大的功能、优雅的语法和丰富的生态系统&#xff0c;受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面&#xff0c;展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…
阅读更多...
【OJ题解】在字符串中查找第一个不重复字符的索引

【OJ题解】在字符串中查找第一个不重复字符的索引

&#x1f4b5;个人主页: 起名字真南 &#x1f4b5;个人专栏:【数据结构初阶】 【C语言】 【C】 【OJ题解】 目录 1. 引言2. 题目分析示例&#xff1a; 3. 解题思路思路一&#xff1a;双重循环思路二&#xff1a;哈希表 4. C代码实现5. 代码详解6. 时间和空间复杂度分析7. 优化方…
阅读更多...
el-date-picker日期选择器动态设置日期

el-date-picker日期选择器动态设置日期

需求&#xff1a;选择开始时间&#xff0c;或者在开始时间已存在的情况下&#xff1b;结束时间下拉日期选择框展示从开始日期展示&#xff1b;而不是当前日期&#xff0c;并且结束时间下拉框日期要禁用开始时间之前的日期。 <el-form-item label"开始时间" prop&q…
阅读更多...
「C/C++」C/C++的区别

「C/C++」C/C++的区别

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023