优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。

先说需求,最近跟老板在一个工厂系统软件销售的PPT演示中看到一个工厂日历还挺不错,老板听完销售的讲解后,便提出要我去实现一个同款的应用到我们自己的系统上,于是就有下面这个,先上图先。
这是应用fullcalendar4.1最新版的插件做的一个 日程安排日历。
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第1张图片首先引入从官网下的js和css ,`
官网地址:官网


 












然后定义一个Div用初始化日历表格
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第2张图片
然后初始化并设置参数配置
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第3张图片具体参数配置说明可以参见官方文档添加链接描述

也有一些热心网友翻译的中文文档https://www.jb51.net/article/104841.htm 不过有些已经过时,建议参考官方。

再后面就是取值问题:这里要说明一下新版跟旧版的区别了
新旧版都是
都是有三种赋值方式:
第一种就是官方demo用的 数组形式 如下图
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第4张图片第二种:贴出官方的,官方是php后台,我自己也没用过,先不说
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第5张图片第三种:我用的最多的也是比较熟悉的通过Ajax
注意:这里区别跟坑就来了
先说旧版的:旧版的参数是有四个,是这样的:这个版本fullcalendar-3.5.1
优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第6张图片fullcalendar-3.5.1之前还有三个参数的,总之这里变化挺大的,不同的版本写错了js会报错。找不到这个函数之类的

下面说4.1版的这个,只有三个参数

优秀实用“日历日程”插件之fullcalendar4.1应用,4.1版较之前有很大区别,我把遇到的坑都写出来。_第7张图片
还有要注意新版的跟旧版的在一些点击事件的时候触发的那个函数也有不同,后面再贴出来。

这是全部jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>







 
    EchartDemo


    
    
 


















	

你可能感兴趣的:(优秀插件学习应用总结)