日历插件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

一、下载

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

$(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);}}