I'm trying to figure out how to handle calendar event overlapping the way Google calendar does it. I have an array of events with start and end dates.
Currently I sort the entire array to be in order from earliest to latest then find out how many times an event is overlapped and how many times it is overlapping another. I'm not sure where to go from here, I feel like I could use those values to calculate proper css width % and left %. Am I even on the right track?? I'm doing this as a school project. Thank you in advance!
EDIT: I took a look at the similar question that Markus Jarderot has answered before and found the answer I was looking for. Thank you so much!
function getOverlappingEvents(eventArray) {
var result = [];
eventArray.sort(function(a, b) {
return a.eventStart - b.eventStart;
});
for (var i = 0; i < eventArray.length; i++) {
var overapped = 0;
var overlaps = 0;
var isdate = new Date(eventArray[i].eventStart);
var iedate = new Date(eventArray[i].eventEnd);
for (var x = 0; x < eventArray.length; x++) {
var xsdate = new Date(eventArray[x].eventStart);
var xedate = new Date(eventArray[x].eventEnd);
if(isdate <= xsdate && iedate > xsdate){
overapped++;
}else if(isdate >= xsdate && isdate < xedate){
overlaps++;
}
}
result.push([eventArray[i].calEventID, overapped, overlaps]);
}
return result;
}
function toDom(events, ids){
var domEvents = [];
for (var i = 0; i < events.length; i++) {
var id = events[i].calEventID;
var width = 0;
var left = 0;
var sDate = new Date(events[i].eventStart);
var eDate = new Date(events[i].eventEnd);
var time = sDate.format("htt") + " - " + eDate.format("htt");
var duration = (eDate.getHours() * 60 + eDate.getMinutes()) - (sDate.getHours() * 60 + sDate.getMinutes());
var height = Math.round((duration * 0.75));
var topOffSet = (sDate.getHours() - 6) * 45 + Math.round(sDate.getMinutes() * 0.75);
var status = events[i].calStatus;
var desc = events[i].description;
var json = {id: id, sDate: sDate, eDate: eDate, status: status, height: height+"px", top: topOffSet+"px", width: width+"%", left: left+"%", desc: desc, time: time};
console.log(json);
domEvents.push(json);
}
return domEvents;
}