126 lines
4.5 KiB
Plaintext
126 lines
4.5 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp"%>
|
||
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>我的日程</title>
|
||
|
||
|
||
<style type="text/css">
|
||
#calendar{ margin:40px auto 10px auto;width:100%;height:50%;}
|
||
.fancy{width:450px; height:200px}
|
||
.fancy h3{height:30px; line-height:30px; border-bottom:1px solid #d3d3d3; font-size:14px}
|
||
.fancy form{padding:10px}
|
||
.fancy p{height:28px; line-height:28px; padding:4px; color:#999}
|
||
.input{height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3; width:100px}
|
||
.btn{-webkit-border-radius: 3px;-moz-border-radius:3px;padding:5px 12px; cursor:pointer}
|
||
.btn_ok{background: #360;border: 1px solid #390;color:#fff}
|
||
.btn_cancel{background:#f0f0f0;border: 1px solid #d3d3d3; color:#666 }
|
||
.btn_del{background:#f90;border: 1px solid #f80; color:#fff }
|
||
.sub_btn{height:32px; line-height:32px; padding-top:6px; border-top:1px solid #f0f0f0; text-align:right; position:relative}
|
||
.sub_btn .del{position:absolute; left:2px}
|
||
</style>
|
||
|
||
<script src='${ctxStatic}/fullcalendar/js/jquery-1.9.1.js'></script>
|
||
<script src='${ctxStatic}/fullcalendar/js/jquery-ui.js'></script>
|
||
<link rel="stylesheet" type="text/css" href="${ctxStatic}/fullcalendar/css/main.css">
|
||
<link rel="stylesheet" type="text/css" href="${ctxStatic}/fullcalendar/css/fancybox.css">
|
||
<script src='${ctxStatic}/fullcalendar/js/jquery.fancybox-1.3.1.pack.js'></script>
|
||
<link href="${ctxStatic}/fullcalendar/css/fullcalendar2.css" rel="stylesheet">
|
||
<link href="${ctxStatic}/fullcalendar/fullcalendar.print.css" rel="stylesheet">
|
||
<script src="${ctxStatic}/fullcalendar/js/fullcalendar.js"></script>
|
||
<meta name="decorator" content="default"/>
|
||
|
||
|
||
|
||
|
||
<!--
|
||
说明：需要整合农历节气和节日，引入fullcalendar.js fullcalendar2.css
|
||
不需要则引入：fullcalendar.min.js fullcalendar.css
|
||
-->
|
||
|
||
<script type="text/javascript">
|
||
$(function() {
|
||
//页面加载完初始化日历
|
||
$('#calendar').fullCalendar({
|
||
//设置日历头部信息
|
||
header: {
|
||
left: 'prev,next today',
|
||
center: 'title',
|
||
right: 'month,agendaWeek,agendaDay'
|
||
},
|
||
firstDay:1,//每行第一天为周一
|
||
editable: true,//启用拖动
|
||
events: '${ctx}/iim/myCalendar/findList',
|
||
//点击某一天时促发
|
||
dayClick: function(date, allDay, jsEvent, view) {
|
||
var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');
|
||
$.fancybox({
|
||
'type':'ajax',
|
||
'href':'${ctx}/iim/myCalendar/addform?date='+selDate
|
||
});
|
||
},
|
||
//单击事件项时触发
|
||
eventClick: function(calEvent, jsEvent, view) {
|
||
$.fancybox({
|
||
'type':'ajax',
|
||
'href':'${ctx}/iim/myCalendar/editform?id='+calEvent.id
|
||
});
|
||
},
|
||
|
||
//拖动事件
|
||
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
|
||
$.post("${ctx}/iim/myCalendar/drag",{id:event.id,daydiff:dayDelta, minudiff:minuteDelta,allday:allDay},function(msg){
|
||
if(msg!=1){
|
||
alert(msg);
|
||
revertFunc(); //恢复原状
|
||
}
|
||
});
|
||
},
|
||
|
||
//日程事件的缩放
|
||
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
|
||
$.post("${ctx}/iim/myCalendar/resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){
|
||
if(msg!=1){
|
||
alert(msg);
|
||
revertFunc();
|
||
}
|
||
});
|
||
},
|
||
|
||
selectable: true, //允许用户拖动
|
||
select: function( startDate, endDate, allDay, jsEvent, view ){
|
||
var start =$.fullCalendar.formatDate(startDate,'yyyy-MM-dd');
|
||
var end =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd');
|
||
$.fancybox({
|
||
'type':'ajax',
|
||
'href':'${ctx}/iim/myCalendar/addform?date='+start+'&end='+end
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</head>
|
||
|
||
<body class="gray-bg" style="width: 100%;">
|
||
<div class="wrapper wrapper-content" style="width: 100%;margin-left: 15px;">
|
||
<div class="row animated fadeInDown" style="width: 100%;">
|
||
<div class="col-sm-11" style="width: 100%;">
|
||
<div class="ibox float-e-margins" style="width: 100%;">
|
||
<div class="ibox-title">
|
||
<h5>我的日程 </h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="calendar" style="width: 100%;margin-top: 5px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
|
||
</html> |