`
lovexz365
  • 浏览: 107901 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Fullcalendar 开发实例

阅读更多
项目中用到了日程展现的内容,采用日历的方式进行了展现,为此采用了FullCalendar插件在基础上进行了开发。效果真的是不错,具体文档请见官网: http://arshaw.com/fullcalendar/docs/,中文翻译详见:http://blog.csdn.net/lgg201/article/details/4818941
由于该部分结合了MY97datepicker日期控件设计到了对fullcalendar 按钮的重新绑定问题。采用jquery的事件绑定机制。

关于MY97datepicker 详见 http://www.my97.net/dp/demo/index.htm
先来个效果图:

直接贴上代码:
需要导入的CSS与js文件列表

    <link rel='stylesheet' type='text/css' href='fullcalendar/theme.css' />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
    <script type='text/javascript' src='jquery/jquery-1.5.2.min.js'></script>
    <script type='text/javascript' src='jquery/jquery-ui-1.8.11.custom.min.js'></script>
    <script type='text/javascript' src='fullcalendar.min.js'></script>


		<script type='text/javascript'><!--
			var allProjects  = new Array();
			var hostname = location.hostname;
			/*dayclick绑定的函数*/
			function showCurrentDayProjects(datetime){
				$("#projectlist").empty()
				var j = 0
				$("#selectDayClick").empty().append(datetime.pattern("yyyy-MM-dd"));
	for(var i=0 ;i<allProjects.delRepeat().length;i++){
					if (allProjects[i].startDateLong <= datetime.getTime() &&  allProjects[i].endDateLong >= datetime.getTime()){
						$("#projectlist").append("<li><span class='first'>"+(++j)+")</span><span  class='second'>"+allProjects[i].projectName+"</span><span  class='third'><a href=xxxurl?id="+allProjects[i].id+"'>详情</a></span></li>")
					}
				}
			}
			
			
			Array.prototype.delRepeat=function(){
				var newArray=new Array();
				var len=this.length;
				for (var i=0;i<len ;i++){
					for(var j=i+1;j<len;j++){
						if(this[i].id===this[j].id){
							j=++i;
						}
					}
					newArray.push(this[i]);
				}
				return newArray;
			}


		$(document).ready(function() {
			var date = new Date();
			var d = date.getDate();
			var m = date.getMonth();
			var y = date.getFullYear();
			var d = new Date();
			$("#selecteddate").attr("value",date.pattern("yyyy-MM"));
			
			var calendar  = $('#calendar').fullCalendar({
				theme: false,
				editable:false,
			 	header: {   
	               left:  '',  
	               center: 'prev, today next ',
	               right: 'month' //right: 'month,agendaWeek,agendaDay'  
	            },   
	           
		        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
	            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
	            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
	            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
	            today: ["今天"],
	            firstDay: 1,
	            buttonText: {
		          today: '本月',
				  month: '月',
				  week: '周',
				  day: '日',
				  prev: '上一月',
				  next: '下一月'
		      	},
				editable: false,
				currentTimezone: 'Asia/Beijing',
				eventClick: function(event) {
					if($("#eventInfo").css("display")=="none")
					{
						alert(event.projectName)
						var x = window.event.x;
						var y = window.event.y;
						//alert(x + "<>" + y );
						$("#eventInfo").css("display", "block");
						$("#eventInfo").css("top",200);
						$("#eventInfo").css("left",300);
						$("#name").html(event.name);
						$("#time").html(event.time);
						$("#location").html(event.location);
						$("#participants").html(event.participants);
						$("#manager").html(event.manager);
					}
					else
					{
						$("#eventInfo").css("display", "none");
					}
					return false;
				},
				eventMouseover:function(event){
					$("#eventInfo").css("display", "block");
					$("#eventInfo").css("top",200);
					$("#eventInfo").css("left",300);
					$("#name").html(event.projectName);
					$("#time").html(event.start.pattern("yyyy-MM-dd") +"至"+event.end.pattern("yyyy-MM-dd"));
					$("#location").html(event.location);
					$("#participants").html(event.participants);
					$("#manager").html(event.manager);
					$("#eventInfo").show();
				},
				eventMouseout:function(event){
					$("#eventInfo").hide();
				},
	
	               dayClick: function(date, allDay, jsEvent, view ){
	               		showCurrentDayProjects(date);
	               },
	               selectable: false,   
	               selectHelper: false,   
	               select: function(start, end, allDay) {   
	                   var title = prompt('请输入名称:');   
	                   if (title) {   
	                      calendar.fullCalendar('renderEvent',   
	                          {   
	                               title: title,   
	                               start: start,   
	                               end: end,   
	                               allDay: allDay   
	                           },   
	                           true // make the event "stick"   
	                       );//把刚输入的日程计划在页面上进行显示   
	                      //alert($.fullCalendar.formatDate(start,'yyyy-MM-dd HH:mm:ss'));   
	                       $.post("schedule/add",{//把刚输入的日程计划信息传到后台,保存到数据库   
	                            title: title,   
	                	        start:($.fullCalendar.formatDate(start,'yyyy-MM-dd h:mm:ss')) ,   
	                            end:($.fullCalendar.formatDate(end,'yyyy-MM-dd h:mm:ss')),   
	                            allDay:allDay}   
	                        );   
	                   }   
	                   calendar.fullCalendar('unselect');   
	               },   
	               editable: false,   
	            	  //events:'/tiantian/schedule/containEvents'   
	               events:[]//表示初始化时的数据,这里是空的,等前面的ajax请求返回后就会有新的数据在页面显示   
				
			});		
			// 重新注册 左上角三个按钮 : 功能按钮
			jQuery('.fc-button-prev').unbind('click');
			jQuery('.fc-button-next').unbind('click');
	
			jQuery('.fc-button-prev').bind('click', fnMthChange);
			jQuery('.fc-button-next').bind('click', fnMthChange);
			jQuery('.fc-button-today').bind('click', fnMthChange);
			function fnMthChange() {
				changeTime(this.innerText);
				if (jQuery('#calendar').fullCalendar('getView').name == "month") {
					showTime();
				}
			}
			
			
			function perMonth(){
				var date = $("#selecteddate").attr("value",date);
				var year  = date.split("-")[0];
				var month = date.split("-")[1];
				if(month >1 ){
					month = month -1
					$("#selecteddate").attr("value",year +"-" +month)
				}else{
					year = year - 1 
					month = 12;
					$("#selecteddate").attr("value",year +"-" +month)
				}
			}
			
			function nextMonth(){
				var date = $("#selecteddate").attr("value",date)
				var year  = date.split("-")[0];
				var month = date.split("-")[1];
				if(month <12 ){
					month = Number(month) + 1
					$("#selecteddate").attr("value",year +"-" +month)
				}else{
					year = Number(year) + 1 
					month = 1;
					$("#selecteddate").attr("value",year +"-" +month)
				}
			}
			
			function thisMyMonth(){
				var d = new Date();
				// alert("今天星期"+"天一二三四五六".charAt(new Date(d).getDay()));
				$("#selecteddate").attr("value",d.pattern("yyyy-MM")); 
			}
			function changeTime(label) {
				if (jQuery.trim(label) == "上一月") {
					jQuery('#calendar').fullCalendar('prev');
					perMonth();
				} else if (jQuery.trim(label) == "下一月") {
					jQuery('#calendar').fullCalendar('next');
					nextMonth();
				} else if (jQuery.trim(label) == "本月") {
					jQuery('#calendar').fullCalendar('today');
					thisMyMonth();
				}
			}
			showTime();
		});
	
		
		function showTime() {
			var view = jQuery('#calendar').fullCalendar('getView');
			var start = toStrDateTime(view.start); // view.calendar.formatDate(view.start,
													// 'u2');
			var end = toStrDateTime(view.end);// view.calendar.formatDate(view.end,
												// 'u2');
			// 查询
			   var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd");   
                   var viewviewName = view.name;   
                   var onlyshowMe  =  $("#onlyMeTask").attr("checked");
                   //alert(viewStart+viewName);   
                   //alert(viewStart);
                   var datetime = new Date().getTime();
                  $("#calendar").fullCalendar('removeEvents');   
                
	                for(var i=  allProjects.length -1 ;i>0 ;i--){
	                	allProjects.pop();
	                }
                  $.getJSON('xxxurl',{onlyMeTask:onlyshowMe,underYear:'2011',underMonth:'12',start:viewStart,datetime:datetime},function(data) {   
                	  
                	   var j = 0;
                	   $("#fullmonthprojects").empty();
                       for(var i=0;i<data.length;i++) {   
                       
	                       if(data[i].fullMoon == 1 ){
								$("#fullmonthprojects").append("<li><span class='first'>"+(++j)+")</span><span  class='second'>"+data[i].projectName+"</span><span  class='third'><a href='xxxurl?id="+data[i].id+"'>详情</a></span></li>");
								continue;
							}
                       	   allProjects.push(data[i])
                           //alert(data[i].id);   
                           var obj = new Object();   
                           obj.id = data[i].id;   
                           obj.title = data[i].shortName;   
                           obj.projectName = data[i].projectName;
                           //obj.allDay = data[i].allDay;   
                           obj.start = new Date(data[i].startDateLong) //$.fullCalendar.parseDate(data[i].startDateLong/1000);   
                           obj.end = new Date(data[i].endDateLong)//$.fullCalendar.parseDate(data[i].end/1000);   
                           obj.backgroundColor = data[i].projectColor;
                           obj.location  =  data[i].meetingAddress;
                           //alert(data[i].start);   
                           //alert(obj.start);   
                           //alert($.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss"));   
                           $("#calendar").fullCalendar('renderEvent',obj,true);//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示   
                       }   
                   });   
		}
	function toStrDateTime(object) {
		var view = jQuery('#calendar').fullCalendar('getView');
		var str = view.calendar.formatDate(object, 'u');
	
		str = str.replace("T", " ");
		str = str.replace("Z", "");
		return str;
	}
	
	
	function closeEventInfo()
	{
		$("#eventInfo").css("display","none");
	}
	
	function gotoDate(){
		var selectdstr =    $("#selecteddate").val();   
     	var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");   
     	$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());  
	}
	
-->

  • 大小: 66.5 KB
分享到:
评论
35 楼 hibluse 2015-11-25  
我实现了一种更好的日历场景,我觉得比这个好看。不过根据不同的需求有不同的实现方式。哈哈哈。图就不上了。
34 楼 godofgame 2015-06-07  
如果直接在events指定ajax页面比你这种方法差在什么地方。 我想知道下。为什么要一个单元格一个单元格的去填充。
33 楼 miya. 2014-11-17  
楼主可不可以发一份到我邮箱mmjiao@isoftstone.com
32 楼 thjjava 2014-08-06  
请问一下,如果每天的事件显示的过多,那样的话,日历就会拉伸很长,那该怎么限制显示的事件数呢?
31 楼 hibluse 2014-07-10  
大神,源码求一份
非常感谢,
yanhuodig@sina.com
30 楼 xia9527 2014-05-28  
借鉴一份 kk_8983@foxmail.com
29 楼 xia9527 2014-05-28  
能否发一份源码借鉴一下
28 楼 maccter 2014-05-27  
你好 请问selecteddate这个是放哪?
27 楼 w751701226 2014-05-22  
可不可以求份源码学习...
w294985850@sina.com
26 楼 真狼王 2014-04-22  
如何在 dayClick事件中获取点击当天的Events对象???
25 楼 Miss_飘 2014-03-11  
麻烦,发我一份源码吧!多谢!grace.liu1989@gmail.com
24 楼 wge838 2014-03-05  
可以学习下否?470801428@qq.com ,先谢谢了!
23 楼 alexkaleo 2014-03-04  
lz不知道能否将代码共享给学习下。263720230@qq.com谢谢了。
22 楼 SKYGIS 2014-02-24  
您好 这个可以给我一份吗?
我的邮箱:870467110@qq.com
谢谢了!
21 楼 寂寞如雪 2013-10-12  
请问这个可以给我学习下吗?
我的邮箱:1436456278@qq.com
谢谢了!
20 楼 小山羊329 2013-06-13  
您好,可以咨询您个问题吗?您那个项目经理是怎么显示出来的
19 楼 Kobe126 2013-06-04  
想知道,“只显示我的任务”还有前面那个复选框 怎么加到这个位置的???
18 楼 mnero 2013-01-30  
你好..请问这个日历能加上周数的显示吗?
17 楼 fzbk 2012-10-25  
lovexz365 写道
angel1472583690 写道
你好。我想请问,回执出来的月历。会多了一行。比如2012的7月是1号到31号,可是它会绘制多一行。31号之后,还会显示到11号。本来是5行7列。结果显示6行7列。这个问题如何解决?
像你上面的图片那里。也是多了一行。而且你的图片的日期是:2012-2月份的。如果3月1号有事件,也会显示在2月。如何解决呢?



6行还是5行好像可以设置的,具体怎么设置还不清楚,关于3月份的数据显示在2月是你查询的时候就给查出来了吧,不查就可以了吧,事件可以重新进行渲染的


源码里写死了,把
renderBasic(6, rowCnt, nwe ? 5 : 7, true);

改为
renderBasic(5, rowCnt, nwe ? 5 : 7, true);

就行了
16 楼 苍ing 2012-10-16  
可不可以求份源码学习...
shmily_xy_ck@163.com

相关推荐

    fullCalendar实例及Api

    **全篇幅正文** 在IT领域,特别是在网页开发中,日程管理是一个常见的需求,而fullCalendar是一款功能...在实际开发中,结合实例和API文档,你将能够更好地利用这个工具,提升用户体验,实现高效的时间管理和协作。

    fullcalendar日历插件C#实例

    它提供了丰富的自定义选项,使得开发者可以轻松地根据需求进行二次开发。在C#环境下,我们可以利用FullCalendar与后端数据进行交互,实现动态加载和更新日历事件。 **一、FullCalendar基本用法** 1. **引入资源**...

    FullCalendar 2.9 排课实例,课节,拖拽

    5. **开发实践**: - 数据获取:全历通常需要一个数据源来获取课程信息,这可以是JSON格式的服务器数据,也可以是本地静态数据。 - 事件处理:监听全历的`eventDrop`和`eventResize`事件,实现拖放和缩放操作后的...

    jquery的fullcalendar使用案例

    在基础配置中,只需要引入必要的CSS和JS文件,然后在HTML结构中创建一个容器元素,通过JavaScript初始化FullCalendar实例。例如: ```html &lt;link rel="stylesheet" href="fullcalendar-1.4.8/fullcalendar.css"&gt; ...

    fullcalendar例子

    2. 试用备份:这个文件可能包含了开发者在开发过程中创建的备份文件。备份文件通常是防止意外丢失代码的重要手段,可以从中了解到项目的迭代过程和可能的修改历史。 3. Datemanagement:这是一个文件夹,可能包含了...

    fullcalendar 源码示例

    全历(FullCalendar)是一款广泛使用的JavaScript日历插件,它能够帮助开发者在网页上创建交互式的、功能丰富的日程管理界面。这个源码示例是全历版本1.6.4,它包含了完整的源代码、开发类库、使用手册以及示例,...

    fullcalendar-1.6.4-修改增加农历节日版.zip

    只需按照FullCalendar的文档说明进行配置,就可以让日历支持农历显示和节日标记,大大简化了开发流程。 需要注意的是,由于FullCalendar 1.6.4版本相对较为老旧,可能不支持最新的浏览器特性或者存在已知的安全漏洞...

    前端日历插件fullcalendar

    **全栈前端开发中的日历插件:FullCalendar** 在Web开发中,日历插件是一种常见的组件,用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库,专为前端开发者设计,它能帮助创建交互式的、...

    fullcalendarDemo

    在这个"fullcalendarDemo"项目中,我们很显然会看到一个关于如何使用FullCalendar的实例。 FullCalendar的主要特点包括: 1. **多视图展示**:FullCalendar支持多种视图展示,如日视图、周视图、月视图、工作日...

    JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单...

    fullcalendar插件(含demo)

    7. **插件扩展**:FullCalendar具有良好的扩展性,可以通过官方或社区开发的插件,如`selectable`、`dragAndDrop`等,增强功能。 8. **本地化**:支持多语言,通过`lang`属性切换不同的语言环境,满足国际化的应用...

    PHP+Mysql+FullCalendar日历拖动与数据保存

    在本项目中,“PHP+Mysql+FullCalendar日历拖动与数据保存”是一个结合了后端编程语言PHP、数据库管理系统MySQL以及前端日历插件FullCalendar的应用实例,旨在实现日程管理功能,允许用户通过拖放操作在日历上安排...

    使用插件fullcalendar日历插件制作课程表

    使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741

    fullcalendar-5.4.0.zip

    总的来说,FullCalendar 5.4.0是一个功能强大且易于使用的日历组件,无论是在企业级项目还是个人开发中,都能提供出色的时间管理和事件展示解决方案。通过深入学习和实践,开发者可以充分利用其特性,打造个性化的...

    FullCalendar应用

    引入后,创建一个空的`div`元素作为日历容器,然后在JavaScript代码中实例化FullCalendar对象,指定所需的配置选项。 配置选项是FullCalendar的强大之处,它提供了丰富的设置,例如: 1. **默认视图**:你可以设置...

    前端项目-fullcalendar.zip

    全尺寸拖放事件日历——前端项目-fullcalendar.zip是一个包含前端开发资源的压缩包,...在实际项目中,开发者可以参考这些文件来设置自己的FullCalendar实例,结合后端数据源实现一个完整的全尺寸拖放事件日历应用。

    fullcalendar.rar

    你可以根据实际需求调整配置,比如改变视图切换按钮的位置、自定义事件渲染样式,甚至开发自定义插件。通过深入学习全历的API文档,你将能够发掘更多高级功能,如资源分配、时间段选择、时间区划分等,以满足复杂的...

    fullCalendar 制作的仿谷歌日历demo java oracle

    对于学习Web开发和日历应用的人来说,这是一个有价值的参考实例,可以帮助理解前后端交互、数据库设计以及用户认证等方面的知识。不过,实际应用中还需要考虑更多因素,如安全性、性能和用户体验的改进。

    angular1.4.10 + fullcalendar 2.8

    综合以上信息,这个项目可能是一个教程或实例,展示了如何在AngularJS应用中集成FullCalendar,创建一个交互式的日程管理工具。开发者可以通过分析这些文件了解如何设置数据源、处理日历事件以及自定义FullCalendar...

    fullcalendar-vue.zip

    通过这个“fullcalendar-vue”项目,开发者不仅可以学习到如何将FullCalendar与Vue结合,还能进一步理解Vue组件化开发、数据绑定、API交互以及响应式设计等核心概念,对于提升Vue.js的开发能力大有裨益。同时,这也...

Global site tag (gtag.js) - Google Analytics