FullCalendar(日程管理控件)

(以下是我学习FullCalendar控件时,网络上收集的一些资料)

第一部分(官方资料)

jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/

jquery.fullCalendar英文文档: http://arshaw.com/fullcalendar/docs/

jquery.fullCalendar下载:http://arshaw.com/fullcalendar/download/

第二部分(官方文档的翻译)

http://blog.csdn.net/lgg201/article/details/4818941

第三部分(视频教程)

http://www.verycd.com/topics/2782321/(一共两集)

第四部分(实战)

(自己做了一个日程管理)




主要的代码如下:

<script type='text/javascript'>
	$(document).ready(function() {
		artDialog.notice = function (options) {  
            var opt = options || {},  
                api, aConfig, hide, wrap, top,  
                duration = 800;  
                  
            var config = {  
                id: 'Notice',  
                left: '100%',  
                top: '100%',  
                fixed: true,  
                drag: false,  
                resize: false,  
                follow: null,  
                lock: false,  
                init: function(here){  
                    api = this;  
                    aConfig = api.config;  
                    wrap = api.DOM.wrap;  
                    top = parseInt(wrap[0].style.top);  
                    hide = top + wrap[0].offsetHeight;  
                      
                    wrap.css('top', hide + 'px')  
                        .animate({top: top + 'px'}, duration, function () {  
                            opt.init && opt.init.call(api, here);  
                        });  
                },  
                close: function(here){  
                    wrap.animate({top: hide + 'px'}, duration, function () {  
                        opt.close && opt.close.call(this, here);  
                        aConfig.close = $.noop;  
                        api.close();  
                    });  
                      
                    return false;  
                }  
            };    
              
            for (var i in opt) {  
                if (config[i] === undefined) config[i] = opt[i];  
            };  
              
            return artDialog(config);  
        };  
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();		
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			//fullcalendar本地化
			//timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
            today: ["今天"],  
            firstDay: 1,  
            buttonText: {  
	            today: '今天',  
	            month: '月',  
	            week: '周',  
	            day: '日',  
	            prev: '上一月',  
	            next: '下一月'  
            },  
			allDaySlot:false,
			selectable: true,
       		selectHelper: true, 
       		aspectRatio:2.7,
       		editable: false,
       		allDayDefault:false,
       		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');  
            $.getJSON('http://localhost:8080/pnote/schedule/listevents.action',{start:viewStart,end:viewEnd},function(data) {  
               for(var i=0;i<data.length;i++) {  
                   var obj = new Object();  
                   obj.id = data[i].id;  
                   obj.title = data[i].title;                 
                   obj.description = data[i].description;          
           		   obj.color = data[i].color;
           		   obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);
           		   obj.messagenotice = data[i].messagenotice;
           		   obj.description = data[i].description;
                   obj.start = $.fullCalendar.parseDate(data[i].start);                 
                   obj.end = $.fullCalendar.parseDate(data[i].end); 
                   $("#calendar").fullCalendar('renderEvent',obj,true);                   
               }  
             }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
           },
	       eventMouseover: function(event, jsEvent, view){ 	        	
	       		showDetail(event, jsEvent);	        		
		   },
			eventMouseout: function(event, jsEvent, view){
				$('#tip').remove();
			},
			//日程点击:添加日程
	      	dayClick: function(date, allDay, jsEvent, view) {
	    	     var obj =new Object(); 
	    		 art.dialog.open('newschedule.html',{
		    	 	title: '添加日程',
		    		lock: true,
		    		width:300,
	                height:400,
		            fixed: true, //固定定位
		    		//background: '#600', // 背景色
		    		opacity: 0.6,	// 透明度
		    		// 在open()方法中,init会等待iframe加载完毕后执行
		    		init: function () {
		    			var iframe = this.iframe.contentWindow;
		    		    //var top = art.dialog.top;// 引用顶层页面window对象
		    		    var start = iframe.document.getElementById('form-start');		    		
		    		    start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd HH:mm:ss");		    		        
		    		 },
		    		 okVal:'提交日程',
		    		 ok: function () {
		    		 	var iframe = this.iframe.contentWindow;
		    		    if (!iframe.document.body) {
		    		        alert('iframe还没加载完毕呢');
		    		        return false;
		    		    };
		    		    
		    		    var start = iframe.document.getElementById('form-start').value;
		    		    var end = iframe.document.getElementById('form-end').value;
		    		    var remindertime = iframe.document.getElementById('form-remindertime').value;
		    		    obj.title = iframe.document.getElementById('form-title').value;
		    		    obj.description = iframe.document.getElementById('form-description').value;
		    		    obj.start = $.fullCalendar.parseDate(start);
		    		    obj.end = $.fullCalendar.parseDate(end);		    		    		    
		    		 	obj.color = iframe.document.getElementById('form-color').value;
		    		    if (obj.title== '') {
		    		        alert("标题不能为空");
		    		        return false;
		    		     }else if(start== '') {
		    		     	alert("开始日期不能为空");
		    		        return false;
		    		     }else if(end == '') {
		    		        alert("结束日期不能为空");
		    		        return false;
		    		     }else if(iframe.document.getElementById('form-messagenotice').checked) {			    		 
			    		        if(remindertime == '') {
			    		        	alert("短信提醒时间不能为空");
			    		        	return false;
			    		        }
			    		        obj.messagenotice = 1;
			    		        obj.remindertime = $.fullCalendar.parseDate(remindertime);
		    		     	}else {
		    		        	obj.messagenotice = 0;
		    		        	obj.remindertime = null;
	    		          	}	    	
		    		    
		    		     $.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台,保存到数据库     
	                     	title: obj.title,     
	                        start:start,     
	                        end:end,
	                        description:obj.description,	                       
	                        remindertime:remindertime,
	                        color:obj.color,
	                        messagenotice:obj.messagenotice
	                        },
	                        function (data, textStatus){
								obj.id = data[0].id;
	                        }, "json"
	                      );		    		    
		    		      $('#calendar').fullCalendar('renderEvent', obj);  //核心的更新代码
		    		      $('#calendar').fullCalendar('unselect');
		    		      art.dialog.notice({
		    		            title: '笔记之家',
		    		            width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩
		    		            content: '日程已添加至后台!',
		    		            icon: 'face-smile',
		    		            time: 3
		    		        });
			    		  return true;		    		        	
		    		   },
		    		    cancel: true
		    		});	
	    	},
		    eventClick:function(calEvent, jsEvent, view){	  
		    	art.dialog.open('newschedule.html', {
	    		    title: '更新日程',
	    		    lock: true,
	    		    width:300,
	                height:400,
	    		    //background: '#600', // 背景色
	    		    opacity: 0.6,	// 透明度
	    		    // 在open()方法中,init会等待iframe加载完毕后执行
	    		    init: function () {
	    		      	var iframe = this.iframe.contentWindow;
	    		    	//var top = art.dialog.top;// 引用顶层页面window对象
	    		    	iframe.document.getElementById('form-start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd HH:mm:ss");		    		
	    		    	iframe.document.getElementById('form-end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd HH:mm:ss");
	    		    	iframe.document.getElementById('form-description').value = calEvent.description;
	    		    	iframe.document.getElementById('form-title').value = calEvent.title;
	    		    	if(calEvent.messagenotice == 1) {
	    		    		iframe.document.getElementById('form-messagenotice').checked = true;	    		    		
	    		    		iframe.document.getElementById('form-remindertime').value =  $.fullCalendar.formatDate(calEvent.remindertime,"yyyy-MM-dd HH:mm:ss");
	    		    		iframe.document.getElementById('showtxt').style.display='block';
	    		    	}else {	    		    		
	    		    	}
	    		    	iframe.document.getElementById('form-color').value = calEvent.color;	    		    	
	    		    },
	    		    okVal:'修改日程',
	    		    ok: function () {
	    		    	var iframe = this.iframe.contentWindow;
	    		    	if (!iframe.document.body) {
	    		        	alert('iframe还没加载完毕呢')
	    		        	return false;
	    		        };
	    		        
	    		        var start = iframe.document.getElementById('form-start').value;
		    		    var end = iframe.document.getElementById('form-end').value;
		    		    var remindertime = iframe.document.getElementById('form-remindertime').value;
		    		    calEvent.title = iframe.document.getElementById('form-title').value;
		    		    calEvent.description = iframe.document.getElementById('form-description').value;
		    		    calEvent.start = $.fullCalendar.parseDate(start);
		    		    calEvent.end = $.fullCalendar.parseDate(end);		    		    		    
		    		    calEvent.color = iframe.document.getElementById('form-color').value;
		    		    if (calEvent.title== '') {
		    		        alert("标题不能为空");
		    		        return false;
		    		     }else if(start== '') {
		    		     	alert("开始日期不能为空");
		    		        return false;
		    		     }else if(end == '') {
		    		        alert("结束日期不能为空");
		    		        return false;
		    		     }else if(iframe.document.getElementById('form-messagenotice').checked) {			    		 
			    		        if(remindertime == '') {
			    		        	alert("短信提醒时间不能为空");
			    		        	return false;
			    		        }
			    		        calEvent.messagenotice = 1;
			    		        calEvent.remindertime = $.fullCalendar.parseDate(remindertime);
		    		     	}else {
		    		        	calEvent.messagenotice = 0;
		    		        	calEvent.remindertime = null;
	    		          	}	    			      
	    		        $.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台,保存到数据库
		    		        	id:calEvent.id,
		                        title: calEvent.title,     
		                        start:start,     
		                        end:end,
		                        description:calEvent.description,		                        
		                        color:calEvent.color,
		                        remindertime:remindertime,
		                        messagenotice:calEvent.messagenotice
	                        }	             	    		        
	                    ); 	 
	    		        $('#calendar').fullCalendar('updateEvent', calEvent);
	    		        //弹出提示
	    		        art.dialog.notice({
	    		            title: '笔记之家',
	    		            width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩
	    		            content: '日程已更新!',
	    		            icon: 'face-smile',
	    		            time: 3
	    		        });
		    		    return true;				        	
	    		    },
	    		    cancel: true,
	    		  //删除日程,保存到数据库
	    		    button: [{
	    		    	name: '删除日程',
	    		        callback: function () {
		    		        //this.content('你同意了').time(2);
		    		         $.post("http://localhost:8080/pnote/schedule/deleteevents",{
				    		 	id:calEvent.id
		                     });    		       
	    		        	$('#calendar').fullCalendar('removeEvents',calEvent.id);
	    		        	art.dialog.notice({
		    		            title: '笔记之家',
		    		            width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩
		    		            content: '日程已删除!',
		    		            icon: 'face-smile',
		    		            time: 3
		    		        });
							return true;
	    		         }	    	
	    		         }]
	    		   });
		    	}
			});				
		});

	function showDetail(obj, e){
		var str;
		if(obj.messagenotice == 1)  str = "短信提醒时间:"+$.fullCalendar.formatDate(obj.remindertime,"yyyy-MM-dd HH:mm:ss");
		else {str = "短信提醒未启动";}
		var eInfo = '<div id="tip"><ul>';
		eInfo += '<li class="clock">' + '开始:'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss") +'</br>结束:'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd HH:mm:ss")+ '</li>';
		eInfo += '<li class="message">' +'日志:'+ obj.description + '<br/> </li>';
		//eInfo += '<li>分类:' + obj.title + '</li>';
		eInfo += '<li class="postmessage">' + str + '<br/> </li>';
		eInfo += '</ul></div>';
		$(eInfo).appendTo($('body'));
		$('#tip').css({"opacity":"0.4", "display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);
		//鼠标移动效果
		$('.fc-event-inner').mousemove(function(e){
			$('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});
		});
	}	
	
</script>
<style type='text/css'>

	body {
		margin-top: 10px;
		text-align: center;
		font-size: 13px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
	
	/********************************************** 鼠标悬停tip提示  ************************************************/
	#tip{
		position: absolute;
		width: 250px;
		max-width: 400px;
		text-align: left;
		padding: 4px;
		border: #87CEEB solid 7px;
		border-radius: 5px;
		background: #00BFFF;
		z-index: 1000;
		behavior: url('/css/css3/pie.htc');
	}
	#tip ul{
		margin: 0;
		padding: 0;
	}
	#tip ul li{
		font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
		font-size:15px;
		list-style: none;
		padding-left: 40px;
	}
	.clock{
		/*line-height: 60px;*/
		background: url('./fullcalendar/images/clock.png') no-repeat;
		background-size:40px 40px;
	}
	.postmessage{
		/*line-height: 60px;
		font-size: 12px;*/
		background: url('./fullcalendar/images/message.png') no-repeat;
		background-size:40px 40px;
	}
	.message{
		/*margin-top: 5px;*/
		/*line-height: 60px;*/
		background: url('./fullcalendar/images/text.png') no-repeat;
		background-size:40px 40px;
	}
</style>
</head>
<body>
	<div id="container">
		<div id='selectdate'></div>
		<div id='calendar'></div>	
	</div>	
</body>
</html>




fullCalendar是一个基于jQuery的日历插件,可以用来显示和管理日程安排。它支持多种日历视图,包括月视图、周视图、日视图和议程视图等,还可以添加事件、拖动和缩放事件等功能。 使用fullCalendar,你可以轻松地创建一个交互式的日历,方便用户查看和管理日程。以下是使用fullCalendar创建日程管理的基本步骤: 1. 引入fullCalendar插件及其依赖库(如jQuery)。 2. 创建一个空的div元素,用于容纳日历。 3. 初始化fullCalendar插件,并设置日历的基本属性(如日期范围、视图类型等)。 4. 添加事件数据到日历中。 5. 监听日历的事件(如事件点击、拖动、缩放等),并根据需要更新事件数据。 下面是使用fullCalendar创建日程管理的示例代码: HTML代码: ``` <div id="calendar"></div> ``` JavaScript代码: ``` $(document).ready(function() { // 初始化fullCalendar插件 $('#calendar').fullCalendar({ // 设置日历属性 header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', selectable: true, selectHelper: true, editable: true, eventLimit: true, events: [ // 添加事件数据 { title: 'Event 1', start: '2021-09-01' }, { title: 'Event 2', start: '2021-09-05', end: '2021-09-07' }, // more events... ], // 监听日历事件 eventClick: function(calEvent, jsEvent, view) { // 处理事件点击事件 }, eventDrop: function(event, delta, revertFunc) { // 处理事件拖动事件 }, eventResize: function(event, delta, revertFunc) { // 处理事件缩放事件 } }); }); ``` 在上面的示例中,我们使用了fullCalendar的基本属性,如header、defaultView、selectable、editable等,并添加了一些事件数据到日历中。我们还监听了一些日历事件,如eventClick、eventDrop、eventResize等,以便根据用户的操作来更新事件数据。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值