日历插件fullcalendar【前端】

日历插件fullcalendar【前端】

  • 前言
  • 版权
  • 开源
  • 推荐
  • 日历插件fullcalendar
    • 一、下载
    • 二、初次使用
      • 日历界面
      • 示例-添加事件,删除事件
    • 三、汉化
    • 四、动态数据
    • 五、前后端交互
      • 1.环境搭建-前端搭建
      • 2.环境搭建-后端搭建
      • 3.代码编写-前端代码
        • fullcalendar.html
        • fullcalendar.js
      • 4.代码编写-后端代码
        • entity.CalendarEvent
        • controller.FullCalendarController
        • service.FullCalendarService
  • 最后

前言

2024-3-31 16:09:01

以下内容源自《【前端】》
仅供学习交流使用

版权

禁止其他平台发布时删除以下此话
本文首次发布于CSDN平台
作者是CSDN@日星月云
博客主页是https://jsss-1.blog.csdn.net
禁止其他平台发布时删除以上此话

开源

日星月云 / 日历插件fullcalendar

jsss-1/calendar-plugin-fullcalendar

推荐

fullcalendar官网

FullCalendar插件的基本使用

FullCalendar 日历插件中文说明文档

日历插件fullcalendar

一、下载

https://fullcalendar.io/docs/initialize-globals

在这里插入图片描述

解压之后
在这里插入图片描述

二、初次使用

日历界面

在这里插入图片描述

下面这个代码是官网的代码,没有其他多的功能

如果要自己设计,需要参考中文说明文档。

FullCalendar 日历插件中文说明文档

<!DOCTYPE html>
<html lang='en'><head><meta charset='utf-8' /><script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script><script>document.addEventListener('DOMContentLoaded', function() {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {initialView: 'dayGridMonth'});calendar.render();});</script></head><body><div id='calendar'></div></body>
</html>

页面就是这样的
在这里插入图片描述

示例-添加事件,删除事件

下载的解压包下,有一个selecttable.html文件
在这里插入图片描述
放到自己的新建的项目中,并改变这个js的地址
在这里插入图片描述
界面如下

在这里插入图片描述

点击某个日期,就会进行事件的添加操作
在这里插入图片描述

点击某个事件,就会对其进行删除操作

在这里插入图片描述

三、汉化

对于页面加入这个就可以了,
可以按照自己的要求,修改添加和删除的提示词

   					 locale: 'zh', // 设置为中文buttonText: {today: '今天',month: '月',week: '周',day: '日'},

具体的文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><script src="./js/index.global.js"></script><script>let events = [{title: 'All Day Event',start: '2023-01-01'},{title: 'Long Event',start: '2023-01-07',end: '2023-01-10'},{title: 'Click for Google',url: 'http://google.com/',start: '2023-01-28'}];document.addEventListener('DOMContentLoaded', function () {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {locale: 'zh', // 设置为中文buttonText: {today: '今天',month: '月',week: '周',day: '日'},headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'},initialDate: '2023-01-12',navLinks: true, // can click day/week names to navigate viewsselectable: true,selectMirror: true,select: function (arg) {var title = prompt('事件标题:');if (title) {calendar.addEvent({title: title,start: arg.start,end: arg.end,allDay: arg.allDay})}calendar.unselect()},eventClick: function (arg) {if (confirm('你确定删除这个事件吗?')) {arg.event.remove()}},editable: true,dayMaxEvents: true, // allow "more" link when too many eventsevents: events});calendar.render();});</script><script>// 函数用于添加新事件对象到事件数组中function addEvent(title, start, end, url) {let newEvent = {title: title,start: start,end: end,url: url};events.push(newEvent);}// 调用函数添加新事件对象addEvent('New Event', '2023-02-15', '2023-02-17', 'http://example.com/');// 打印更新后的事件数组console.log(events);</script><style>body {margin: 40px 10px;padding: 0;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size: 14px;}#calendar {max-width: 1100px;margin: 0 auto;}</style></head><body><div id="calendar"></div></body>
</html>

在这里插入图片描述

四、动态数据

fullcalendar.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><script src="./js/index.global.js"></script><script>let events = [];document.addEventListener('DOMContentLoaded', function () {var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {locale: 'zh', // 设置为中文buttonText: {today: '今天',month: '月',week: '周',day: '日'},headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'},initialDate: new Date().toISOString().slice(0, 10),navLinks: true, // can click day/week names to navigate viewsselectable: true,selectMirror: true,select: function (arg) {var title = prompt('事件标题:');if (title) {let newEvent = {title: title,allDay: arg.allDay,start: arg.start,end: arg.end};calendar.addEvent(newEvent);addEvent(newEvent);}calendar.unselect()},eventClick: function (arg) {if (confirm('你确定删除这个事件吗?')) {arg.event.remove();removeEvent(arg.event);}},editable: true,dayMaxEvents: true, // allow "more" link when too many eventsevents: events});calendar.render();});</script><style>body {margin: 40px 10px;padding: 0;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size: 14px;}#calendar {max-width: 1100px;margin: 0 auto;}</style></head><body><div id="calendar"></div></body><script src="./js/fullcalendar.js"></script></html>

fullcalendar.js

// 函数用于添加新事件对象到事件数组中
function addEvent(newEvent) {events.push(newEvent);// console.log(events);}// 函数用于删除新事件对象到事件数组中
function removeEvent(e) {events = events.filter(event => event == e);// console.log(events);}

五、前后端交互

使用的是前后端分离

1.环境搭建-前端搭建

加入bootstrap,jQuery这些js文件

新建一个fullcalendar文件夹,
如果要移植到其他项目直接拷贝这个文件夹。

在这里插入图片描述

编写一个common.js,作为之后ajax发送请求的地址

/*** 服务端PATH*/
var SERVER_PATH = "http://127.0.0.1:8080";

新建一个fullcalendar.js,之后在这里编写和后端交互的代码

// 函数用于添加新事件对象到事件数组中
function addEvent(newEvent) {events.push(newEvent);// console.log(events);}// 函数用于删除新事件对象到事件数组中
function removeEvent(e) {events = events.filter(event => event == e);// console.log(events);}

在fullcalendar.html中引入

    <script src="../bootstrap/js/jquery-3.5.1.min.js"></script><script src="../bootstrap/js/bootstrap.min.js"></script><script src="../js/common.js"></script><script src="./js/fullcalendar.js"></script>

2.环境搭建-后端搭建

SpringBoot项目

在一个fullcalendar包中完成代码,
如果要移植到其他项目直接拷贝这个包。

在这里插入图片描述

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.2</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>test</artifactId><version>0.0.1-SNAPSHOT</version><name>test</name><description>test</description><properties><java.version>8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><!--        mysql 依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

application.properties

# server
server.port=8080# mysql
spring.datasource.url=jdbc:mysql://localhost:3306/fullcalendar?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkong
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver# path
jsss.web.path=http://127.0.0.1:5500

fullcalendar.controller.FullCalendarController

package com.example.fullcalendar.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
@RequestMapping("/fullcalendar")
@CrossOrigin(origins = "${jsss.web.path}", allowedHeaders = "*", allowCredentials = "true")
public class FullCalendarController {@GetMapping("/hello")@ResponseBodypublic String hello(){return "hello";}}

测试hello
在这里插入图片描述

3.代码编写-前端代码

fullcalendar.html

更改了组件操作在请求完成后

html

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><script src="./js/index.global.js"></script><script>//放到外部定义,全局变量var calendar;let events = [];document.addEventListener('DOMContentLoaded', function () {var calendarEl = document.getElementById('calendar');calendar = new FullCalendar.Calendar(calendarEl, {locale: 'zh', // 设置为中文buttonText: {today: '今天',month: '月',week: '周',day: '日'},headerToolbar: {left: 'prev,next today',center: 'title',right: 'dayGridMonth,timeGridWeek,timeGridDay'},initialDate: new Date().toISOString().slice(0, 10),navLinks: true, // can click day/week names to navigate viewsselectable: true,selectMirror: true,select: function (arg) {var title = prompt('事件标题:');if (title) {let newEvent = {title: title,allDay: arg.allDay,start: arg.start,end: arg.end};// 请求中调用// calendar.addEvent(newEvent);addEvent(calendar,newEvent);}calendar.unselect()},eventClick: function (arg) {if (confirm('你确定删除这个事件吗?')) {// 请求中调用// arg.event.remove();removeEvent(arg,arg.event);}},editable: true,dayMaxEvents: true, // allow "more" link when too many eventsevents: events});calendar.render();});</script><style>body {margin: 40px 10px;padding: 0;font-family: Arial, Helvetica Neue, Helvetica, sans-serif;font-size: 14px;}#calendar {max-width: 1100px;margin: 0 auto;}</style></head><body><div id="calendar"></div></body><script src="../bootstrap/js/jquery-3.5.1.min.js"></script><script src="../bootstrap/js/bootstrap.min.js"></script><script src="../js/common.js"></script><script src="./js/fullcalendar.js"></script></html>
fullcalendar.js

js

$(document).ready(function () {$.ajax({type: "GET",url: SERVER_PATH + "/fullcalendar/list",xhrFields: {withCredentials: true},success: function (result) {if (result.status) {alertBox(result.data.message);return false;}result.data.forEach(function(e) {calendar.addEvent(e);//外部的全局变量events.push(e);});// console.log(events);}});});// 函数用于添加新事件对象到事件数组中
function addEvent(calendar,newEvent) {$.ajax({type: "POST",url: SERVER_PATH + "/fullcalendar/add",contentType: 'application/json',data: JSON.stringify(newEvent),xhrFields: {withCredentials: true},success: function (result) {if (result.status) {alertBox(result.data.message);return false;}calendar.addEvent(newEvent);events.push(newEvent);// console.log(events);}});}// 函数用于删除新事件对象到事件数组中
function removeEvent(arg,e) {let remove = {title: e.title,allDay: e.allDay,start: e.start,end: e.end};$.ajax({type: "POST",url: SERVER_PATH + "/fullcalendar/remove",contentType: 'application/json',data: JSON.stringify(remove),xhrFields: {withCredentials: true},success: function (result) {if (result.status) {alertBox(result.data.message);return false;}arg.event.remove();events = events.filter(event => event == e);// console.log(events);}});}

4.代码编写-后端代码

在这里插入图片描述

使用Redis存储数据

        <!--        fastjson 依赖--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.73</version></dependency><!--        redis 依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency>
entity.CalendarEvent

在这里插入图片描述

package com.example.fullcalendar.entity;import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.ToString;import java.util.Date;@Data
@ToString
@EqualsAndHashCode
public class CalendarEvent {//标题private String title;//是否全天private Boolean allDay;//开始时间private Date start;//结束时间private Date end;}
controller.FullCalendarController

刚开始是存储到内存中测试List<CalendarEvent> list=new ArrayList<>();
持久化到数据库或者Redis中

package com.example.fullcalendar.controller;import com.example.common.ResponseModel;
import com.example.fullcalendar.entity.CalendarEvent;
import com.example.fullcalendar.service.FullCalendarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/fullcalendar")
@CrossOrigin(origins = "${jsss.web.path}", allowedHeaders = "*", allowCredentials = "true")
public class FullCalendarController {@AutowiredFullCalendarService fullCalendarService;//    List<CalendarEvent> list=new ArrayList<>();@GetMapping("/list")@ResponseBodypublic ResponseModel list(){String key="calendarEvents";List<CalendarEvent> list=fullCalendarService.list(key);return new ResponseModel(list);}@PostMapping("/add")@ResponseBodypublic ResponseModel add(@RequestBody CalendarEvent calendarEvent){
//        list.add(calendarEvent);String key="calendarEvents";fullCalendarService.add(key,calendarEvent);return new ResponseModel("添加成功");}@PostMapping("/remove")@ResponseBodypublic ResponseModel remove(@RequestBody CalendarEvent calendarEvent){
//        list.remove(calendarEvent);String key="calendarEvents";fullCalendarService.remove(key,calendarEvent);return new ResponseModel("删除成功");}}
service.FullCalendarService
package com.example.fullcalendar.service;import com.example.fullcalendar.entity.CalendarEvent;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class FullCalendarService {@AutowiredRedisTemplate redisTemplate;public List<CalendarEvent> list(String key) {List<CalendarEvent> calendarEvents = redisTemplate.opsForList().range(key, 0, -1);return calendarEvents;}public void add(String key,CalendarEvent calendarEvent) {redisTemplate.opsForList().rightPush(key, calendarEvent);}public void remove(String key,CalendarEvent calendarEvent) {redisTemplate.opsForList().remove(key, 0, calendarEvent);}}

最后

2024-3-31 21:02:47

迎着日光月光星光,直面风霜雨霜雪霜。

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

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

相关文章

【realme x2手机解锁BootLoader(简称BL)】

realme手机解锁常识 https://www.realme.com/cn/support/kw/doc/2031665 realme手机解锁支持型号 https://www.realmebbs.com/post-details/1275426081138028544 realme x2手机解锁实践 参考&#xff1a;https://www.realmebbs.com/post-details/1255473809142591488 1 下载apk…

【yolov5小技巧(1)】---可视化并统计目标检测中的TP、FP、FN

文章目录 &#x1f680;&#x1f680;&#x1f680;前言一、1️⃣相关名词解释二、2️⃣论文中案例三、3️⃣新建相关文件夹四、4️⃣detect.py推理五、5️⃣开始可视化六、6️⃣可视化结果分析 &#x1f440;&#x1f389;&#x1f4dc;系列文章目录 嘻嘻 暂时还没有~~~~ &a…

windows上配置Redis主从加哨兵模式实现缓存高可用

一、哨兵模式 哨兵&#xff08;sentinel&#xff09;是Redis的高可用性(High Availability)的解决方案&#xff1a;由一个或多个sentinel实例组成sentinel集群可以监视一个或多个主服务器和多个从服务器。当主服务器进入下线状态时&#xff0c;sentinel可以将该主服务器下的某…

R语言中的常用数据结构

目录 R对象的基本类型 R对象的属性 R的数据结构 向量 矩阵 数组 列表 因子 缺失值NA 数据框 R的数据结构总结 R语言可以进行探索性数据分析&#xff0c;统计推断&#xff0c;回归分析&#xff0c;机器学习&#xff0c;数据产品开发 R对象的基本类型 R语言对象有五…

拯救者Legion R9000X 2021(82HN)原装出厂Win10系统镜像ISO下载

lenovo联想拯救者笔记本R9000X 2021款原厂Windows10系统安装包&#xff0c;恢复出厂开箱状态预装OEM系统 链接&#xff1a;https://pan.baidu.com/s/1tx_ghh6k0Y9vXBz-7FEQng?pwd7mih 提取码&#xff1a;7mih 原装出厂系统自带所有驱动、出厂主题壁纸、系统属性联机支持标…

法律行业案例法模型出现,OPenAI公布与法律AI公司Harvey合作案例

Harvey与OpenAl合作&#xff0c;为法律专业人士构建了一个定制训练的案例法模型。该模型是具有复杂推理广泛领域知识以及超越单一模型调用能力的任务的AI系统&#xff0c;如起草法律文件、回答复杂诉讼场景问题以及识别数百份合同之间的重大差异。 Harvey公司由具有反垄断和证…

Git的简单入门使用

文章目录 拷贝项目的步骤创建项目的步骤提交项目或项目文件的步骤恢复项目文件的步骤 拷贝项目的步骤 找到需要用来存放项目的文件夹&#xff1b;在文件夹页面空白处右键点击&#xff0c;然后再菜单中选择“Open Git Bash here”。在Github上找到需要进行拷贝的项目&#xff0…

CVAE——生成0-9数字图像(Pytorch+mnist)

1、简介 CVAE&#xff08;Conditional Variational Autoencoder&#xff0c;条件变分自编码器&#xff09;是一种变分自编码器&#xff08;VAE&#xff09;的变体&#xff0c;用于生成有条件的数据。在传统的变分自编码器中&#xff0c;生成的数据是完全由潜在变量决定的&…

Rust---复合数据类型之枚举、数组

目录 枚举的使用Option 枚举数组的使用输出结果 枚举&#xff08;Enum&#xff09;&#xff1a;表示一个类型可以有多个不同的取值。枚举类型可以包含不同的变体&#xff08;variants&#xff09;&#xff0c;每个变体可以有不同的数据类型。 枚举的使用 enum Direction {Up,…

波士顿房价预测案例(python scikit-learn)---多元线性回归(多角度实验分析)

波士顿房价预测案例&#xff08;python scikit-learn&#xff09;—多元线性回归(多角度实验分析) 这次实验&#xff0c;我们主要从以下几个方面介绍&#xff1a; 一、相关框架介绍 二、数据集介绍 三、实验结果-优化算法对比实验&#xff0c;数据标准化对比实验&#xff0…

Head First Design Patterns -代理模式

什么是代理模式 代理模式为另一个对象提供替身或者占位符&#xff0c;以便控制客户对对象的访问&#xff0c;管理访问的方式有很多种。例如远程代理、虚拟代理、保护代理等。 远程代理&#xff1a;管理客户和远程对象之间的交互。 虚拟代理&#xff1a;控制访问实例化开销大的对…

算法基础--二分

&#x1f600;前言 二分查找是一种常见的算法技巧&#xff0c;通过不断缩小搜索范围&#xff0c;快速找到目标值的算法。在实际应用中&#xff0c;二分查找可以应用于有序数组中的查找、求上界、求下界等问题&#xff0c;具有较高的效率和广泛的应用价值。 &#x1f3e0;个人主…

动手做一个最小Agent——TinyAgent!

Datawhale干货 作者&#xff1a;宋志学&#xff0c;Datawhale成员 前 言 大家好&#xff0c;我是不要葱姜蒜。在ChatGPT横空出世&#xff0c;夺走Bert的桂冠之后&#xff0c;大模型愈发地火热&#xff0c;国内各种模型层出不穷&#xff0c;史称“百模大战”。大模型的能力是毋…

字符分类函数

字符分类函数 C语言中有⼀系列的函数是专门做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。这些函数的使用都需要包含⼀个头文件是 ctype.h 这些函数的使用方法非常类似&#xff0c;我们就讲解⼀个函数的事情&#xff0c;其他的非常类似&#xff1a; int i…

图的应用解析

01&#xff0e;任何一个无向连通图的最小生成树(B )。 A.有一棵或多棵 B.只有一棵 C.一定有多棵 D.可能不存在 02.用Prim算法和Kruskal算法构造图的最小生成树&#xff0c…

内存和网卡压力测试

1.内存压力测试 1.1测试目的 内存压力测试的目的是评估开发板中的内存子系统性能和稳定性&#xff0c;以确保它能够满足特定的应用需求。开发板通常用于嵌入式系统、物联网设备、嵌入式智能家居等场景&#xff0c;这些场景对内存的要求通常比较高。 其内存压力测试的主要目的…

【深度学习】sdwebui的token_counter,update_token_counter,如何超出77个token的限制?对提示词加权的底层实现

文章目录 前言关于token_counter关于class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing)如何超出77个token的限制&#xff1f;对提示词加权的底层实现Overcoming the 77 token limit in diffusers方法1 手动拼方法2 compel 问询、帮助请看&#xff1a; 前言 …

动规训练2

一、最小路径和 1、题目解析 就是一个人从左上往做下走&#xff0c;每次只能往右或者往下&#xff0c;求他到终点时&#xff0c;路径上数字和最小&#xff0c;返回最小值 2、算法原理 a状态表示方程 小技巧&#xff1a;经验题目要求 用一个二维数组表示&#xff0c;创建一个…

Flask Python:数据库多条件查询,flask中模型关联

前言 在上一篇Flask Python:模糊查询filter和filter_by&#xff0c;数据库多条件查询中&#xff0c;已经分享了几种常用的数据库操作&#xff0c;这次就来看看模型的关联关系是怎么定义的&#xff0c;先说基础的关联哈。在分享之前&#xff0c;先分享官方文档,点击查看 从文档…

FreeRTOS中断管理以及实验

FreeRTOS中断管理以及实验 继续记录学习FreeRTOS的博客&#xff0c;参照正点原子FreeRTOS的视频。 ARM Cortex-M 使用了 8 位宽的寄存器来配置中断的优先等级&#xff0c;这个寄存器就是中断优先级配置寄存器 &#xff0c; STM32寄存器中并且这个寄存器只使用[7:4]&#xff0c…