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、プロジェクトをインポートし、直接配置して起動すればいい!
質問があれば、QQ 378917280、emailに連絡してください[email protected]
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
昨日は走れなかった人がいましたが、メモリオーバーフローの問題が原因だと思います.Myeclipseの下にある持参したTomcat(デフォルトは6.0.13 Myeclipse 6.5)を直接使用しないで、比較的新しいバージョンをダウンロードすることをお勧めします.
メモリオーバーフローの問題が発生した場合は、構成を参照してください.
eclipse.iniファイルに追加:
と書く
-vmargs
-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ファイルを参照してください.
修正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-12 T 12: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";
}詳細は、「ソース」を参照してください.