FullCalendar日历插件

FullCalendar是一个jQuery日历插件，它使用Ajax来获取每一个月的日历事件并能够配置成使用自己的日历事件来源比如从GoogleCalendar获取事件。支持拖放日历中的事件，自定义点击和拖放事件。在很多项目中都会用到这个控件。

（一）方法

（二）属性

每行的时间间隔

slotMinutes:10

滚动条滚动到得起始时间

firstHour: 7

每天从几点起开始显示

minTime:7

minTime:'7:30'

如果加上了分钟需要设置时间间隔

每天显示到几点结束

maxTime:24

maxTime:'23:10'

(三).回调方法

当点击某一天时触发此操作

dayClick:function( date, allDay, jsEvent, view ) { }

当点击某一个事件时触发此操作

eventClick:function( event, jsEvent, view ) { }

当鼠标悬停在一个事件上触发此操作

eventMouseover:function( event, jsEvent, view ) { }

当鼠标从一个事件上移开触发此操作

eventMouseout:function( event, jsEvent, view ) { }

首先需要引入js和css

看一下js的实现方法:

$(document).ready(function() {

$("#external-eventsdiv.external-event").each(function() {

vard= {title:$.trim($(this).text())};

$(this).data("eventObject",d);

$(this).draggable({zIndex:999,revert:true,revertDuration:});

});

varb=newDate();

varc=b.getDate();

vara=b.getMonth();

vare=b.getFullYear();

$("#calendar").fullCalendar({

header:{left:", , ",center:"title",right:","},monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九 月","十月","十一月","十二"],

monthNamesShort: ["一月","二月","三月","四月","五月","六月","七月","八 月","九月","十月","十一月","十二月"],dayNames: ["周日","周一","周二","周三","周四","周五","周六"],dayNamesShort: ["周日","周一","周二","周三","周四","周五","周六"],editable:true,

droppable:true,

aspectRatio:2.5,

drop:function(g, h) {

varf=$(this).data("eventObject");vard=$.extend({},f);

d.start= g;

d.allDay= h;$("#calendar").fullCalendar("renderEvent",d,true);

if($("#drop-remove").is(":checked")) {

$(this).remove()

}

},

//handleWindowResize: false,

windowResize:function(view) {

$(".fc-event-end").css("width","130px");//修改内容边框

},

/* viewDisplay: function (view) {//每次日历加载以及日历的view改变的时候触发一次.

var url ="/initCalendar";

var startDate =$.fullCalendar.formatDate(view.start, "yyyy-MM-dd");

var endDate =$.fullCalendar.formatDate(view.end, "yyyy-MM-dd");

$("#calendar").fullCalendar('removeEvents'); //清空上次加载的日志.

$.post("/initCalendar",

,

function (data) {

varresultCollection = jQuery.parseJSON(data);

$.each(resultCollection, function (index, term) {

$("#calendar").fullCalendar('renderEvent', term, true);

});

});

//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示

},*/

dayClick:function(date, allday, jsEvent, view) {//用户点击day的时候触发

if(allday) {

varserviceType=$("#transmodeName").val();

varstartime=$.fullCalendar.formatDate(date,"yyyy-MM-dd");

varfileName=serviceType+startime;

// change the day's background color just forfun

$(this).css('background-color','#F5DEB3');

$("#waitModal").modal("show");

$.ajax({

url:"/exportdaliy",

type:"post",

data: {starttime:startime,routeName:serviceType,fileName:fileName},

dataType:"json",

success:function(result) {window.location.href ="/download?fileName="+ result.fileName+"&path="+ result.path;

$("#waitModal").modal("hide");

}

});

}else{

alert("Click on the solt:"+ date);

}

}

} );

});

效果图：