fullCalendar的小例子

jsp页面

<!--显示fullCalendar的层-->
<div id='calendar'></div>

js方法

//初始化fullCalendar组件

    $('#calendar').fullCalendar({
//头部左、中、右内容设定
header: {
left: 'today prev next ',
center: 'title',
right:''
},

//设置“上一个”、“下一个”按钮显示的样式
buttonIcons:{
prev: 'left-double-arrow',
next: 'right-double-arrow'
},

//标灰周六、周日底色
businessHours: true,

//设置每周的第一天显示0代表周日、1代表周一......
firstDay:1,

//设置是否显示周六、周日在日历上
weekends:true,

//设置是否显示本周在本年度的计数
weekNumbers:true,

//设置日历的整体高度
height:650,

//设置每天显示的日程的数量
eventLimit:4,

//设置日历是否可被编辑
editable: false,

//后台获取JSON的文件，其主要目的是根据数据库产生相应的Event对象。当在这里约定后台文件时， fullCalendar自动默认通过GET的方式传递三个参数1）start 2）end 3）_
events:"/train/trainMatrixController/getTrainByTime.action",
//*********************************************************//
//*******************FullCalendar事件处理*******************//
//*********************************************************//


//监听鼠标飘过Event事件
eventMouseover: function(calEvent, jsEvent, view){
//显示Event详情的层
$('#details').css("visibility","visible");

//传递给需要显示的event数据。只要是通过后台传给fullCalendar的数据均可以通过calEvent的实例获取。
$('#details').html(calEvent.title+"<br>"+calEvent.url+"<br>"+calEvent.color);
},

//监听鼠标飘出Event事件
eventMouseout: function(calEvent, jsEvent, view){
//隐藏Event详情的层
$('#details').css("visibility","hidden");
},

//监听Event被点击事件
eventClick: function(calEvent, jsEvent, view) {
if(calEvent.url!=null){
// alert("跳转啦"+calEvent.url);
window.open(calEvent.url);
return false;
}
else
{
alert("没有URL传入，跳不了啊！");
}
}

    })