使用JQuery-Week-Calendar做日程
能完整运行的实例已经整理出来了：
下载地址：http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
使用方法：
1、配置文件位于 com.jxs.sys.core.config/config.properties
2、在mysql下建立一个数据库比如test
3、导入项目，直接部署启动即可！
如有问题：请联系:QQ378917280、email：[email protected]
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
昨天有人跑不起来，我看是内存溢出问题造成的，建议不要直接使用Myeclipse 下的自带的Tomcat（默认的为6.0.13 Myeclipse 6.5 ）, 下载一个比较新的版本，
如果还出现内存溢出问题的话 ，参考一下配置：
在eclipse.ini 文件中加入：
写道
-vmargs
-Xms128m
-Xmx512m
-XX:MaxPermSize=128m
-Xms128m
-Xmx512m
-XX:MaxPermSize=128m
这样的配置（注意分行），
如果想在eclipse里面直接配置,那就将JDK的参数中加入
写道
-Xms128m -Xmx512m -XX:MaxPermSize=128m
注意一行。
另：附件类容已取消，如需下载，使用：http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
下载，注意项目整体编码是UTF-8格式的，如果改成GBK等有可能会出现乱码，无法运行。
2011-5-13 11:14
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JQuery-Week-Calendar 是一个很优秀的Jquery插件，我们可以很方便的进行日志管理。
JQuery-Week-Calendar 的项目地址是：http://wiki.github.com/robmonie/jquery-week-calendar/
演示地址：http://robmonie.github.com/jquery-week-calendar/full_demo/weekcalendar_full_demo.html
首先：我们要通过一下地址下载其最新版本1.2.2：http://github.com/downloads/robmonie/jquery-week-calendar/jquery-weekcalendar-1.2.2.zip
今天我们采用的是demo下的weekcalendar_full_demo.html，这个例子来演示。
1.下载以后没有提供国际化，我们将其更改成中文版的。参见以下的JS文件。
修改demo.js文件：
$(document).ready(function(){
var $calendar = $('#calendar');
var id = 10;
$calendar.weekCalendar({
timeslotsPerHour: 4,
allowCalEventOverlap: true,
overlapEventsSeparate: true,
firstDayOfWeek: 1,
businessHours: {
start: 8,
end: 18,
limitDisplay: true
},
daysToShow: 7,
height: function($calendar){
return $(window).height() - $("h1").outerHeight() - 1;
},
eventRender: function(calEvent, $event){
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css("backgroundColor", "#aaa");
$event.find(".wc-time").css({
"backgroundColor": "#999",
"border": "1px solid #888"
});
}
},
draggable: function(calEvent, $event){
return calEvent.readOnly != true;
},
resizable: function(calEvent, $event){
return calEvent.readOnly != true;
},
eventNew: function(calEvent, $event){
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']");
var bodyField = $dialogContent.find("textarea[name='body']");
$dialogContent.dialog({
modal: true,
title: "新建日程表",
close: function(){
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save: function(){
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.post(addPath, {
calendarId: calEvent["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
$calendar.weekCalendar("removeUnsavedEvents");
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
cancel: function(){
$dialogContent.dialog("close");
}
}
}).show();
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
},
eventDrop: function(calEvent, $event){
$.post(modifyPath, {
calendarId: $event["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
},
eventResize: function(calEvent, $event){
},
eventClick: function(calEvent, $event){
if (calEvent.readOnly) {
return;
}
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
var bodyField = $dialogContent.find("textarea[name='body']");
bodyField.val(calEvent.body);
$dialogContent.dialog({
modal: true,
title: "Edit - " + calEvent.title,
close: function(){
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save: function(){
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.post(modifyPath, {
calendarId: calEvent["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"delete": function(){
$.post(deletePath, {
calendarId: calEvent["id"]
}, function(data){
})
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
cancel: function(){
$dialogContent.dialog("close");
}
}
}).show();
var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
$(window).resize().resize(); // fixes a bug in modal overlay size
// ??
},
eventMouseover: function(calEvent, $event){
},
eventMouseout: function(calEvent, $event){
},
noEvents: function(){
},
data: function(start, end, callback){
callback(getEventDataMyeslf());
}
});
function getEventDataMyeslf(){
return {
events: datas
};
}
function resetForm($dialogContent){
$dialogContent.find("input").val("");
$dialogContent.find("textarea").val("");
}
function getEventData(){
var year = new Date().getFullYear();
var month = new Date().getMonth();
var day = new Date().getDate();
return {
events: [{
"id": 1,
"start": new Date(year, month, day, 12),
"end": new Date(year, month, day, 13, 30),
"title": "Lunch with Mike",
"body": "这是一个测试内容"
}, {
"id": 2,
"start": new Date(year, month, day, 14),
"end": new Date(year, month, day, 14, 45),
"title": "Dev Meeting",
"body": "这是一个测试内容2"
}, {
"id": 3,
"start": new Date(year, month, day + 1, 17),
"end": new Date(year, month, day + 1, 17, 45),
"title": "Hair cut",
"body": "这是一个测试内容3"
}, {
"id": 4,
"start": new Date(year, month, day - 1, 8),
"end": new Date(year, month, day - 1, 9, 30),
"title": "Team breakfast"
}, {
"id": 5,
"start": new Date(year, month, day + 1, 14),
"end": new Date(year, month, day + 1, 15),
"title": "Product showcase"
}, {
"id": 6,
"start": new Date(year, month, day, 10),
"end": new Date(year, month, day, 11),
"title": "I'm read-only",
readOnly: true
}]
};
}
/*
* Sets up the start and end time fields in the calendar event form for
* editing based on the calendar event being edited
*/
function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes){
for (var i = 0; i < timeslotTimes.length; i++) {
var startTime = timeslotTimes[i].start;
var endTime = timeslotTimes[i].end;
var startSelected = "";
if (startTime.getTime() === calEvent.start.getTime()) {
startSelected = "selected=\"selected\"";
}
var endSelected = "";
if (endTime.getTime() === calEvent.end.getTime()) {
endSelected = "selected=\"selected\"";
}
$startTimeField.append("<option value=\"" + startTime + "\" " +
startSelected +
">" +
timeslotTimes[i].startFormatted +
"</option>");
$endTimeField.append("<option value=\"" + endTime + "\" " +
endSelected +
">" +
timeslotTimes[i].endFormatted +
"</option>");
}
$endTimeOptions = $endTimeField.find("option");
$startTimeField.trigger("change");
}
var $endTimeField = $("select[name='end']");
var $endTimeOptions = $endTimeField.find("option");
// reduces the end time options to be only after the start time options.
$("select[name='start']").change(function(){
var startTime = $(this).find(":selected").val();
var currentEndTime = $endTimeField.find("option:selected").val();
$endTimeField.html($endTimeOptions.filter(function(){
return startTime < $(this).val();
}));
var endTimeSelected = false;
$endTimeField.find("option").each(function(){
if ($(this).val() === currentEndTime) {
$(this).attr("selected", "selected");
endTimeSelected = true;
return false;
}
});
if (!endTimeSelected) {
// automatically select an end date 2 slots away.
$endTimeField.find("option:eq(1)").attr("selected", "selected");
}
});
var $about = $("#about");
$("#about_button").click(function(){
$about.dialog({
title: "About this calendar demo",
width: 600,
close: function(){
$about.dialog("destroy");
$about.hide();
},
buttons: {
close: function(){
$about.dialog("close");
}
}
}).show();
});
});
2.解释：
显示calendar的页面如下：
<body> <div id='calendar'></div> <div id="event_edit_container"> <form action="http://localhost:8080/evaluationSystem0.2/myEvaluation/applayEvalutaion!addUI.action" method="get"> <input type="hidden" /> <ul> <li> <span>日期：</span><span class="date_holder"></span> </li> <li> <label for="start"> 开始时间: </label> <select name="start"> <option value=""> 请选择开始时间 </option> </select> </li> <li> <label for="end"> 结束时间: </label> <select name="end"> <option value=""> 请选择结束时间 </option> </select> </li> <li> <label for="title"> 主题: </label> <input type="text" name="title" /> </li> <li> <label for="body"> 内容: </label> <textarea name="body"></textarea> </li> </ul> </form> </div> </body>
demo.js中的
var $calendar = $('#calendar'); 是构建calendar。
其提供的方法很多，请参见http://wiki.github.com/robmonie/jquery-week-calendar/，这里不详细介绍，主要介绍几个要点，
1。增加：
在新建日程的时候，单击：日期的横格子：
使用如下代码：
save: function(){
calEvent.id = id;
id++;
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.post(addPath, {
calendarId: calEvent["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
addPath 就是更给地址，calEvent["id"]就是要传给后台的数据。
2。托拽：
拖拽事件，
eventDrop: function(calEvent, $event){
$.post(modifyPath, {
calendarId: $event["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
},
3。删除：
"delete": function(){
$.post(deletePath, {
calendarId: calEvent["id"]
}, function(data){
})
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
4。修改：可以通过拖拽，也可以使用点击显示的各自来通过“save”来修改。
save: function(){
calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$.post(modifyPath, {
calendarId: calEvent["id"],
start: calEvent["start"],
end: calEvent["end"],
title: calEvent["title"],
body: calEvent["body"]
}, function(data){
})
$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
3。使用json来处理数据。这一点需要注意一下，前台直接传递给后台的数据格式：Sun Sep 12 2010 12:15:00 GMT+0800，但是JQuery-Week-Calendar 需要传递的格式：2010-09-12T12:15:00.000+10:00这样的格式，所以我们需要对其精心数据转换，参见如下的信息：
private static String dateToString(String dateGMT) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date satrt = new Date(dateGMT);
String startStr = sdf.format(satrt);
String str = startStr.split(" ")[0] + "T" + startStr.split(" ")[1];
return str + ".000+10:00";
}
详细参见：源码