日历插件fullcalendar【前端】

04-23 1347阅读 0评论

日历插件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 日历插件中文说明文档


  
    
    
    
      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

# 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

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

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