行业知识
日历插件fullcalendar【前端】
2026-11-10 02:05:52
来源：互联网转载
日历插件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 日历插件中文说明文档
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth' }); calendar.render(); });页面就是这样的
示例-添加事件，删除事件
下载的解压包下，有一个selecttable.html文件
放到自己的新建的项目中，并改变这个js的地址
界面如下
点击某个日期，就会进行事件的添加操作
点击某个事件，就会对其进行删除操作
三、汉化
对于页面加入这个就可以了，
可以按照自己的要求，修改添加和删除的提示词
locale: 'zh', // 设置为中文 buttonText: { today: '今天', month: '月', week: '周', day: '日' },具体的文件
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 views selectable: 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 events events: events }); calendar.render(); }); // 函数用于添加新事件对象到事件数组中 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); body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } #calendar { max-width: 1100px; margin: 0 auto; }四、动态数据
fullcalendar.html
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 views selectable: 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 events events: events }); calendar.render(); }); body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } #calendar { max-width: 1100px; margin: 0 auto; }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中引入
2.环境搭建-后端搭建
SpringBoot项目
在一个fullcalendar包中完成代码，
如果要移植到其他项目直接拷贝这个包。
pom.xml
4.0.0 org.springframework.boot spring-boot-starter-parent 2.4.2 com.example test 0.0.1-SNAPSHOT test test 8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-devtools runtime true mysql mysql-connector-java runtime org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok
application.properties
# serverserver.port=8080# mysqlspring.datasource.url=jdbc:mysql://localhost:3306/fullcalendar?characterEncoding=utf-8&useSSL=false&serverTimezone=Hongkongspring.datasource.username=rootspring.datasource.password=rootspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver# pathjsss.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") @ResponseBody public String hello(){ return "hello"; }}测试hello
3.代码编写-前端代码
fullcalendar.html
更改了组件操作在请求完成后
html
//放到外部定义，全局变量 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 views selectable: 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 events events: events }); calendar.render(); }); body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } #calendar { max-width: 1100px; margin: 0 auto; }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存储数据
com.alibaba fastjson 1.2.73 org.springframework.boot spring-boot-starter-data-redis
entity.CalendarEvent
package com.example.fullcalendar.entity;import lombok.Data;import lombok.EqualsAndHashCode;import lombok.ToString;import java.util.Date;@Data@ToString@EqualsAndHashCodepublic class CalendarEvent { //标题 private String title; //是否全天 private Boolean allDay; //开始时间 private Date start; //结束时间 private Date end;}controller.FullCalendarController
刚开始是存储到内存中测试List 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 { @Autowired FullCalendarService fullCalendarService;// List list=new ArrayList(); @GetMapping("/list") @ResponseBody public ResponseModel list(){ String key="calendarEvents"; List list=fullCalendarService.list(key); return new ResponseModel(list); } @PostMapping("/add") @ResponseBody public ResponseModel add(@RequestBody CalendarEvent calendarEvent){// list.add(calendarEvent); String key="calendarEvents"; fullCalendarService.add(key,calendarEvent); return new ResponseModel("添加成功"); } @PostMapping("/remove") @ResponseBody public 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;@Servicepublic class FullCalendarService { @Autowired RedisTemplate redisTemplate; public List list(String key) { List 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
迎着日光月光星光，直面风霜雨霜雪霜。
上一篇：怎么查询宝塔面板帐号？
下一篇：女孩们英语怎么读音?
