jquery的fullCalender插件运用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="fullcalendar.css"/>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
<!-- jquery基本库 -->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<!-- fullcalendar的插件 -->
<script type="text/javascript" src="fullcalendar.js"></script>
<!-- 拖拽与改变大小的插件 -->
<script type="text/javascript" src="jquery-ui-1.8.6.custom.min.js"></script>
<!-- 与google同步的插件 -->
<script type="text/javascript" src="gcal.js"></script>
<script type="text/javascript">
$(function(){
$("#calendar").fullCalendar({
editable:true,
events:$.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/43091762%40qq.com/public/basic",
{
className:'gcal-event',
edittable:true,
currentTimezone:'America/Chicago'
}),//与google同步。
//header:false,
header:{
left:'title',
center:'month,basicWeek,basicDay,agendaWeek,agendaDay',
right:'prevYear prev today next nextYear'
},
buttonText:{
month:'月视图',
basicWeek:'周视图',
basicDay:'日视图',
agendaWeek:'议事周视图',
agendaDay:'议事日视图',
today:'今天'
},
aspectRatio:2,
weekMode:'variable',//每周固定，月份高度不固定。fixed固定六周,liquid月份高度固定，每周高度不固定。
theme:false,
titleFormat:{
month:'yyyy年MMMM',
week:"yyyy年MMMd日{'—'[yyyy年][MMM]d日}",
day:'yyyy-MM-d dddd'
},
buttonIcons:{
},
firstDay:1,//作用周视图，默认周几开始，0星期天，1星期一。。。。默认为0
weekMode:'variable',//默认fixed总是显示6周的格子。liquid，variable根据月份显示4，5，6周其中一个，liquid的总体高度固定。variable格子高度固定。
height:650,//注意不加单位，包括header和主体部分的高度。
//timeFormat:'HH:mm',全部视图使用这个时间样式
timeFormat:{
week:'HH:mm{-HH:mm}',
day:'HH:mm'
},
columnFormat:{//header底下的第一行;
month:'dddd',
week:'ddd MM/dd',
day:'dddd MM/dd'
},
allDayText:'全天',//allDay全天事件的文本
axisFormat:'HH:mm',//agenda时间轴的格式
allDaySlot:true,//是否显示全天，默认为true
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'],
firstHour:0,//默认是6，只对agenda视图有效果
defaultEventMinutes:120,//如果事件没有结束时间，默认120分钟长度
viewDisplay:function(view){
//view.visStart是包括灰色的日期
//view.start不包括灰色的日期
alert(view.visStart+"------"+view.start);
},
dayClick:function(date,allDay,jsEvent,view){
alert("视图名:"+view.name);
alert("当前时间:"+date);
alert("是否全天事件:"+allDay);
alert("javascript针对的事件:"+jsEvent.clientX);
},
eventClick:function(event,jsEvent,view){
alert("针对点击的事件名称:"+event.title);
alert("针对javascript的事件:"+jsEvent.clientX);
alert("视图名:"+view.name);
if(event.url){//当点击事件的时候，如果时间有url属性，默认跳转到url,通过return false来阻止默认行为。
window.open(event.url);
return false;
}
},
/*eventMouseover:function(event,jsEvent,view){
alert("鼠标经过某个事件的标题"+event.title);
alert("鼠标经过某个事件位置"+jsEvent.clientX);
alert("鼠标经过某个事件视图名称"+view.title);
},
eventMouseout:functin(event,jsEvent,view){
},*/
selectable:true,//选择的时候高亮
selectHelper:true,//只对agenda有效果
/*
selectHelper:function(start,end){
//alert(start);
},*/
unselectAuto:true,//是否清除高度选择的部分。默认为true
events:[
{
title:'event1',
start:'2010-12-22 14:30:00',
end:'2010-12-25 19:00:00',
url:'http://www.google.com',
allDay:false
}
]
});
})
</script>