日历插件fullcalendar【笔记】

2024-03-31 23:44
文章标签 笔记 插件 日历 fullcalendar

本文主要是介绍日历插件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

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

这篇关于日历插件fullcalendar【笔记】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/865677。

相关文章

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

系列文章目录 监督学习：参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归（SAheart.csv） 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
论文阅读笔记: Segment Anything

论文阅读笔记: Segment Anything

文章目录 Segment Anything摘要引言任务模型数据引擎数据集负责任的人工智能 Segment Anything Model图像编码器提示编码器mask解码器解决歧义损失和训练 Segment Anything 论文地址: https://arxiv.org/abs/2304.02643 代码地址:https://github.com/facebookresear
阅读更多...
数学建模笔记—— 非线性规划

数学建模笔记—— 非线性规划

数学建模笔记—— 非线性规划 非线性规划1. 模型原理1.1 非线性规划的标准型1.2 非线性规划求解的Matlab函数 2. 典型例题3. matlab代码求解3.1 例1 一个简单示例3.2 例2 选址问题1. 第一问 线性规划2. 第二问 非线性规划 非线性规划 非线性规划是一种求解目标函数或约束条件中有一个或几个非线性函数的最优化问题的方法。运筹学的一个重要分支。2
阅读更多...
【C++学习笔记 20】C++中的智能指针

【C++学习笔记 20】C++中的智能指针

智能指针的功能 在上一篇笔记提到了在栈和堆上创建变量的区别，使用new关键字创建变量时，需要搭配delete关键字销毁变量。而智能指针的作用就是调用new分配内存时，不必自己去调用delete，甚至不用调用new。 智能指针实际上就是对原始指针的包装。 unique_ptr 最简单的智能指针，是一种作用域指针，意思是当指针超出该作用域时，会自动调用delete。它名为unique的原因是这个
阅读更多...
查看提交历史 —— Git 学习笔记 11

查看提交历史 —— Git 学习笔记 11

查看提交历史 查看提交历史 不带任何选项的git log-p选项--stat 选项--pretty=oneline选项--pretty=format选项git log常用选项列表参考资料 在提交了若干更新，又或者克隆了某个项目之后，你也许想回顾下提交历史。 完成这个任务最简单而又有效的 工具是 git log 命令。 接下来的例子会用一个用于演示的 simplegit
阅读更多...
记录每次更新到仓库 —— Git 学习笔记 10

记录每次更新到仓库 —— Git 学习笔记 10

记录每次更新到仓库 文章目录 文件的状态三个区域检查当前文件状态跟踪新文件取消跟踪（un-tracking）文件重新跟踪（re-tracking）文件暂存已修改文件忽略某些文件查看已暂存和未暂存的修改提交更新跳过暂存区删除文件移动文件参考资料 咱们接着很多天以前的 取得Git仓库 这篇文章继续说。 文件的状态 不管是通过哪种方法，现在我们已经有了一个仓库，并从这个仓
阅读更多...
忽略某些文件 —— Git 学习笔记 05

忽略某些文件 —— Git 学习笔记 05

忽略某些文件 忽略某些文件 通过.gitignore文件其他规则源如何选择规则源参考资料 对于某些文件，我们不希望把它们纳入 Git 的管理，也不希望它们总出现在未跟踪文件列表。通常它们都是些自动生成的文件，比如日志文件、编译过程中创建的临时文件等。 通过.gitignore文件 假设我们要忽略 lib.a 文件，那我们可以在 lib.a 所在目录下创建一个名为 .gi
阅读更多...
取得 Git 仓库 —— Git 学习笔记 04

取得 Git 仓库 —— Git 学习笔记 04

取得 Git 仓库 —— Git 学习笔记 04 我认为， Git 的学习分为两大块：一是工作区、索引、本地版本库之间的交互；二是本地版本库和远程版本库之间的交互。第一块是基础，第二块是难点。 下面，我们就围绕着第一部分内容来学习，先不考虑远程仓库，只考虑本地仓库。 怎样取得项目的 Git 仓库？ 有两种取得 Git 项目仓库的方法。第一种是在本地创建一个新的仓库，第二种是把其他地方的某个
阅读更多...
Git 的特点—— Git 学习笔记 02

Git 的特点—— Git 学习笔记 02

文章目录 Git 简史Git 的特点直接记录快照，而非差异比较近乎所有操作都是本地执行保证完整性一般只添加数据 参考资料 Git 简史 众所周知，Linux 内核开源项目有着为数众多的参与者。这么多人在世界各地为 Linux 编写代码，那Linux 的代码是如何管理的呢？事实是在 2002 年以前，世界各地的开发者把源代码通过 diff 的方式发给 Linus，然后由 Linus
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2