項目中用到了日程展現的內容，採用日曆的方式進行了展現，爲此採用了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文件列表
由於該部分結合了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());
}
-->