FullCalendar日历插件

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

（一）方法

1. 1. 把日历绑定到一个id的东西上 $('#id').fullCalendar('render');
2. 2. 取得视图对象 var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title);
3. 3.改变当前视图 .fullCalendar('changeView',viewName)
4. 4.gotoDate:调用方式:$(‘.selector’).fullCalendar(‘gotoDate’, year[, month[, date]])调用方法名为gotoDate,后面三个参数传递年, 月, 日,年是必选, 其他两个可选. 其中的月month参数,是以0开始计算的,也就是说一月对应0. 该方法也可以使用单参数的方式调用,传递一个javascript的Date对象.
5. 5.格式化日期:$.fullCalendar.formatDate(date,formatString[, options]),通过指定的格式格式化一个日期,返回一个字符串. options选项是一个对象,其中设置本地化变量支持的属性值.比如{monthNames: [‘一月’, ‘二月’,……], dayNames: [‘周日’, ‘周一’,…..]}
6. 6.解析日期: $.fullCalendar.parseDate(string):将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF, UNIX时间戳三种格式.

（二）属性

每行的时间间隔 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-events div.external-event").each(function() { var d = {title: $.trim($(this).text())}; $(this).data("eventObject", d); $(this).draggable({zIndex: 999,revert: true, revertDuration: 0}); }); var b = new Date(); var c = b.getDate(); var a = b.getMonth(); var e = b.getFullYear(); $("#calendar").fullCalendar({ header:{left: ", , ",center: "title",right: ","}, monthNames: ["一月", "二月", "三月", "四月", "五月", "六月","七月", "八月", "九 月", "十月", "十一月", "十二"],

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

droppable: true,

aspectRatio: 2.5,

drop: function(g, h) {

var f = $(this).data("eventObject"); var d = $.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", {startDate:startDate, endDate: endDate, serviceType: serviceType}, 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) { var serviceType =$("#transmodeName").val(); var startime = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); var fileName = 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); } } } ); });

效果图：