fullcalendar 日程插件demo使用
2016-06-29 13:29
681 查看
效果图
HTML
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <%@ include file="../common/addEdit.jsp"%> <link rel="stylesheet" href="${ctx}/common/assets/plugins/fullcalendar/fullcalendar.css" /> <%-- <script src="${ctx}/common/assets/js/jquery-2.0.3.min.js"></script> --%> <script src="${ctx}/common/assets/plugins/fullcalendar/jquery-ui-1.10.2.custom.min.js"></script> <script src="${ctx}/common/assets/plugins/fullcalendar/fullcalendar.min.js"></script> <script src="${ctx}/common/demo_js/jquery.formautofill.min.js"></script> <script src="${ctx}/common/demo_js/fullcalendar_demo.js"></script> <script src="${ctx}/common/demo_js/commonUtil.js"></script> </head> <body> <div id="calendar" style="height: 750px;width: 950px;margin: 10px auto;"></div> <!-- style="display: none;" --> <div class="layer-hidden-line"> <form role="form" class="m-t-form" id="Form" > <input name="id" id="id" type="hidden" value=""> <div class="row"> <div class="col-xs-12 layer-condensed-case"> <div class="form-group"> <label for="classroomId"> 日程内容 </label> <span class="input-icon icon-left"> <input type="text" class="form-control" id="content" name="title" placeholder="请输入日程内容" data-required="true" data-descriptions="content" maxlength="50"> <i class="spl-icon-book-open"> </i> </span> </div> </div> </div> <div class="row"> <div class="col-xs-12 layer-condensed-case"> <div class="form-group"> <label for="classroomId"> 开始时间 </label> <span class="input-icon icon-left"> <input type="text" readonly="readonly" class="form-control date-picker-text" id="startTime" name="start" placeholder="请输入开始时间" data-required="true" data-descriptions="startTime" maxlength="50"> <i class="spl-icon-book-open"> </i> </span> </div> </div> </div> <div class="row" id="divEndTime" style="display: none;"> <div class="col-xs-12 layer-condensed-case"> <div class="form-group"> <label for="classroomId">结束时间</label> <span class="input-icon icon-left"> <input type="text" readonly="readonly" class="date-picker-text form-control" id="endTime" name="end" placeholder="请输入结束时间" maxlength="50"> <i class="spl-icon-book-open"> </i> </span> </div> </div> </div> <div class="row"> <div class="col-xs-12 layer-condensed-case"> <div class="form-group"> <label> <input type="checkbox" name="wholeChk" id="wholeChk" checked="checked" > <span class="text">全天</span> </label> <label> <input type="checkbox" name="endTimeChk" id="endTimeChk" onclick="changeState(this)" > <span class="text">结束时间</span> </label> </div> </div> </div> <div class="row margin-top-10"> <div class="col-xs-4 form-action-left" id="del" style="display: none;" onclick="del()"> <input type="button" value="删 除" class="btn btn-default btn-sm" /> </div> <div class="col-xs-4 form-action-left"> <input type="reset" value="重 置" class="btn btn-default btn-sm" /> </div> <div class="col-xs-4 form-action-right"> <input type="submit" value="提 交" class="btn btn-primary btn-sm" /> </div> </div> </form> </div> </body> </html>
JS
$(function(){ initFullCalendar(); initForm(); initDate(); }) //页面加载完初始化日历 var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var dataSource=[ { id:1, title: '全天计划写代码', start: '2016-06-09', }, { id:2, title: '张家界四日游', start: '2016-06-07', end: '2016-06-08', }, { id: 3, title: '电话回访客户', start: '2016-06-06', allDay: false }, { id: 4, title: '电话回访客户', start: '2016-06-05', allDay: false }, { id:5, title: 'qwrdsf', start: '2016-06-04', allDay: false }, { id:6, title: '中秋放假', start: '2016-06-17', end: '2016-06-19', }, { id:7, title: 'qwer', start: '2016-06-01', end: '2016-06-02', allDay: false }, { id:8, title: '生日聚会', start: '2016-06-11', end: '2016-06-12', allDay: false }, { id:9, title: '访问Helloweba主页', start: '2016-06-14', end: '2016-06-15', url: 'http://helloweba.com/' }, { id:10, title: '实战训练课', start: '2016-06-28', } ]; //选中事件 function changeState(dom){ if($(dom).prop("checked")){ $('#Form').parent().parent().css('height','400px'); $('#Form').parent().css('height','366px'); $("#divEndTime").show(); }else{ $('#Form').parent().parent().css('height','330px'); $('#Form').parent().css('height','296px'); $("#divEndTime").hide(); } } var addIndex; //打开弹出层 function openLayer(date){ $("#id").val(""); $("#del").hide(); $('#Form')[0].reset(); $('#endTimeChk').prop("checked",false); changeState('#endTimeChk'); $('#startTime').val(new Date(date).Format("yyyy-MM-dd hh:mm:ss")); addIndex=layer.open({ title : '<i class="fa fa-plus"></i> 新增日程', type : 1, fix : false, skin : 'layui-layer-rim', // 加上边框 area : [ '470px', '330px' ], // 宽高 content : $('#Form') }); } function openEditLayer(data){ $("#del").show(); $('#Form')[0].reset(); $('#endTimeChk').prop("checked",false); changeState('#endTimeChk'); $('#Form').autofill(data); $('#startTime').val(data.start.Format("yyyy-MM-dd hh:mm:ss")); $('#endTime').val(data.start.Format("yyyy-MM-dd hh:mm:ss")); /*$('#startTime').val(new Date(date).Format("yyyy-MM-dd hh:mm:ss"));*/ addIndex=layer.open({ title : '<i class="fa fa-plus"></i> 编辑日程', type : 1, fix : false, skin : 'layui-layer-rim', // 加上边框 area : [ '470px', '330px' ], // 宽高 content : $('#Form') }); } //关闭弹出层 function closeLayer(){ layer.close(addIndex); } //初始化日程视图 function initFullCalendar(){ $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true,//可以拖动 firstDay:1, timeFormat: 'H:mm', axisFormat: 'H:mm', events:urlRootContext + '/demo/getDataList.do',// dayClick: function(date, allDay, jsEvent, view) { //当单击日历中的某一天时,触发callback /*var views = $('#calendar').fullCalendar('getView'); */ console.log(date); openLayer(date); /*alert("The view's title is " + view.title); console.log(this); alert('a day has been clicked!'); */ }, eventClick:function(event, jsEvent, view){//当点击日历中的某一日程(事件)时,触发此操作 openEditLayer(event); console.log(this); }, eventMouseover:function (event, jsEvent, view){//鼠标划过的事件 console.log(event); },eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件 console.log(event); } }); } //进入下一个月视图 function next(){ $('#calendar').fullCalendar('next'); } //初始化表单 function initForm(){ $("#Form").mvalidate({ type: 1, onKeyup: true, sendForm: false, autoFocus: true, firstInvalidFocus: true, // 点击提交按钮时,表单通过验证触发函数 valid: function(event, options) { //根据自己的编辑添加业务保存数据,不需要参考一下方法,只需要参考我标注的两个方法; if($('#endTimeChk').prop("checked")){ if($('#endTime').val()==null||$('#endTime').val()==''){ layer.msg('<i class="spl-icon-volume-1"></i> 请选择结束时间'); return; } } var obj=$('#Form').serializeObject(); if($('#wholeChk').prop("checked")){ obj.allDay=true; delete obj.end; }else{ obj.allDay=false; } ///////////////////////////////////////// //方法二 编辑添加 if(obj.id==null||obj.id==''){ dataSource.push(obj); }else{ for (var i = 0; i < dataSource.length; i++) { if(dataSource[i].id==obj.id){ dataSource.splice(i,1,obj); } } } //自己写提交数据库数据,我这里是模拟提交数据 //读取的也是本地数据 var jsonStr=JSON.stringify(dataSource); $.ajax({//获取数据 type : "POST", url : urlRootContext + '/demo/addData.do', data:{jsonStr:jsonStr}, dataType : 'json', success : function(data) { // 方法一 // if(obj.id==null||obj.id==''){ // //数据入库之后调用一下方法 // $('#calendar').fullCalendar('renderEvent', obj, true); // }else{ // //数据入库之后调用一下方法 // $('#calendar').fullCalendar('updateEvent', obj); // } // 方法二 $('#calendar').fullCalendar('refetchEvents'); closeLayer(); layer.msg("获取数据成功", { time : 2000}); } }); }, // 点击提交按钮时,表单未通过验证触发函数 invalid: function(event, status, options) { }, // 点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域,是jquery对象 eachField: function(event, status, options) { }, eachValidField: function(val) {}, eachInvalidField: function(event, status, options) {}, conditional: { }, descriptions : { content : { required : '<i class="spl-icon-volume-1"></i> 请填写日程内容' }, startTime : { required : '<i class="spl-icon-volume-1"></i> 请选择开始时间' } } }); } //初始化datetimepicker日期控件 function initDate(){ $('#startTime,#endTime').datetimepicker({ timepicker : true, format : 'Y-m-d H:i:s', formatDate : 'Y-m-d' }); } function del(){ var id=$("#id").val(); for (var i = 0; i < dataSource.length; i++) { if(dataSource[i].id==id){ dataSource.splice(i,1); break; } } var jsonStr=JSON.stringify(dataSource); layer.confirm('您确定删除该日程吗?', function(){ $.ajax({//获取数据 type : "POST", url : urlRootContext + '/demo/addData.do', data:jsonStr, dataType : 'json', success : function(data) { closeLayer(); layer.msg("获取数据成功", { time : 2000}); ///////////////////////////////////////// //方法一 //$('#calendar').fullCalendar('removeEvents', id); ///////////////////////////////////////// //方法二 $('#calendar').fullCalendar('refetchEvents'); } }); }); }
java
java代码只是简单的增删改查,这里贴代码了;感谢大家阅读我的代码,有什么疑问,可以留言,我们讨论一下。
这里有不错的中文帮助文档:http://justcoding.iteye.com/blog/2028252
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- java自动生成验证码插件-kaptcha
- js数组实现图片轮播
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 加载flash9.ocx出现错误的解决方法
- jquery实现的代替传统checkbox样式插件
- 爆炸式的JS圆形浮动菜单特效代码
- 10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例