当前位置：个人在线分享 > 日历插件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@日星月云
    博客主页是http://jsss-1.blog.csdn.net
    禁止其他平台发布时删除以上此话

    开源

    日星月云 / 日历插件fullcalendar

    jsss-1/calendar-plugin-fullcalendar

    推荐

    fullcalendar官网

    FullCalendar插件的基本使用

    FullCalendar 日历插件中文说明文档

    日历插件fullcalendar

    一、下载

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

    日历插件fullcalendar【前端】插图

    解压之后
    日历插件fullcalendar【前端】插图(1)

    二、初次使用

    日历界面

    日历插件fullcalendar【前端】插图(2)

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

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

    FullCalendar 日历插件中文说明文档

    <!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='http://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>

    页面就是这样的
    日历插件fullcalendar【前端】插图(3)

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

    下载的解压包下，有一个selecttable.html文件
    日历插件fullcalendar【前端】插图(4)
    放到自己的新建的项目中，并改变这个js的地址
    日历插件fullcalendar【前端】插图(5)
    界面如下

    日历插件fullcalendar【前端】插图(6)

    点击某个日期，就会进行事件的添加操作
    日历插件fullcalendar【前端】插图(7)

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

    日历插件fullcalendar【前端】插图(8)

    三、汉化

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

       					 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 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();
});
</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【前端】插图(9)

    四、动态数据

    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 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();
});
</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文件夹，
    如果要移植到其他项目直接拷贝这个文件夹。

    日历插件fullcalendar【前端】插图(10)

    编写一个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包中完成代码，
    如果要移植到其他项目直接拷贝这个包。

    日历插件fullcalendar【前端】插图(11)

    pom.xml

    
<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 http://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/> 
</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>

<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")
@ResponseBody
public String hello(){
return "hello";
}
}

    测试hello
    日历插件fullcalendar【前端】插图(12)

    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 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();
});
</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.代码编写-后端代码

    日历插件fullcalendar【前端】插图(13)

    使用Redis存储数据

            
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.73</version>
</dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
    entity.CalendarEvent

    日历插件fullcalendar【前端】插图(14)

    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 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<CalendarEvent> 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;
@Service
public class FullCalendarService {
@Autowired
RedisTemplate 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【前端】
    admin

    admin 钻石

    分享到：

    相关推荐

    E-->