fullcalendarの簡単な運用
一、紹介
FullCalendarは開発可能なカレンダープラグインで、豊富な属性設定と方法呼び出しを提供し、開発者はFullCalendarが提供したAPIに基づいてカレンダースケジュールの開発を迅速に完了することができ、本稿ではFullCalendarの一般的な属性と方法、コールバック関数などを中国語ドキュメントにまとめ、参照しやすい.
二、なぜ使うか
仕事でスケジュール管理を開発する必要があるため、fullcalendarは良いjqueryが作ったスケジュールコントロールであり、jquery-uiの時間選択コントロールに合わせて、個人的には良いfullcalendarは豊富な構成で開発に必要なユーザー体験を満たしており、コードは多くありません.
三、コアコード
fullcalendarを使用するには、次のcssファイルとjsライブラリを先に導入する必要があります.公式サイトでダウンロードできます.注意:${ctx}はel式で、プロジェクトルートパスを返します.読者は自分のファイルのパスを書けばいいです.
導入
js
FullCalendarは開発可能なカレンダープラグインで、豊富な属性設定と方法呼び出しを提供し、開発者はFullCalendarが提供したAPIに基づいてカレンダースケジュールの開発を迅速に完了することができ、本稿ではFullCalendarの一般的な属性と方法、コールバック関数などを中国語ドキュメントにまとめ、参照しやすい.
二、なぜ使うか
仕事でスケジュール管理を開発する必要があるため、fullcalendarは良いjqueryが作ったスケジュールコントロールであり、jquery-uiの時間選択コントロールに合わせて、個人的には良いfullcalendarは豊富な構成で開発に必要なユーザー体験を満たしており、コードは多くありません.
三、コアコード
fullcalendarを使用するには、次のcssファイルとjsライブラリを先に導入する必要があります.公式サイトでダウンロードできます.注意:${ctx}はel式で、プロジェクトルートパスを返します.読者は自分のファイルのパスを書けばいいです.
導入
js
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
monthNames: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
monthNamesShort: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
dayNames: [" ", " ", " ", " ", " ", " ", " "],
dayNamesShort: [" ", " ", " ", " ", " ", " ", " "],
today: [" "],
firstDay: 1,
buttonText: {
today: ' ',
month: ' ',
week: ' ',
day: ' ',
prev: ' ',
next: ' '
},
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("/msmp/action/Programme/getProgramme", { start: viewStart, end: viewEnd }, function (data) {
var resultCollection = jQuery.parseJSON(data);
$.each(resultCollection, function (index, term) {
$("#calendar").fullCalendar('renderEvent', term, true);
});
}); // fullCalendar
},
editable: true,//
dayClick: function (date, allDay, jsEvent, view) {// jq ui ，
var selectdate = $.fullCalendar.formatDate(date, "yyyy/MM/dd HH:mm:ss");//
$("#start").val(selectdate);//
$("#id").val("");//
$("#idtr").hide();//
$("#reservebox").dialog({
autoOpen: false,
height: 350,
width: 600,
title: selectdate+' ',
modal: true,
position: "center",
draggable: false,
beforeClose: function (event, ui) {
},
buttons: {
" ": function () {
$(this).dialog("close");
},
" ": function () {
if(!Vai()){
return false;
}
var title = $("#title").val(); //
var det = $("#details").val(); //
var startdate = $("#start").val();
var enddate = $("#end").val();
var schdata = { title: title, description:det,start:startdate,end:enddate};
$.ajax({
type: "POST", // post
url: Apps.ContextPath + "action/client/invoke?transcode=PROGRAMME_SAVE",
data: schdata, //
success: function (data) {
// ，data
var schdata2 = { title: title,description: det, start: startdate, end: enddate};
$('#calendar').fullCalendar('renderEvent', schdata2, true);
$("#start").val(''); //
$("#end").val(''); //
$("#title").val(''); //
$("#details").val(''); //
}
});
$(this).dialog("close");
}
}
});
$("#reservebox").dialog("open");
return false;
},
titleFormat: "yyyyMMMMdddd",
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 + '';
} 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 + '';
}
if (view.name == "month") {//
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + ' - ' + fend +' - ' + event.title + '';
element.html(evtcontent);
} else if (view.name == "agendaWeek") {//
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + "-" + fend + '';
evtcontent = evtcontent + ''+' - ' + event.title + '';
element.html(evtcontent);
} else if (view.name == "agendaDay") {//
var evtcontent = '';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + '' + fstart + " - " + fend + '';
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+"
："+calEvent.description);
$(this).css('font-weight', 'normal');
$(this).tooltip({
effect: 'toggle',
cancelDefault: true
});
},
eventClick: function (event) {
$("#idtr").show();//
var fstart = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var fend = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
var selectdate = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
$("#start").val(fstart);
$("#end").val(fend);
$("#title").val(event.title);
var det = event.description.indexOf('