使用fullCalendar实现展示四周的计划,类似闹钟
利用fullCalendar中的日程事件可以实现，自定义视图
1、自定义视图
显示四周计划
$(selectors.calendar).fullCalendar({
defaultView: 'agendaFourWeek',
customButtons: {
addPlan: {
text: '添加计划',
click: function() {
$("div[name='unShow']").hide();
$(selectors.modify).css('display','none');
$(selectors.delete).css('display','none');
$(selectors.save).css('display','inline-block');
clear();
$(selectors.modal).modal("show");
}
}
},
header: {
left: 'title',
center: '',
right:"today,prev,next,addPlan"
},
height:545,
slotLabelFormat:'H:mm',
slotDuration:'01:00:00',
scrollTime :'00:00:00',
allDaySlot:false,
slotEventOverlap:false,
titleFormat:'YYYY年MM月',
dayNamesShort:['日','一','二','三','四','五','六'],
views: {
agendaFourWeek: {
type: 'agendaWeek',
duration: { weeks: 4 },
}
},
events:getEventsData,
eventAfterRender:function(event, element, view){
//element[0].style.left="0%";
//element[0].style.right="0%";
$(element.context.childNodes).hide();
},
eventClick:function(event, jsEvent, view){
$("div[name='unShow']").show();
$("div[name='unShow2']").hide();
getEditModal(event);
var currentTime=new Date();
$(selectors.save).css('display','none');
if(currentTime>new Date(event.start)){
$(selectors.modify).css('display','none');
$(selectors.delete).css('display','none');
}else{
$(selectors.modify).css('display','inline-block');
$(selectors.delete).css('display','inline-block');
}
$(selectors.modal).modal("show");
},
});
/**
* 获取计划
*/
var begintime,endtime;
function getEventsData(start, end, timezone, callback){
console.log($.fullCalendar.formatDate(start,'YYYY-MM-DD'));
begintime=start;
endtime=end;
var send={
start:$.fullCalendar.formatDate(start,'YYYY-MM-DD'),
end:$.fullCalendar.formatDate(end,'YYYY-MM-DD'),
nodeId:activeNodeId
};
console.log(send)
var done = function (data) {
console.log(data);
error.listen(data.code, data.msg, "加载计划失败！")
.not(function () {
var plans=data.result.planList;
if(data.code==1) {
$(selectors.table).bootstrapTable("refreshOptions", {data: plans || []});
} else {
$(selectors.table).bootstrapTable("refreshOptions", {data:[]});
}
var events = [];
for(var i=0;i2、事件处理
闹钟会有重复事件，如何在fullcalendar中展示的：代码只有一部分，仅是参考
利用js逻辑个个处理：
比如自定义时间：先获取时间段得到两个时间之间的日期，再根据自定义重复的时间添加日程；
var start=$.fullCalendar.formatDate(begintime,'YYYY-MM-DD');
var end=$.fullCalendar.formatDate(endtime,'YYYY-MM-DD');
var result=getBetweenDateStr(start,end);
var a= 3,color="#0b00d4";
if(repeat.length==5&&repeat.indexOf('6')==-1&&repeat.indexOf('7')==-1) {a=1;color="#19d400"}
for(var i=0;i-1){
events.push({
id: plan.id,
title: "",
name:plan.name,
userId:plan.userId,
start: result[i]+' '+new Date(plan.start).Format('hh:mm:ss'),
end : result[i]+' '+new Date(plan.end).Format('hh:mm:ss'),
description:plan.description,
backgroundColor: color,
borderColor: color,
time:"",
repeat:a,
define:plan.repeat
})
}
}
};
/**
* 返回两个时间之间的日期
*/
function getBetweenDateStr(start,end){
var result = [];
var beginDay = start.split("-");
var endDay = end.split("-");
var diffDay = new Date();
var dateList = new Array;
var i = 0;
diffDay.setDate(beginDay[2]);
diffDay.setMonth(beginDay[1]-1);
diffDay.setFullYear(beginDay[0]);
result.push(start);
while(i == 0){
var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
diffDay.setTime(countDay);
dateList[2] = diffDay.getDate();
dateList[1] = diffDay.getMonth() + 1;
dateList[0] = diffDay.getFullYear();
if(String(dateList[1]).length == 1){dateList[1] = "0"+dateList[1]};
if(String(dateList[2]).length == 1){dateList[2] = "0"+dateList[2]};
result.push(dateList[0]+"-"+dateList[1]+"-"+dateList[2]);
if(dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]){ i = 1;
}
};
console.log(result)
return result;
};