FullCalendar（日程管理控件）

最新推荐文章于 2023-08-25 16:58:37 发布
最新推荐文章于 2023-08-25 16:58:37 发布
阅读量7.1k 收藏 7
点赞数 1
分类专栏： Jquery 文章标签： function iframe microsoft date calendar 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gz_jmark/article/details/7939718
版权

(以下是我学习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>




Jmark_GC
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
fullCalendar在C#下的应用
firstLoveChen的专栏
10-31 1226
前端Jquery代码，这是格式化过日期的：           $(document).ready(function () {             var st_d = new Date();             var y = st_d.getFullYear();             var m = st_d.getMonth();             var d
fullcalendar日历控件知识点集合
热门推荐
FrancisLaw的学园
07-12 6万+
1、基本语法：        首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。当然，这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方法、委托(函数回调)作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝大多数工作就
fullCalendar插件的使用简单教程
Reborn_Chang的博客
01-19 5万+
最近项目中想实现一个基于日历的事件提醒,百度众多资源后选定使用fullCalendar进行实现,那首先来说下fullCalendar的官网:https://fullcalendar.io/在这上面有简单的demo以及API,但是是英文的,那么英文不太好的朋友可以选择翻译或者来看这个中文版的API:http://www.jb51.net/article/104841.htm,相对于官网的API,这个...
fullcalendar demo
04-02
fullcalendar是对Google Calendar的一种扩展，可随意更改日程，简单方便，界面简约，最新版fullcalendar-3.9.0， 文档和持续更新，有条件的请登录官网 https://fullcalendar.io/， 该资源解压可直接打开查看demo
使用FullCalendar做一个自己的日程管理（二）- 事件篇
Fanyl的博客
08-17 2万+
FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. 1. 鼠标点击事件（1）通过鼠标点击日历某一天触发dayClick的callback，参数date为点击的日期或时间，常用于为某一天或为某一时刻添加日程，具体方法如下（使用Console日志打印点击的日期或时间） ：d
关于fullcalendar实现多列日程预约，多个会议室预约实现
最新发布
XBBXsama的博客
08-25 434
fullcalendar实现多列日程预约，查了当下百度很多教程，文档，以及各种技术网站，均未实现多列效果，只有多行效果，通过官网文档查询，终于整明白了。还有一些基础配置什么的网上可以找到，这里就不重复粘贴了（主要是我研究搞的代码太乱了，只有这部分是多列日程核心）这里需要用到一个插件resourceTimeGridPlugin，它可以让我们的日视图变成多列的。如果其他组件跟我不一样不用在意，主要是这个多列的插件，其他是基础组件什么的。大功告成，把基础代码添加上去，这样就能实现多列日程预约了。
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
m0_49017085的博客
04-07 7666
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
FullCalendar 日历插件
zxd的博客
03-04 984
使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options}); 接受的是一个option对象 普通属性 2.1. year, month, date: 整数, 初始化加载时的日期. 2.2. defaultView: 字符串类型, 默认是’month; 2.2.1. 允许的views: 2.2.1.1. month 一页...
jQuery日程管理控件glDatePicker用法详解
01-19
之前接触过一款日程管理控件，叫 FullCalendar ，功能很强大，会列出每天的事项，可选择编辑并且可以定制自己的日历，然而，有时候，我们的网页上只需要一个简单的日历，迷你但实用，有日程安排的日期高亮显示，可...
fullcalendar 日历 控件 知识点集合
01-30
fullcalendar 日历 控件 知识点集合
fullcalendar-5.5.1.zip
03-24
官网fullcalendar-5.5.1版本，包含基础实例。可用于日程设置，排班管理等
fullcalendar例子
04-16
fullcalendar是个很强大的日历控件,可以用它进行排班、排会议、拍任务,很直观,用户体验良好 fullcalendar例子源码打包给大家下载
基于jquery的日历控件 fullcalendar 3.9.0
10-07
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发
日历插件FullCalendar去掉内部滚动条方法
SuperCookies的博客
05-29 2824
日历插件FullCalendar去掉内部滚动条方法 如果把height高度设置为‘auto’,但是内部滚动条还在的话，可以通过检查元素你会发现.fc-view-container的box-sizing:content-box;所以做如下修改： &lt;style&gt; .fc-view-container *, .fc-view-container ::after, .fc-view-c...
vue必会知识点
weixin_64948861的博客
02-23 455
1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，
使用FullCalendar做日程管理
helloworld的博客
11-06 4597
Github地址：https://github.com/fullcalendar/fullcalendar 官网地址：http://fullcalendar.io/ 由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ： script src='jquery.min.js'>script>11 然后是 FullCalendar 的依赖（可以在FullCal
C# asp.net 4.6 For webForm使用FullCalendar3.8基础篇
davisteisan的博客
02-08 861
由于使用FineUI在开发系统，要用到日程管理，而FineUI刚好没有。感谢三生石同志哈，期望新版本可以有。 只能自力更生了。折腾了好久终于成型了。当然中间免不了要查阅CSDN上各位的文章做参考，虽然到目前【2018-02-08】为止还没有FullCalendar3.8最新版的实例可参考。但还是在其中获取了很多灵感，非常感谢。 以下是需要用到的资源： 1.最新版: https://ful
甘特图详解
天道酬勤
01-14 4万+
甘特图详解一、介绍二、历史发展三、优缺点1、优点2、 缺点四、应用范围1、项目管理2、其它领域五、软件工具六、使用1、效果图示2、步骤3、资料参考 一、介绍 甘特图是一种条形图，它说明了项目进度表。该图表列出了垂直轴上要执行的任务，以及水平轴上的时间间隔。图中水平条的宽度显示了每个活动的持续时间。甘特图说明了项目的终端元素和摘要元素的开始和结束日期。终端元素和摘要元素构成了项目的工作分解结构。现...
日程组件（vue2+FullCalendar）,日程查看，修改，删除等逻辑；
foolishma的博客
09-15 2873
废话不多说，直接上代码： 首先修改一下package.json文件内容，然后npm i即可：(与fullcalendar无关的，可自行处理删除) package.json: { "name": "webtemplate", "version": "1.0.0", "description": "A Vue.js project", "author": "foolishma", "private": true, "scripts": { "dev": "webpack-de
fullCalendar日程管理
05-18
以下是使用fullCalendar创建日程管理的基本步骤： 1. 引入fullCalendar插件及其依赖库（如jQuery）。 2. 创建一个空的div元素，用于容纳日历。 3. 初始化fullCalendar插件，并设置日历的基本属性（如日期范围、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值