先说需求，最近跟老板在一个工厂系统软件销售的PPT演示中看到一个工厂日历还挺不错，老板听完销售的讲解后，便提出要我去实现一个同款的应用到我们自己的系统上，于是就有下面这个，先上图先。
这是应用fullcalendar4.1最新版的插件做的一个 日程安排日历。
首先引入从官网下的js和css ，`
官网地址：官网
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link href='js/packages/core/main.css' rel='stylesheet' />
<link href='js/packages/daygrid/main.css' rel='stylesheet' />
<script src='js/packages/core/main.js'></script>
<script src='js/packages/interaction/main.js'></script>
<script src='js/packages/daygrid/main.js'></script>
<script src='js/packages/moment/main.min.js'></script>
<script type="text/javascript" src="js/lib/layer/2.4/layer.js"></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='js/packages/core/locales-all.js'></script>
然后定义一个Div用初始化日历表格
然后初始化并设置参数配置
具体参数配置说明可以参见官方文档添加链接描述
也有一些热心网友翻译的中文文档https://www.jb51.net/article/104841.htm 不过有些已经过时，建议参考官方。
再后面就是取值问题：这里要说明一下新版跟旧版的区别了
新旧版都是
都是有三种赋值方式：
第一种就是官方demo用的 数组形式 如下图
第二种：贴出官方的，官方是php后台，我自己也没用过，先不说
第三种：我用的最多的也是比较熟悉的通过Ajax
注意：这里区别跟坑就来了
先说旧版的：旧版的参数是有四个，是这样的：这个版本fullcalendar-3.5.1
fullcalendar-3.5.1之前还有三个参数的，总之这里变化挺大的，不同的版本写错了js会报错。找不到这个函数之类的
下面说4.1版的这个，只有三个参数
还有要注意新版的跟旧版的在一些点击事件的时候触发的那个函数也有不同，后面再贴出来。
这是全部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" %>
<c:set var="root" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EchartDemo</title>
<!-- 引入Bootstrap核心样式文件 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" >
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link href='js/packages/core/main.css' rel='stylesheet' />
<link href='js/packages/daygrid/main.css' rel='stylesheet' />
<script src='js/packages/core/main.js'></script>
<script src='js/packages/interaction/main.js'></script>
<script src='js/packages/daygrid/main.js'></script>
<script src='js/packages/moment/main.min.js'></script>
<script type="text/javascript" src="js/lib/layer/2.4/layer.js"></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
<script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
<script src='js/packages/core/locales-all.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
//contentHeight: 1000,
//defaultDate: '2019-05-12',
editable: true,
eventLimit: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
locale: 'zh-cn',
/* dateClick: function(info) {
alert('Clicked on: ' + info.dateStr);
alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
alert('Current view: ' + info.view.type);
// change the day's background color just for fun
info.dayEl.style.backgroundColor = 'red';
}, */
events: function(info, successCallback, failureCallback){
$.ajax({
type : "post",
url : '${pageContext.request.contextPath}/selectCalendarEvents.action',
data: {},
dataType: "json",
success : function(result) {
var events=[];
if (result) {
for (var i = 0; i < result.length; i++) {
var color = '#337ab7';
if (result[i].type=='2') {
color='#388E8E'
}
events.push({
title: result[i].event,
start: format(result[i].startDate),
color:color
});
}
}
successCallback(events);
}
});
},
eventClick: function(info) {
alert('今日事件: ' + info.event.title);
// change the border color just for fun
info.el.style.borderColor = 'red';
},
/* eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
} */
});
calendar.render();
});
function add0(m){return m<10?'0'+m:m }
function format(shijianchuo)
{
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d);
}
</script>
<!-- <script > +' '+add0(h)+':'+add0(mm)+':'+add0(s)
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
editable: true,
eventLimit: true,
navLinks: true,
locale: 'zh-cn',
businessHours: true,
events: function(start, end, timezone, callback){
$.ajax({
type : "get",
url : '${ctx}/static/jsondata/daysData.json',
success : function(data) {
callback(data);
}
});
},
dayClick: function(date, allDay, jsEvent, view) {
alert($.fullCalendar.formatDate(date, "YYYY-MM-DD"));
},
eventClick: function(event) {
alert(event.title);
}
});
});
</script> -->
<style>
body {
margin: 20px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
