fullcalendar的简单运用
一、简介
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('