代码实现(在项目中我用的是MySql数据库,在代码中所访问的各个action(这个就不用多说了吧?)中的代码就是用来和数据库进行关联的,大家可以根据自己所使用的数据库灵活的变动):
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE>
<html>
<head>
<base href="<%=basePath%>">
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta name="description" content="jQuery fullcalendar demo">
<meta name="keywords" content="gbin1.com, jQuery full calendar">
<meta name="author" content="terry li">
<link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/mainstructure.css">
<link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/maincontent.css">
<!-- Jquery and Jquery UI -->
<script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/css/redmond/jquery-ui-1.8.1.custom.css">
<!-- Jquery and Jquery UI -->
<script src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=basePath%>/Backstage/Style/devappwithfullcanlendar/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<!-- FullCalender -->
<link href='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js'></script>
<script src='<%=basePath%>/Backstage/Style/fullcalendar-1.6.1/fullcalendar/gcal.js'></script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth()+1;
var y = date.getFullYear();
//alert(title);
$("#start").timepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', hourMin: 0, hourMax: 24, hourGrid: 3, minuteGrid: 15 });
$("#end").timepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', hourMin: 0, hourMax: 24, hourGrid: 3, minuteGrid: 15 });
$("#addhelper").hide();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'prevYear, title ,nextYear',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
weekMode : "liquid",
theme:true,
viewDisplay: function (view) {//动态把数据查出,按照月份动态查询
var viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd HH:mm:ss");
var viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
$("#calendar").fullCalendar('removeEvents');
$.post("<%=basePath%>/EventsAction!search.do", { start: viewStart, end: viewEnd }, function (data) {
var resultCollection = jQuery.parseJSON(data);
$.each(resultCollection, function (index, term) {
$("#calendar").fullCalendar('renderEvent',term, true);
});
}); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
},
select: function (date,start, end, allDay) {
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
$("#reservebox").dialog({
autoOpen: false,
height: 450,
width: 400,
title: '信息中心大事件 ',
modal: true,
position: "center",
draggable: false,
beforeClose: function (event, ui) {
/* $.validationEngine.closePrompt("#meeting");
$.validationEngine.closePrompt("#start");
$.validationEngine.closePrompt("#end"); */
},
buttons: {
"关闭": function () {
$(this).dialog("close");
},
"添加": function () {
// if ($("#reserveformID").validationEngine({ returnIsValid: true })) {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var confid = $("#title").val(); //标题
var det = $("#details").val(); //内容
var id2;
var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);//时间和日期拼接
var enddate = $.fullCalendar.parseDate(selectdate + "T" + enddatestr);
var schdata = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: selectdate + ' ' + enddatestr };
$.ajax({
type: "post", //使用post方法访问后台
url: "<%=request.getContextPath() %>/EventsAction!addEvents.do", //要访问的后台地址
data: schdata, //要发送的数据
success: function (data) {
//对话框里面的数据提交完成,data为操作结果
//alert(data);
//id2 = data.eventId;
//var schdata2 = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: enddatestr, id: id2 };
//$('#calendar').fullCalendar('renderEvent', schdata2, true);
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
}
});
$(this).dialog("close");
}
}
});
$("#reservebox").dialog("open");
return false;
},
editable: false,
allDaySlot:true,
loading: function (bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventAfterRender: function (event, element, view) {//数据绑定上去后添加相应信息在页面上
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
var confbg = '';
if (event.confid == 1) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else if (event.confid == 2) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else if (event.confid == 3) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else if (event.confid == 4) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else if (event.confid == 5) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else if (event.confid == 6) {
confbg = confbg + '<span class="fc-event-bg"></span>';
} else {
confbg = confbg + '<span class="fc-event-bg"></span>';
}
if (view.name == "month") {//按月份
var evtcontent = '<div class="fc-event-vert"><a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-titlebg">' + fstart + " - " + fend + " (" + event.title + ")" + '</span>';
element.html(evtcontent);
} else if (view.name == "agendaWeek") {//按周
var evtcontent = '<a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + "-" + fend + '</span>';
evtcontent = evtcontent + '<span>'+ event.title + '</span>';
element.html(evtcontent);
} else if (view.name == "agendaDay") {//按日
var evtcontent = '<a>';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '<span class="fc-event-time">' + fstart + " - " + fend + '</span>';
evtcontent = evtcontent + '<span>'+ event.title + '</span>';
element.html(evtcontent);
}
},
eventMouseover: function (calEvent, jsEvent, view) {
var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
$(this).attr('title', fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);
$(this).css('font-weight', 'normal');
$(this).tooltip({
effect: 'toggle',
cancelDefault: true
});
},
eventClick: function (event) {
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
// var schdata = { sid: event.sid, deleted: 1, uid: event.uid };
var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd");
$("#start").val(fstart); ;
$("#end").datetimepicker('setDate', event.end);
$("#title").val(event.title); //标题
$("#details").val(event.description); //内容
$("#reservebox").dialog({
autoOpen: false,
height: 450,
width: 400,
title: '信息中心事件编辑器',
modal: true,
position: "center",
draggable: false,
beforeClose: function (event, ui) {
//$.validationEngine.closePrompt("#meeting");
//$.validationEngine.closePrompt("#start");
//$.validationEngine.closePrompt("#end");
$("#start").val(''); //开始时间
$("#end").val(''); //结束时间
$("#title").val(''); //标题
$("#details").val(''); //内容
$("#chengdu").val(''); //重要程度
},
timeFormat: 'HH:mm{ - HH:mm}',
buttons: {
"删除": function () {
var aa = window.confirm("警告:确定要删除记录,删除后无法恢复!");
if (aa) {
var para = { id: event.id };
$.ajax({
type: "POST", //使用post方法访问后台
url: "<%=basePath%>/EventsAction!delete.do", //要访问的后台地址
data: para, //要发送的数据
success: function (data) {
//对话框里面的数据提交完成,data为操作结果
//$('#calendar').fullCalendar('removeEvents', event.id);
window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
}
});
}
$(this).dialog("close");
},
"修改": function () {
var startdatestr = $("#start").val(); //开始时间
var enddatestr = $("#end").val(); //结束时间
var confid = $("#title").val(); //标题
var det = $("#details").val(); //内容
var cd = $("#chengdu").val(); //重要程度
var startdate = $.fullCalendar.parseDate(selectdate + "T" + startdatestr);
var enddate = $.fullCalendar.parseDate(enddatestr);
event.fullname = confid;
event.confname = cd;
event.start = startdate;
event.end = enddate;
event.description = det;
var id2;
var schdata = { title: confid, description: det, start: selectdate + ' ' + startdatestr, end: selectdate + ' ' + enddatestr, id: event.id };
$.ajax({
type: "POST", //使用post方法访问后台
url: "<%=basePath%>/EventsAction!updateEvents.do", //要访问的后台地址
data: schdata, //要发送的数据
success: function (data) {
window.location = '<%=basePath%>/Backstage/Sysi/Events/selectable.jsp';
//对话框里面的数据提交完成,data为操作结果
//var schdata2 = { title: confid, fullname: confid, description: det, confname: cd, confshortname: 'M1', start: selectdate + ' ' + startdatestr, end: enddatestr, id: event.id };
//$('#calendar').fullCalendar('updateEvent', event);
}
});
$(this).dialog("close");
}
}
});
$("#reservebox").dialog("open");
return false;
},
events: []
});
});
</script>
<div id="calendar">
</div>
<div id="reserveinfo" title="Details">
<div id="revtitle">
</div>
<div id="revdesc">
</div>
</div>
<div style="display: none" id="reservebox" title="Reserve meeting room">
<div class="sysdesc">
</div>
<!-- <div class="rowElem">
<label>
meeting room:</label>
<select id="meeting" name="meeting">
</select>
</div>-->
<%-- <div class="rowElem">
<label>
Repeated weeks:</label>
<select id="repweeks" name="repweeks">
<option selected value="0">Not repeated</option>
<option value="2">1 week</option>
<option value="3">2 weeks</option>
<option value="4">3 weeks</option>
<option value="5">4 weeks</option>
<option value="9">8 weeks</option>
<option value="17">16 weeks</option>
<option value="33">32 weeks</option>
</select>
</div> --%>
<div class="rowElem">
<label>开始时间:</label>
<input id="start" name="start">
</div>
<div class="rowElem">
<label>结束时间:</label>
<input id="end" name="end">
</div>
<div class="rowElem">
<label>标题:</label>
<input id="title" name="title">
</div>
<div class="rowElem">
<label>事件详细:</label>
<textarea id="details" rows="3" cols="43" name="details"></textarea>
</div>
<div class="rowElem">
</div>
<div class="rowElem">
</div>
<div id="addhelper" class="ui-widget">
<div style="padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px"
class="ui-state-error ui-corner-all">
<div id="addresult">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图如下:
说明:头文件中需要的css和js,可以用下面的链接下载。
http://pan.baidu.com/s/1qW0VoWc