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

先说需求,最近跟老板在一个工厂系统软件销售的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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值