Move (fixed) code to display 'N more...' links to fullcalendar core; fixes #434

plugins/calendar/calendar_ui.js

@@ -49,7 +49,6 @@ function rcube_calendar_ui(settings)
     var attendees_list;
     var freebusy_ui = { workinhoursonly:false, needsupdate:false };
     var freebusy_data = {};
-    var event_resizing = false;
     var current_view = null;
     var exec_deferred = bw.ie6 ? 5 : 1;
     var sensitivitylabels = { 0:rcmail.gettext('public','calendar'), 1:rcmail.gettext('private','calendar'), 2:rcmail.gettext('confidential','calendar') };
@@ -1686,37 +1685,7 @@ function rcube_calendar_ui(settings)
         var prefix = event.sensitivity != 0 ? String(sensitivitylabels[event.sensitivity]).toUpperCase()+': ' : '';
         element.attr('title', prefix + event.title);
       }
-      if (view.name == 'month') {
+      if (view.name != 'month') {
-        if (event_resizing)
-          return true;
-        else if (view._suppressed[event.id])
-          return false;
-        
-        // limit the number of events displayed
-        var sday = event.start.getMonth()*100 + event.start.getDate();
-        var eday = event.end ? event.end.getMonth()*100   + event.end.getDate() : sday;
-        
-        // increase counter for every day
-        for (var d = sday; d <= eday; d++) {
-          if (!view._eventcount[d]) view._eventcount[d] = 1;
-          else                      view._eventcount[d]++;
-        }
-        
-        if (view._eventcount[sday] >= view._maxevents) {
-          view._suppressed[event.id] = true;
-          
-          // register this event to be the last of this day segment
-          if (!view._morelink[sday]) {
-            view._morelink[sday] = 1;
-            view._morelink['e'+event.id] = sday;
-          }
-          else {
-            view._morelink[sday]++;
-            return false;  // suppress event
-          }
-        }
-      }
-      else {
         if (event.location) {
           element.find('div.fc-event-title').after('<div class="fc-event-location">@&nbsp;' + Q(event.location) + '</div>');
         }
@@ -2314,24 +2283,10 @@ function rcube_calendar_ui(settings)
       },
       // event rendering
       eventRender: fc_event_render,
-      eventAfterRender: function(event, element, view) {
+      // render element indicating more (invisible) events
-        // replace event element with more... link
+      overflowRender: function(data, element) {
-        var sday, overflow, link;
+        element.html(rcmail.gettext('andnmore', 'calendar').replace('$nr', data.count))
-        if (view.name == 'month' && (sday = view._morelink['e'+event.id]) && (overflow = view._morelink[sday]) > 1) {
+          .click(function(e){ me.fisheye_view(data.date); });
-          link = $('<div>')
-            .addClass('fc-event-more')
-            .html(rcmail.gettext('andnmore', 'calendar').replace('$nr', overflow))
-            .css({ position:'absolute', left:element.css('left'), top:element.css('top'), width:element.css('width') })
-            .data('date', new Date(event.start.getTime()))
-            .click(function(e){ me.fisheye_view($(this).data('date')); });
-          element.replaceWith(link);
-        }
-      },
-      eventResizeStart: function(event, jsEvent, ui, view) {
-        event_resizing = event.id;
-      },
-      eventResizeStop: function(event, jsEvent, ui, view) {
-        event_resizing = false;
       },
       // callback for date range selection
       select: function(start, end, allDay, e, view) {
@@ -2427,10 +2382,8 @@ function rcube_calendar_ui(settings)
         }
       },
       viewRender: function(view) {
-        view._maxevents = Math.floor((view.element.parent().height()-18) / 108) - 1;
+        if (view.name == 'month')
-        view._eventcount = [];
+          fc.fullCalendar('option', 'maxHeight', Math.floor((view.element.parent().height()-18) / 6) - 35);
-        view._suppressed = [];
-        view._morelink = [];
       }
     });
 

plugins/calendar/lib/js/fullcalendar.js

@@ -663,6 +663,9 @@ function Calendar(element, options, eventSources) {
 			options[name] = value;
 			currentView.start = null; // force re-render
 		}
+		else if (name == 'maxHeight') {
+			options[name] = value;
+		}
 	}
 	
 	
@@ -4614,6 +4617,9 @@ function DayEventRenderer() {
 		var seg;
 		var top;
 		var k;
+		var overflows;
+		var overflowLinks;
+		var maxHeight = opt('maxHeight');
 		segmentContainer[0].innerHTML = daySegHTML(segs); // faster than .html()
 		daySegElementResolve(segs, segmentContainer.children());
 		daySegElementReport(segs);
@@ -4625,26 +4631,69 @@ function DayEventRenderer() {
 		// set row heights, calculate event tops (in relation to row top)
 		for (rowI=0; rowI<rowCnt; rowI++) {
 			levelI = 0;
+			overflows = [];
+			overflowLinks = {};
 			colHeights = [];
 			for (j=0; j<colCnt; j++) {
+				overflows[j] = 0;
 				colHeights[j] = 0;
 			}
 			while (i<segCnt && (seg = segs[i]).row == rowI) {
 				// loop through segs in a row
 				top = arrayMax(colHeights.slice(seg.startCol, seg.endCol));
+				if (maxHeight && top + seg.outerHeight > maxHeight) {
+					seg.overflow = true;
+				}
+				else {
 					seg.top = top;
 					top += seg.outerHeight;
+				}
 				for (k=seg.startCol; k<seg.endCol; k++) {
+					if (overflows[k])
+						seg.overflow = true;
+					if (seg.overflow) {
+						if (seg.isStart && !overflowLinks[k])
+							overflowLinks[k] = { seg:seg, top:top, date:cloneDate(seg.start, true), count:0 };
+						if (overflowLinks[k])
+							overflowLinks[k].count++;
+						overflows[k]++;
+					}
+					else
 						colHeights[k] = top;
 				}
 				i++;
 			}
 			rowDivs[rowI].height(arrayMax(colHeights));
+			renderOverflowLinks(overflowLinks, rowDivs[rowI]);
 		}
 		daySegSetTops(segs, getRowTops(rowDivs));
 	}
 	
 	
+	function renderOverflowLinks(overflowLinks, rowDiv) {
+		var container = getDaySegmentContainer();
+		var colCnt = getColCnt();
+		var element, triggerRes, link;
+		for (var j=0; j<colCnt; j++) {
+			if ((link = overflowLinks[j])) {
+				if (link.count > 1) {
+					element = $('<a>').addClass('fc-more-link').html('+'+link.count).appendTo(container);
+					element[0].style.position = 'absolute';
+					element[0].style.left = link.seg.left + 'px';
+					element[0].style.top = (link.top + rowDiv[0].offsetTop) + 'px';
+					triggerRes = trigger('overflowRender', link, { count:link.count, date:link.date }, element);
+					if (triggerRes === false)
+						element.remove();
+				}
+				else {
+					link.seg.top = link.top;
+					link.seg.overflow = false;
+				}
+			}
+		}
+	}
+	
+	
 	function renderTempDaySegs(segs, adjustRow, adjustTop) {
 		var tempContainer = $("<div/>");
 		var elements;
@@ -4930,11 +4979,13 @@ function DayEventRenderer() {
 		for (i=0; i<segCnt; i++) {
 			seg = segs[i];
 			element = seg.element;
-			if (element) {
+			if (element && !seg.overflow) {
 				element[0].style.top = rowTops[seg.row] + (seg.top||0) + 'px';
 				event = seg.event;
 				trigger('eventAfterRender', event, event, element);
 			}
+			else if (element)
+				element.hide();
 		}
 	}
 	

plugins/calendar/skins/default/calendar.css

@@ -1066,9 +1066,8 @@ div.fc-event-location {
 	font-size: 90%;
 }
 
-.fc-event-more {
+.fc-more-link {
 	color: #999;
-	font-size: 90%;
 	padding-top: 1px;
 	cursor: pointer;
 }

plugins/calendar/skins/default/fullcalendar.css

@@ -471,7 +471,13 @@ table.fc-border-separate {
 	float: right;
 	}
 	
-	
+.fc-more-link {
+	font-size: 0.85em;
+	white-space: nowrap;
+	text-decoration: none;
+	cursor: pointer;
+	padding: 1px;
+}	
 
 /* Agenda Week View, Agenda Day View
 ------------------------------------------------------------------------*/