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
先来个效果图：
http://dl.iteye.com/upload/attachment/0063/5216/20215802-94ca-37cf-ac57-04d014f5e3cc.jpg
直接贴上代码：
需要导入的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.startDateLong <= datetime.getTime() &&allProjects.endDateLong >= datetime.getTime()){$("#projectlist").append("<li><span class='first'>"+(++j)+")</span><spanclass='second'>"+allProjects.projectName+"</span><spanclass='third'><a href=xxxurl?id="+allProjects.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.id===this.id){j=++i;}}newArray.push(this);}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("-");var month = date.split("-");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("-");var month = date.split("-");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.fullMoon == 1 ){$("#fullmonthprojects").append("<li><span class='first'>"+(++j)+")</span><spanclass='second'>"+data.projectName+"</span><spanclass='third'><a href='xxxurl?id="+data.id+"'>详情</a></span></li>");continue;} allProjects.push(data) //alert(data.id); var obj = new Object(); obj.id = data.id; obj.title = data.shortName; obj.projectName = data.projectName; //obj.allDay = data.allDay; obj.start = new Date(data.startDateLong) //$.fullCalendar.parseDate(data.startDateLong/1000); obj.end = new Date(data.endDateLong)//$.fullCalendar.parseDate(data.end/1000); obj.backgroundColor = data.projectColor; obj.location=data.meetingAddress; //alert(data.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());}-->
页:
[1]