Calendar: Fix moving cursor while clicking did not add an event

calendar/js/et2_widget_daycol.ts

@@ -111,12 +111,14 @@ export class et2_calendar_daycol extends et2_valueWidget implements et2_IDetache
 			.appendTo(this.header);
 		this.all_day = jQuery(document.createElement('div'))
 			.addClass("calendar_calDayColAllDay")
-			.css('max-height', (egw.preference('limit_all_day_lines', 'calendar') || 3 ) * 1.4 + 'em')
+			.css('max-height', (egw.preference('limit_all_day_lines', 'calendar') || 3) * 1.4 + 'em')
 			.appendTo(this.header);
 		this.event_wrapper = jQuery(document.createElement('div'))
 			.addClass("event_wrapper")
 			.appendTo(this.div);
 
+		this.click = this.click.bind(this);
+
 		this.setDOMNode(this.div[0]);
 	}
 
@@ -1114,19 +1116,21 @@ export class et2_calendar_daycol extends et2_valueWidget implements et2_IDetache
 
 		// Remove the binding for the click handler, unless there's something
 		// custom here.
-		if (!this.onclick)
+		if(!this.onclick)
 		{
 			jQuery(this.node).off("click");
 		}
 		// But we do want to listen to certain clicks, and handle them internally
-		jQuery(this.node).on('click.et2_daycol',
+		this.node.addEventListener("click", this.click);
-			'.calendar_calDayColHeader,.calendar_calAddEvent',
-			jQuery.proxy(this.click, this)
-		);
 
 		return result;
 	}
 
+	removeFromDOM()
+	{
+		this.node.removeEventListener("click", this.click)
+	}
+
 	/**
 	 * Click handler calling custom handler set via onclick attribute to this.onclick,
 	 * or the default which is to open a new event at that time.
@@ -1157,6 +1161,8 @@ export class et2_calendar_daycol extends et2_valueWidget implements et2_IDetache
 					owner: this.options.owner
 				};
 				this.getInstanceManager().app_obj.calendar.add(options);
+				_ev.stopImmediatePropagation();
+				_ev.preventDefault();
 				return false;
 			}
 			// Header, all day non-blocking
@@ -1173,6 +1179,8 @@ export class et2_calendar_daycol extends et2_valueWidget implements et2_IDetache
 					owner: this.options.owner
 				};
 				this.getInstanceManager().app_obj.calendar.add(options);
+				_ev.preventDefault();
+				_ev.stopImmediatePropagation();
 				return false;
 			}
 		}
@@ -1180,6 +1188,8 @@ export class et2_calendar_daycol extends et2_valueWidget implements et2_IDetache
 		else if(this.title.is(_ev.target) || this.title.has(_ev.target).length)
 		{
 			this.getInstanceManager().app_obj.calendar.update_state({view: 'day', date: this.date.toJSON()});
+			_ev.preventDefault();
+			_ev.stopImmediatePropagation();
 			return false;
 		}
 

calendar/js/et2_widget_timegrid.ts

@@ -382,9 +382,11 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				{
 					timegrid.gridHover.hide();
 				}
-			})
+			});
-			.on('mousedown', ':not(.calendar_calEvent)', this._mouse_down.bind(this))
+
-			.on('mouseup', this._mouse_up.bind(this));
+		this.div.get(0).addEventListener("mousedown", this._mouse_down.bind(this));
+		this.div.get(0).addEventListener("mouseup", this._mouse_up.bind(this));
+		this.div.get(0).addEventListener("click", this.click.bind(this), true);
 
 		return true;
 	}
@@ -1976,6 +1978,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				result = this.onclick.apply(this, args);
 			}
 
+			_ev.stopImmediatePropagation();
 			var event_node = jQuery(event.event_node);
 			if(event.id && result && !this.disabled && !this.options.readonly &&
 				// Permissions - opening will fail if we try
@@ -2001,14 +2004,17 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 			app.calendar.update_state(jQuery.extend(
 				{view: 'week'},
 				this._labelContainer.is(_ev.target) ?
-					this.gridHeader[0].dataset :
+				this.gridHeader[0].dataset :
-					_ev.target.dataset
+				_ev.target.dataset
 			));
+			_ev.preventDefault();
+			_ev.stopImmediatePropagation();
 		}
 		else if (this.options.owner.length === 1 && jQuery(this.owner.getDOMNode()).is(_ev.target))
 		{
 			// Click on the owner in header, show just that owner
 			app.calendar.update_state({owner: this.options.owner});
+			_ev.stopImmediatePropagation();
 		}
 		else if (this.dayHeader.has(_ev.target).length)
 		{
@@ -2026,7 +2032,8 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 		}
 		// No time grid, click on a day
 		else if (this.options.granularity === 0 &&
-			(jQuery(_ev.target).hasClass('event_wrapper') || jQuery(_ev.target).hasClass('.calendar_calDayCol'))
+			(jQuery(_ev.target).hasClass('event_wrapper') || jQuery(_ev.target).hasClass('.calendar_calDayCol')) ||
+			_ev.target.classList.contains("calendar_calAddEvent")
 		)
 		{
 			// Default handler to open a new event at the selected time
@@ -2038,6 +2045,8 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 				owner: this.options.owner
 			};
 			app.calendar.add(options);
+			_ev.preventDefault();
+			_ev.stopImmediatePropagation();
 			return false;
 		}
 	}
@@ -2064,6 +2073,11 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 		{
 			return;
 		}
+		// Skip for headers
+		if(this.dayHeader.has(event.target).length > 0)
+		{
+			return;
+		}
 
 		let start = {...this.gridHover[0].dataset};
 		if(start.date)
@@ -2161,7 +2175,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 		this.div.off('mousemove.dragcreate');
 		this.gridHover.css('cursor', '');
 
-		return this._drag_create_end(this.drag_create.event ? {date: end.date} : undefined);
+		this._drag_create_end(this.drag_create.event ? {date: end.date} : undefined);
 	}
 
 	/**

calendar/js/et2_widget_view.ts

@@ -536,10 +536,11 @@ export class et2_calendar_view extends et2_valueWidget
 			this.drag_create.event = null;
 		}
 		// Wait a bit before adding an "event", it may be just a click
-		window.setTimeout(jQuery.proxy(function() {
+		window.setTimeout(() =>
+		{
 			// Create event
-			this._drag_create_event();
+			this._drag_create_event()
-		}, this), 250);
+		}, 100);
 	}
 
 	/**
@@ -608,8 +609,7 @@ export class et2_calendar_view extends et2_valueWidget
 			end = {};
 		}
 
-		if(this.drag_create.start && end.date &&
+		if(this.drag_create.start && end.date)
-			JSON.stringify(this.drag_create.start.date) !== JSON.stringify(end.date))
 		{
 			// Drag from start to end, open dialog
 			var options = {