jQueryプラグイン実戦のfullcalendar(カレンダープラグイン)Demo
9928 ワード
jQueryのプラグインは非常に多く、アプリケーションのシーンも非常に豊富です.今日は非常に実用的なカレンダーページ開発プラグイン-fullcalendarを紹介します.現在の最新バージョンは1.5.1です.このプラグインを使用すると、Webベースのカレンダー表示機能を迅速にプログラミングすることができます.outlookのカレンダー項目機能を使用したことがあるかもしれません.カレンダーインタフェースを使用すると、待機事項やデートをより簡単に表示できます.開発プロセスは迅速で便利です.プラグインのトップページのドキュメントも充実しています.もちろん現在は英語のドキュメントしかありません.いいプラグインは多言語をサポートしています.これはいいですね.
過去のウェブプログラム開発では、このプラグインを使って社内の会議室予定システムを開発したことがあります.ここではfullcalendarに関する開発を簡単に紹介し、このプラグインを使ってカレンダーを開発する方法を例に説明します.その中でfullcalendarに関する高度な機能、例えば修正時間をドラッグして、パーソナライズされた会議室予定システムカレンダー項目の内容を生成します.以上のコードはすべて実際のプロジェクトで使用されているフロントで、必要に応じて直接変更して使用することができます.
プロジェクト要件:
1.fullcalendarの既存のインタフェースを美化する必要があります.ここではjQueryUIを使用してインタフェースの美化を実現します.fullcalendarはjQueryUIとシームレスに統合できるからです.
2.個別のカレンダー項目の追加と表示機能を生成し、ここでは依然としてjQueryUIのdialogを使用して実現する
3.実際のプロジェクトなので、データ検証が必要なので、ここではformVaildatorプラグインを使用して実現します.
4.Fullcalendarにはない「ある日に移動」機能を追加します.datepickerのaddonを呼び出したプログラムで、次のような機能を追加できます.
5.曜日ブラウズは、日付と時刻を変更するためのドラッグ&ドロップと移動を自由にサポート
6.ブラウザサポート:IE 8とFirefox
jQuery関連プラグイン:
1. fullcalendar
Calendar機能の提供
2. formValidator
入力検証機能の提供
3. Timepicker Addon for jQuery UI Datepicker
datepicker時間選択機能の提供
開発コード:
関連するjQueryプラグインクラスライブラリをインポートします.次のようにします.
カレンダーのメインインタフェースを するには、 の に います.
$('#calendar').fullCalendar({
header:{
right: 'prev,next today',
center: 'title',
left: 'month,agendaWeek,agendaDay'
},
theme: true,
editable: true,
allDaySlot : false,
events: function(start, end , callback){
var events = [];
...
callback(events);
},
...
のコードはid=calendarのdivでカレンダーを し、theme はjQueryUIを してインタフェースを し、eventsは に した の システムカレンダープロジェクトを し、ここでは のコードを してカレンダー を し、 の で、ここでバックグラウンドプログラムを び したり、 の でデータを したりすることができます.ここでは、 なプレゼンテーションのためにjsを して、 なカレンダーアイテムを します.コードは のとおりです.
var now = new Date();
for(var i=-10;i<60;i++){
var evtstart = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours()-5, now.getMinutes(), now.getSeconds(), now.getMilliseconds());
var evtend = new Date(now.getFullYear() , now.getMonth() , (now.getDate()-i), now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds());
events.push({
sid: 1,
uid: 1,
title: 'Daily Scrum meeting',
start: evtstart,
end: evtend,
fullname: 'terry li',
confname: 'Meeting 1',
confshortname: 'M1',
confcolor: '#ff3f3f',
confid: 'test1',
allDay: false,
topic: 'Daily Scrum meeting',
description : 'Daily Scrum meeting',
id: 1,
});
}
のコードは、カレンダーに されるカレンダーアイテムを します.
$('#calendar').fullCalendar({
...
...
dayClick: function(date, allDay, jsEvent, view) { // ， jQueryUi dialog
...
},
eventClick: function(event) { // ， jQueryUi dialog
},
...
にfullcalendarのいくつかの で、 の システムのカレンダー の を します.それぞれeventRender、eventAfterRenderです.ここでは、カレンダー の を するために できます. には、 のようにします.
eventRender: function(event, element) {
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
// Bug in IE8
//element.html('' + fstart + "-" + fend + '' + event.title + "");
},
eventAfterRender : function(event, element, view) {
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
//element.html('Time: ' + fstart + "-" + fend + 'Room:' + event.confname + 'Host:' + event.fullname + "");
var confbg='';
if(event.confid==1){
confbg = confbg + '';
}else if(event.confid==2){
confbg = confbg + '';
}else if(event.confid==3){
confbg = confbg + '';
}else if(event.confid==4){
confbg = confbg + '';
}else if(event.confid==5){
confbg = confbg + '';
}else if(event.confid==6){
confbg = confbg + '';
}else{
confbg = confbg + '';
}
var titlebg = '' + event.confshortname + '';
if(event.repweeks>0){
titlebg = titlebg + 'R';
}
if(view.name=="month"){
var evtcontent = '';
element.html(evtcontent);
}else if(view.name=="agendaWeek"){
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + "-" + fend + titlebg + '';
evtcontent = evtcontent + '' + event.confname + ' by ' + event.fullname + '';
//evtcontent = evtcontent + '' + event.fullname + '';
evtcontent = evtcontent + '';
element.html(evtcontent);
}else if(view.name=="agendaDay"){
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + " - " + fend + titlebg + '';
evtcontent = evtcontent + 'Room: ' + event.confname + '';
evtcontent = evtcontent + 'Host: ' + event.fullname + '';
evtcontent = evtcontent + 'Topic: ' + event.topic + '';
evtcontent = evtcontent + '';
element.html(evtcontent);
}
},
、 する システムカレンダー の を しました. に、 システムカレンダー のドラッグとサイズ について します.コードクリップは の りです.
eventDragStart: function( event, jsEvent, ui, view ) {
ui.helper.draggable("option", "revert", true);
},
eventDragStop: function( event, jsEvent, ui, view ) {
},
eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
if(1==1||2==event.uid){
var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
identityService.getToBeUpdatedConflictedScheduleDAO(schdata , {
callback:function(data) {
if(data.length== 0){
var newschdata = {sid:event.sid, startdate:event.start, enddate:event.end};
identityService.updateScheduleByNewDateRange(newschdata, {
callback:function(data) {
alert("Thanks, reservation rescheduled successfully.");
//window.location.reload();
}
});
}else{
revertFunc();
alert("Sorry, reservation cannot be rescheduled.");
}
}
});
}else{
revertFunc();
}
},
eventResizeStart: function( event, jsEvent, ui, view ) {
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
if(1==1||2==event.uid){
var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid};
}else{
revertFunc();
}
}
});
のコードについて しく する がある は、 ドキュメントを してください.コードの はここでは しません. のプレゼンテーションコードを して できます.Fullcalendarは に なカレンダープラグインであり、 に すれば に な を することができます. えば、ここで した システムです. くお めします!