今天主要是解决同一时间段多个日程的上下排序的问题，在2.4.0以往的版本中其实都是默认按照事件title来排序的，更早一些版本甚至根本这个排序就无法一一对应起来；遇到多个日程都要折行的时候，第一行的顺序和折行后的日程顺序没办法对应起来；
也就是说顺序的错乱的，有些程序员看到说加个eventOrder属性就可以了，其实还要将fullcalendar插件升级到2.4.0或以上的版本才支持这个属性；
看官方的文档：
eventOrder 2.4.0
确定具有相同时间的垂直排序事件。
字符串/数组/函数，默认值："title"
默认情况下，FullCalendar决定具有较长持续时间和较早开始时间的事件被排序在其他事件之上。但是，事件往往具有相同的确切开始时间和持续时间，对于全天事件尤其如此。默认情况下，发生这种情况时，事件按标题按字母顺序排序。eventOrder提供了覆盖这种行为的能力。
该设置接受几个不同的参数：
-
一个事件对象属性的名称，如
"title"。这可以是非标准字段的名称。排序将按升序进行。如果前缀为减号"-title"，排序将按降序发生。 -
一个逗号分隔的属性名称字符串，如
"title,propA,-propB" -
一个接受两个参数并返回的函数，
-1或者1类似于 sort的比较函数。 -
属性名称和功能类似的数组
[ "title", "-propA", myFunc ]。
以下是作者自己在项目中所写的代码，贴出来给大家看看
//本月出团排期表方法
//数据开始日期，数据结束日期
var prevEventArr=[];//上一个事件源(即是排期)
var AjaxRequestWholeVar;
function CalendarSchedule(startDate,endDate){
var $scheduleBox=$(".person-schedule-box-js");
var $loading=$(".person-schedule-box-js .fc-toolbar .fc-center");
var dataUrl=$scheduleBox.attr("data-url");
AjaxRequestWholeVar=$.ajax({
type:"post",
url:dataUrl,
data:{'startTime':startDate,'endTime':endDate},
beforeSend:function(){
//上下月文字替换
prevNextMonth();
//要先清掉上一个事件源(即是排期)
$scheduleBox.fullCalendar('removeEventSource',prevEventArr);
$loading.css("background-size","16px");
//防止重复请求导致事件叠加显示
if(AjaxRequestWholeVar){
AjaxRequestWholeVar.abort();
}
},
success:function(result){
console.log(result);
if(result.Code==0 && AjaxRequestWholeVar){
$loading.css("background-size","0");
var NewEventArr=[];
$.each(result.Data,function(){
var self=this;
var NewEventEach=
{
id: self.TeamId,
title: self.TeamCode+','+'/mdaoyou/TeamPlan/GetTeamPlanDetail?teamId='+self.TeamId+','+self.StartDate+','+self.EndDate,
start: self.StartDate.replace(/[-]/g,"/"),//统一成斜杠
end: new Date(new Date(self.EndDate.replace(/[-]/g,"/")).getTime()+24*60*60*1000).format("yyyy/mm/dd"),//统一成斜杠//本地测是少一天的，如果测试他们测出多一天则用下面那句
//end: self.EndDate.replace(/[-]/g,"/"),//统一成斜杠
allDay:false,//好像不生效，所以稳操作是这里设置成false然后对end加多一天
className:"each-line-js"
};
NewEventArr.push(NewEventEach);
})
NewEventArr=NewEventArr.sort(function(x,y){
return new Date(x.start).getTime() - new Date(y.start).getTime();
})
var colorClassArr=['color-one','color-two','color-three','color-four'];
var colorIndex=0;
var colorClass=colorClassArr[0];
$.each(NewEventArr,function(i){
if(i%4==0){
colorIndex=0;
colorClass=colorClassArr[colorIndex];
}else{
colorClass=colorClassArr[colorIndex];
}
colorIndex++;
this.className="each-line-js "+colorClass+' class'+this.id;
this.index=i;//按index的值排序
})
//取得数据后将当前排期事件源赋值给prevEventArr等待清掉，重新设置日程排期
$scheduleBox.fullCalendar('removeEventSource',prevEventArr);
prevEventArr=NewEventArr;
$scheduleBox.fullCalendar('addEventSource',NewEventArr);
//按压相同id的排期底色全部显示
$(document).off("mousedown touchstart",".each-line-js").on("mousedown touchstart",".each-line-js",function(){
var clickId=$(this).attr("class").replace(/[^0-9]/g,"");
$(".each-line-js").each(function(){
$(this).css("background-color","transparent");
})
$(".class"+clickId).css("background-color","#EFEFEF");
//防止按下了不消失//但这样就没法持续
// var timer=setTimeout(function(){
// $(".class"+clickId).css("background-color","transparent");
//
// if(timer){
// clearTimeout(timer);
// }
// },1000)
})
$(document).off("mouseup touchend",".each-line-js").on("mouseup touchend",".each-line-js",function(){
var clickId=$(this).attr("class").replace(/[^0-9]/g,"");
$(".class"+clickId).css("background-color","transparent");
})
//出团排期详情弹窗
$(".each-line-js").on("click",function(event){
var self=$(this);
var msgString=self.find(".fc-title").text();
var stringArr=msgString.split(",");
var d = $.showDialog({
title: '查看排期',
message: '要显示的信息',
quickClose: false,
onClose : function () {
},
buttons : [
{
text : '取消',
className : 'cancel',
callback :function () {
}
},
{
text : '查看详情',
url :stringArr[1],
callback :function () {
}
}
]
});
})
}else{
$loading.css("background-size","0");
console.log("出团排期表数据请求不成功，请刷新页面重试！");
}
},
error:function(msg){
},
complete:function(msg){
}
})
}
