API for "selecting" an event. unselect anything via touch

src/common/Grid.events.js

@@ -727,6 +727,7 @@ Grid.mixin({
 
 	// Generic utility for generating the HTML classNames for an event segment's element
 	getSegClasses: function(seg, isDraggable, isResizable) {
+		var selectedEvent = this.view.selectedEvent;
 		var event = seg.event;
 		var classes = [
 			'fc-event',
@@ -744,6 +745,13 @@ Grid.mixin({
 			classes.push('fc-resizable');
 		}
 
+		// event is currently selected? attach a className.
+		// event references might change on refetchEvents(), while selectedEvent doesn't,
+		// so compare IDs
+		if (selectedEvent && selectedEvent._id === event._id) {
+			classes.push('fc-event-selected');
+		}
+
 		return classes;
 	},
 

src/common/View.js

@@ -29,6 +29,7 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 
 	isRTL: false,
 	isSelected: false, // boolean whether a range of time is user-selected or not
+	selectedEvent: null,
 
 	eventOrderSpecs: null, // criteria for ordering events when they have same date/time
 
@@ -388,13 +389,14 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 
 	// Binds DOM handlers to elements that reside outside the view container, such as the document
 	bindGlobalHandlers: function() {
-		this.listenTo($(document), 'mousedown', this.documentMousedown);
+		this.listenTo($(document), 'mousedown', this.handleDocumentMousedown);
+		this.listenTo($(document), 'touchend', this.handleDocumentTouchEnd);
 	},
 
 
 	// Unbinds DOM handlers from elements that reside outside the view container
 	unbindGlobalHandlers: function() {
-		this.stopListeningTo($(document), 'mousedown');
+		this.stopListeningTo($(document));
 	},
 
 
@@ -855,7 +857,7 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 	},
 
 
-	/* Selection
+	/* Selection (time range)
 	------------------------------------------------------------------------------------------------------------------*/
 
 
@@ -913,19 +915,69 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 	},
 
 
-	// Handler for unselecting when the user clicks something and the 'unselectAuto' setting is on
-	documentMousedown: function(ev) {
-		var ignore;
+	/* Event Selection
+	------------------------------------------------------------------------------------------------------------------*/
+
+
+	selectEvent: function(event) {
+		if (!this.selectedEvent || this.selectedEvent !== event) {
+			this.unselectEvent();
+			this.renderedEventSegEach(function(seg) {
+				seg.el.addClass('fc-event-selected');
+			}, event);
+			this.selectedEvent = event;
+		}
+	},
+
+
+	unselectEvent: function() {
+		if (this.selectedEvent) {
+			this.renderedEventSegEach(function(seg) {
+				seg.el.removeClass('fc-event-selected');
+			}, this.selectedEvent);
+			this.selectedEvent = null;
+		}
+	},
+
+
+	/* Mouse / Touch Unselecting (time range & event unselection)
+	------------------------------------------------------------------------------------------------------------------*/
+	// TODO: move consistently to down/start or up/end?
 
-		// is there a selection, and has the user made a proper left click?
-		if (this.isSelected && this.opt('unselectAuto') && isPrimaryMouseButton(ev)) {
 
+	handleDocumentMousedown: function(ev) {
+		if (isPrimaryMouseButton(ev)) {
+			this.processUnselect(ev);
+		}
+	},
+
+
+	handleDocumentTouchEnd: function(ev) {
+		if (isSingleTouch(ev)) {
+			this.processUnselect(ev);
+		}
+	},
+
+
+	processUnselect: function(ev) {
+		var targetEl = $(ev.target);
+		var ignore;
+
+		// is there a time-range selection?
+		if (this.isSelected && this.opt('unselectAuto')) {
 			// only unselect if the clicked element is not identical to or inside of an 'unselectCancel' element
 			ignore = this.opt('unselectCancel');
-			if (!ignore || !$(ev.target).closest(ignore).length) {
+			if (!ignore || !targetEl.closest(ignore).length) {
 				this.unselect(ev);
 			}
 		}
+
+		// is there an event selection?
+		if (this.selectedEvent) {
+			if (!targetEl.closest('.fc-event-selected').length) {
+				this.unselectEvent();
+			}
+		}
 	},
 
 

src/common/common.css

@@ -555,6 +555,22 @@ temporary rendered events).
 }
 
 
+/* Event Selection
+--------------------------------------------------------------------------------------------------*/
+
+.fc-event-selected {
+	z-index: 9999 !important;
+}
+
+.fc-event-selected.fc-event-dragging {
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* will appear to float */
+}
+
+.fc-event-selected .fc-bg {
+	display: none; /* hide semi-transparent bg. will make the event look darker */
+}
+
+
 /* Horizontal Events
 --------------------------------------------------------------------------------------------------*/
 
@@ -638,6 +654,13 @@ be a descendant of the grid when it is being dragged.
 	width: 7px;
 }
 
+/* event selection */
+
+.fc-day-grid-event.fc-event-selected .fc-content {
+	background-color: rgba(0, 0, 0, .2); /* will appear darker */
+		/* TODO: improve visuals of this technique! */
+}
+
 
 /* Event Limiting
 --------------------------------------------------------------------------------------------------*/