fullcalendar显示出勤日_FullCalendar日历插件应用之数据展现(一)

开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。

由于项目需求，需要通过日历的方式展现某些数据，在网上搜索了很多日历的插件，觉得比较好用的还是fullCalendar，下面是我写的一个简单Demo，如有不足，请多多指正！！！

一、引入必要的文件：

二、在界面中添加div块：

初始化calendar的js代码我把它放到了fullcalendar.js文件中接下来就让我们看一下这个文件里的脚本信息。

三、初始化fullcalender:

/* 初始化calendar */ 通过ID来初始化放到哪个标签里

jQuery('#calendar').fullCalendar({

header: {

left: 'month,agendaWeek,agendaDay',

center: 'title',

right: 'today, prev, next'

}, monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

today: ["今天"],

firstDay: 1,

buttonText: {

prev: '«',

next: '»',

prevYear: ' << ',

nextYear: ' >> ',

today: '今天',

month: '月',

week: '周',

day: '日'

},

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 请求一般处理程序来返回需要展现的信息(start与end为需要传递的参数，在本文中没有用到可以忽略)

$.post("../DateHandle/ViewData