Hide partially visible events in gridlist view, and make sure there's some free space to click so user can add events

calendar/js/et2_widget_daycol.js

@@ -75,6 +75,8 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		this.all_day = $j(document.createElement('div'))
 			.addClass("calendar_calDayColAllDay")
 			.appendTo(this.header);
+		this.event_wrapper = $j(document.createElement('div'))
+			.appendTo(this.div);
 		
 		this.setDOMNode(this.div[0]);
 
@@ -127,6 +129,24 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		egw.dataUnregisterUID(this.registeredUID,false,this);
 	},
 
+	getDOMNode: function(sender)
+	{
+		if(!sender || sender === this) return this.div[0];
+		if(sender.instanceOf && sender.instanceOf(et2_calendar_event))
+		{
+			if(this.display_settings.granularity === 0)
+			{
+				return this.event_wrapper[0];
+			}
+			if(sender.options.value.whole_day_on_top ||
+				sender.options.value.whole_day && sender.options.value.non_blocking === true)
+			{
+				return this.all_day[0];
+			}
+			return this.event_wrapper[0];
+		}
+	},
+
 	/**
 	 * Draw the individual divs for clicking to add an event
 	 */
@@ -481,7 +501,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			}
 			return start ? start : end;
 		});
-		
+
 		for(var c = 0; c < events.length; c++)
 		{
 			// Create event
@@ -514,13 +534,18 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		// Reset
 		this.header.children('.hiddenEventBefore').remove();
 		this.div.children('.hiddenEventAfter').remove();
+		this.event_wrapper.css('overflow','visible');
 
 		var timegrid = this._parent;
 
 		// elem is jquery div of event
 		function isHidden(elem) {
 			var docViewTop = timegrid.scrolling.scrollTop(),
-			docViewBottom = docViewTop + timegrid.scrolling.height(),
+			docViewBottom = docViewTop + ( 
+				this.display_settings.granularity === 0 ?
+				this.event_wrapper.height() :
+				timegrid.scrolling.height()
+			),
 			elemTop = elem.position().top,
 			elemBottom = elemTop + elem.outerHeight(true);
 			if((elemBottom <= docViewBottom) && (elemTop >= docViewTop))
@@ -536,6 +561,15 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			return visible;
 		}
 
+		// In gridlist view, we can quickly check if we need it at all
+		if(this.display_settings.granularity === 0 && this._children.length)
+		{
+			$j('div.calendar_calEvent',this.div).show(0);
+			if(Math.ceil(this.div.height() / this._children[0].div.height()) > this._children.length)
+			{
+				return;
+			}
+		}
 		// Check each event
 		this.iterateOver(function(event) {
 			// Skip whole day events and events missing value
@@ -565,15 +599,16 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 			else if (this.display_settings.granularity === 0 && hidden)
 			{
 				var day = this;
-				// Do the previous one too
 				if($j('.hiddenEventAfter',this.div).length == 0)
 				{
-					var prev_event = this._children[this._children.indexOf(event)-1];
+					this.event_wrapper.css('overflow','hidden');
-					this._hidden_indicator(prev_event, false, function() {
-						app.calendar.update_state({view: 'day', date: day.date});
-					});
 				}
-				this._hidden_indicator(event, false, false);
+				this._hidden_indicator(event, false, function() {
+					app.calendar.update_state({view: 'day', date: day.date});
+				});
+				// Avoid partially visible events
+				// We need to hide all, or the next row will be visible
+				event.div.hide(0);
 			}
 			// Completely out of view, show indicator
 			else if (hidden.completely)
@@ -788,7 +823,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				{
 					if(this.all_day.has(columns[c][i].div).length)
 					{
-						columns[c][i].div.prependTo(this.div);
+						columns[c][i].div.prependTo(this.event_wrapper);
 					}
 					columns[c][i].div.css('top', '');
 					columns[c][i].div.css('height', '');
@@ -817,7 +852,7 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 				{
 					if(this.all_day.has(columns[c][i].div).length)
 					{
-						columns[c][i].div.appendTo(this.div);
+						columns[c][i].div.appendTo(this.event_wrapper);
 						this._parent.resizeTimes();
 					}
 					top = this._time_to_position(columns[c][i].options.value.start_m);

calendar/js/et2_widget_event.js

@@ -120,6 +120,7 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 				this.id
 			);
 		}
+		return true;
 	},
 
 	destroy: function() {
@@ -650,9 +651,9 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 		// Also check participants against owner
 		if(event.participants && this._parent.options.owner)
 		{
-			var match = false;
 			var parent_owner = this._parent.options.owner;
-			for(var i = 0; i < this._parent.options.owner.length; i++ )
+			var match = false;
+			for(var i = 0; !match && i < this._parent.options.owner.length; i++ )
 			{
 				if (parseInt(this._parent.options.owner[i]) < 0)
 				{
@@ -674,7 +675,9 @@ var et2_calendar_event = et2_valueWidget.extend([et2_IDetachedDOM],
 			}
 			if(!match)
 			{
-				return false;
+				return(this._parent.options.owner == event.owner ||
+					parent_owner.indexOf &&
+					parent_owner.indexOf(event.owner) >= 0);
 			}
 		}
 

calendar/templates/default/app.css

@@ -637,6 +637,13 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
 	border: none;
 }
+.calendar_calTimeGridList .calendar_calDayCol > div:first-child
+{
+	position: absolute;
+	top: 0px;
+	bottom: 3em;
+	width: 100%;
+}
 .calendar_calTimeGridList .calendar_calEvent {
     height: 1.1em;
     position: relative;
@@ -689,11 +696,11 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
 .calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
     content: attr(data-hidden_label);
 	display:block;
-    width: 100%;
 	height: 100%;
 	min-height: 3ex;
     background: white;
     z-index: 21;
+	padding-left: 12px;
 }
 .calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
 	/* Need !important to override calculated height*/