- 浏览: 106978 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hibluse:
我实现了一种更好的日历场景,我觉得比这个好看。不过根据不同的需 ...
Fullcalendar 开发实例 -
godofgame:
如果直接在events指定ajax页面比你这种方法差在什么地方 ...
Fullcalendar 开发实例 -
miya.:
楼主可不可以发一份到我邮箱mmjiao@isoftstone. ...
Fullcalendar 开发实例 -
thjjava:
请问一下,如果每天的事件显示的过多,那样的话,日历就会拉伸很长 ...
Fullcalendar 开发实例 -
hibluse:
大神,源码求一份非常感谢,yanhuodig@sina.com ...
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文件列表
6行还是5行好像可以设置的,具体怎么设置还不清楚,关于3月份的数据显示在2月是你查询的时候就给查出来了吧,不查就可以了吧,事件可以重新进行渲染的
源码里写死了,把
改为
就行了
由于该部分结合了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()); } -->
评论
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
非常感谢,
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
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
谢谢了!
我的邮箱:870467110@qq.com
谢谢了!
21 楼
寂寞如雪
2013-10-12
请问这个可以给我学习下吗?
我的邮箱:1436456278@qq.com
谢谢了!
我的邮箱: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月。如何解决呢?
像你上面的图片那里。也是多了一行。而且你的图片的日期是: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
shmily_xy_ck@163.com
发表评论
-
js Array清空
2012-02-23 16:10 1677//清除数组值 Array.prototype ... -
javascript 简易日历控件 应用
2012-01-14 09:14 1480function is_leap(year) { ret ... -
js 数组去重复操作
2012-01-08 09:10 2012扩展数组的属性,添加去重复函数; 我是使用的数组中的内容是Js ... -
javascript 日期格式函数
2012-01-08 08:40 1162采用 js prototype 属性,对Date类型的属性进行 ... -
jquery 技巧
2012-01-06 16:15 10821、层级选择设置radio选中,背景着色 $(func ...
相关推荐
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
fullCalendar实例及Api,是一个封装好的JavaScript
fullcalendar_lunar+农历实例
FullCalendar 2.9 实现的排课页面,实现了课程展示,bootstrap弹框,layer浮动层展示功能
fullcalendar日历插件C#实例,从数据库读写,可用于二次开发
fullcalendar源码示例,附开发类库,使用手册,及示例。
FullCalendar简单开发
fullcalendar-4.4.0官方示例demo,包含了所有的官方demo示例,里面包括20左右个例子,拖拽、本地化、日视图、月视图、周视图、代办视图、谷歌日历集成、自定义视图等
用fullcalendar做的日程管理,有代码
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
fullcalendar是个很强大的日历控件,可以用它进行排班、排会议、拍任务,很直观,用户体验良好 fullcalendar例子源码打包给大家下载
在fullcalendar-1.6.4的基础上增加农历和相关节日,直接拿过来可以用,包含所有的CSS、JS、HTML文件,可以直接应用于项目之中
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
基于fullCalendar2.2.7 增加年视图,方便大方
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发
fullcalendar扩展双击事件 源码版(直接改动源码)和扩展版(支持新版本)
Laravel开发-laravel-fullcalendar 完整日历包的Laravel组件
fullcalendar教程
fullcalendar日历 可点击事件
fullCalendar api中文文档