FullCalendar日历工具

【Javascript】

下载

新闻

文章

FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便。

	var st_d = new Date();		//获取系统时间
	var y = st_d.getFullYear();
	var m = st_d.getMonth();
	var d = st_d.getDay();
	$('#calendar').fullCalendar({
		defaultView:"month",			// year, month, date: 整数, 初始化加载时的日期，默认是month
		height: 600,					// 日历高度,包括表头   contentHeight: 600 内容高度，不包括表头
		editable: true,					// 默认值false, 用来设置日历中的日程是否可以编辑
		draggable: true,				// 是否可拖动
		weekends: true,					// 默认为true, 标识是否显示周六和周日的列
		slotMinutes:30,					// 整型, 默认值30, 表示在agenda的views中, 两个时间之间的间隔
		disableDragging:false,			// Boolean类型, 默认false, 所有的event可以拖动, 必须editable = true 
		diableResizing:false,			// Boolean, 默认false, 所有的event可以改变大小, 必须editable = true 
		dragRevertDuration:500,			// 拖动恢复的时间, 默认500毫秒, 表示一个不成功的拖动之后, 控件回复到原始位置的时间. 
		dragOpacity:.5,					// Float类型, 表示拖动时候的不透明度.
		monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'], //默认为英文月分，这里可以改成中文
		dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'],  //换成中文星期
		header:{
				left:   'month,agendaWeek,agendaDay',  //左边显示的按钮 (month,basicWeek无时间格式,basicDay无时间格式,agendaWeek,agendaDay)
				center: 'title',		//中间显示标题
				right:  'prevYear,prev,today,next,nextYear'  //右边显示的按钮
		},
		buttonText:{					//按钮对应的文本
			prevYear: '去年',			//不建议改这个值，因为它本身是含[去年、上一周、前天]三个意思，你就让它默认
			nextYear: '明年',			//同上
			today:    '今天',
			month:    '月',
			week:     '周',
			day:      '日'
		},
		dayNamesShort:['周日', '周一', '周二', '周三','周四', '周五', '周六'],  //短格式的星期
		titleFormat:{					//格式化标题
			month: 'MMMM yyyy',                             // 如：September 2009
			week: "MMM d[yyyy]{'&#8212;'[ MMM] d yyyy}",	// 如：Sep 7 - 13 2009
			day: 'dddd, MMM d, yyyy'						// 如：Tuesday, Sep 8, 2009
		},
		weekMode:'fixed',			//固定显示6周高
		dayClick:function(dayDate, allDay, jsEvent, view){		//点击单元格事件
			alert(dayDate.getFullYear()+"-"+dayDate.getMonth()+"-"+dayDate.getDate()+"-星期:"+dayDate.getDay()+ "视图:"+view.name);
			//$('#calendar').fullCalendar("incrementDate", -1, 0, 0); //移动日历 后三个参数为 年 月 日
			//$('#calendar').fullCalendar("prev"); // 跳转到前一月/周/天, 根据当前的view决定
			//$('#calendar').fullCalendar("next"); // 跳转到下一月/周/天, 根据当前的view决定
			//$('#calendar').fullCalendar("today"); // 跳转今天
			//$('#calendar').fullCalendar("gotoDate", year[, month[, date]]); //跳转到指定的日期
			//$('#calendar').fullCalendar("changeView","viewName"); //切换日历的view, viewName必须是允许的views
		},
		eventClick: function(event, jsEvent, view) {			//当点击某一个事件时触发此操作
			//return false;	//可以阻止浏览器跳转到对应日程事件在初始配置时指定的url地址
			//alert('事件: ' + event.title+'View: ' + view.name);
			//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
			//event.title = "CLICKED!";
			//$('#calendar').fullCalendar('updateEvent', event); //更新对应的事件
			//$("#calendar").fullCalendar("removeEvents",event.id); //删除对应的事件,指定ID,没指定时删除所有事件
			//$("#calendar").fullCalendar("clientEvents",event.id); //返回FullCalendar已经存储到客户端的CalEvents对象数组---------
			//$("#calendar").fullCalendar("addEventSource","json.json"); //添加一个日程事件源
			//$("#calendar").fullCalendar("removeEventSource","json.json"); //移除一个日程事件源
			//$("#calendar").fullCalendar("rerenderEvents"); //重新渲染屏幕上的所有日程事件(效果不明显)
			//$("#calendar").fullCalendar("refetchEvents"); // 重新抓取所有的日程事件源上的日程事件并渲染它们
			//$("#calendar").fullCalendar("render");		// 该方法用来立刻渲染整个日历
			$(this).css('background-color', 'red');
			var eve={};
				eve.title="新事件";
				eve.id="1000";
				eve.start="2011-10-10";
				eve.end="2011-10-11";
			$('#calendar').fullCalendar('renderEvent', eve);	//添加新的事件,些方法适合更改事件动作
		},		
		eventMouseover:function( event, jsEvent, view ) {		//当鼠标悬停在一个事件上触发此操作
		},
		eventMouseout:function( event, jsEvent, view ) {		//当鼠标从一个事件上移开触发此操作
		},
		eventDragStart:function(calEvent, jsEvent, ui, view) {	//日程事件被拖动之前触发
		},
		eventDragStop:function(calEvent, jsEvent, ui, view) {	//日程事件被拖动之后触发
		},
		eventDrop: function(event, delta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {//停止拖动事件后 view.name=[month,agendaWeek,agendaDay]
			//allDay:true,false 是否是全天事件			
			var s;
			if(delta!=0)
				s=delta>0?"推迟了"+delta+"天":"提前了"+delta+"天";
			if(minuteDelta!=0)
				s=minuteDelta>0?"推迟了"+delta+"分钟":"提前了"+minuteDelta+"分钟";			
			alert("事件："+ event.id + "-" + event.title + s);
			//updateEvent: $(".selector").fullCalendar("updateEvent", calEvent);  //更新日历空间中的一个日程事件
			//renderEvent: $(".selector").fullCalendar("renderEvent", calEvent, [stick]); //新渲染事件
			//removeEvents: $(".selector").fullCalendar("removeEvents",1); //从日历中删除一个日程事件. 
		},
		eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {	//改变大小后触发的事件
			alert(event.title+"事件调整了分钟："+minuteDelta);
		},
		eventRender:function(calEvent, element, view){ //日程事件渲染之前触发,每个事件触发一次
			//return false;	//可以阻止日程事件渲染
		},
		events: [ 
			{ id: 1, title: "更多", start: "2011-10-09",allDay : false},
			{ id: 2, title: "我的事件", start: new Date(y, m, 9), end: new Date(y, m, 9)},
			{ id: 3, title: "我的活动", start: new Date(y, m, 9,10,30), end: new Date(y, m, 9,12,30)},
			{ id: 4, title: "查看facebook", start: new Date(y, m, 9, 16),end: new Date(y, m, 29)}
		]
		//,events:"json.asp"  //可以使用json格式源
	});

完整js http://down.scscms.com/scs/fullcalendar/fullcalendar.js 此js是我们以前使用的一个例子，里面含有农历显示功能

json源格式参考：

[{"id":1,"title":"已经过去的事件","start":"2011-9-30 12:30:00","end":"2011-10-1 12:23:00","editable":false,"allDay":true,"color":"#e7e6e5","borderColor":"#d7d7d7","textColor":"#ffffff","className":"fc_clock"},{"id":2,"title":"事件标题","start":"2011-10-12","end":"2011-10-13","editable":true,"allDay":true,"color":"#e6ccc1","borderColor":"#bf9888","textColor":"#ffffff","className":"fc_cycls"},{"id":4100,"title":"活动","start":"2011-10-12","end":"2011-10-13","editable":true,"allDay":false,"color":"#ccaaaa","borderColor":"#ad7878","textColor":"#ffffff","className":"fc_cyc"},{"id":10,"title":"已经过去的事件","start":"2011-10-10 12:30","end":"2011-10-11 23:23:00","editable":false,"allDay":true,"color":"#e7e6e5","borderColor":"#d7d7d7","textColor":"#ffffff","className":"fc_cyc"},{"id":400,"title":"新活动","start":"2011-10-12 12:30:00","end":"2011-10-12 22:30:00","editable":true,"allDay":false,"color":"#ccaaaa","borderColor":"#ad7878","textColor":"#ffffff","className":"fc_cyc"}]

其中：title,start是必须填写 url,id,end,editable,allDay等等是可选

官方：http://arshaw.com/fullcalendar/