smarter about rendering short timegrid events. issue 1700

src/agenda/agenda.css

@@ -172,6 +172,36 @@ be a descendant of the grid when it is being dragged.
 	filter: alpha(opacity=25); /* for IE */
 }
 
+/* short mode, where time and title are on the same line */
+
+.fc-time-grid-event.fc-short .fc-content {
+	/* don't wrap to second line (now that contents will be inline) */
+	white-space: nowrap;
+}
+
+.fc-time-grid-event.fc-short .fc-time,
+.fc-time-grid-event.fc-short .fc-title {
+	/* put the time and title on the same line */
+	display: inline-block;
+	vertical-align: top;
+}
+
+.fc-time-grid-event.fc-short .fc-time span {
+	display: none; /* don't display the full time text... */
+}
+
+.fc-time-grid-event.fc-short .fc-time:before {
+	content: attr(data-start); /* ...instead, display only the start time */
+}
+
+.fc-time-grid-event.fc-short .fc-time:after {
+	content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
+}
+
+.fc-time-grid-event.fc-short .fc-title {
+	font-size: .85em; /* make the title text the same size as the time */
+}
+
 /* resizer */
 
 .fc-time-grid-event .fc-resizer {

src/common/TimeGrid.events.js

@@ -62,6 +62,12 @@ $.extend(TimeGrid.prototype, {
 			for (i = 0; i < colSegs.length; i++) {
 				seg = colSegs[i];
 				seg.el.css(this.generateSegPositionCss(seg));
+
+				// if the height is short, add a className for alternate styling
+				if (seg.bottom - seg.top < 30) {
+					seg.el.addClass('fc-short');
+				}
+
 				containerEl.append(seg.el);
 			}
 
@@ -116,6 +122,7 @@ $.extend(TimeGrid.prototype, {
 		var skinCss = this.getEventSkinCss(event);
 		var timeText;
 		var fullTimeText; // more verbose time text. for the print stylesheet
+		var startTimeText; // just the start time text
 
 		classes.unshift('fc-time-grid-event');
 
@@ -126,11 +133,13 @@ $.extend(TimeGrid.prototype, {
 			if (seg.isStart || seg.isEnd) {
 				timeText = view.getEventTimeText(seg.start, seg.end);
 				fullTimeText = view.getEventTimeText(seg.start, seg.end, 'LT');
+				startTimeText = view.getEventTimeText(seg.start, null);
 			}
 		} else {
 			// Display the normal time text for the *event's* times
 			timeText = view.getEventTimeText(event);
 			fullTimeText = view.getEventTimeText(event, 'LT');
+			startTimeText = view.getEventTimeText(event.start, null);
 		}
 
 		return '<a class="' + classes.join(' ') + '"' +
@@ -138,7 +147,10 @@ $.extend(TimeGrid.prototype, {
 			'>' +
 				'<div class="fc-content">' +
 					(timeText ?
-						'<div class="fc-time" data-full="' + htmlEscape(fullTimeText) + '">' +
+						'<div class="fc-time"' +
+						' data-start="' + htmlEscape(startTimeText) + '"' +
+						' data-full="' + htmlEscape(fullTimeText) + '"' +
+						'>' +
 							'<span>' + htmlEscape(timeText) + '</span>' +
 						'</div>' :
 						''