abstract event CSS classes: fc-h-event, fc-v-event

src/agenda/agenda.css

@@ -152,13 +152,10 @@
 }
 
 
-/* TimeGrid Event Styling
-----------------------------------------------------------------------------------------------------
-We use the full "fc-time-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
+/* Generic Vertical Event
+--------------------------------------------------------------------------------------------------*/
 
-.fc-time-grid-event.fc-not-start { /* events that are continuing from another day */
+.fc-v-event.fc-not-start { /* events that are continuing from another day */
 	/* replace space made by the top border with padding */
 	border-top-width: 0;
 	padding-top: 1px;
@@ -168,7 +165,7 @@ be a descendant of the grid when it is being dragged.
 	border-top-right-radius: 0;
 }
 
-.fc-time-grid-event.fc-not-end {
+.fc-v-event.fc-not-end {
 	/* replace space made by the top border with padding */
 	border-bottom-width: 0;
 	padding-bottom: 1px;
@@ -178,15 +175,17 @@ be a descendant of the grid when it is being dragged.
 	border-bottom-right-radius: 0;
 }
 
+
+/* TimeGrid Event Styling
+----------------------------------------------------------------------------------------------------
+We use the full "fc-time-grid-event" class instead of using descendants because the event won't
+be a descendant of the grid when it is being dragged.
+*/
+
 .fc-time-grid-event {
 	overflow: hidden; /* don't let the bg flow over rounded corners */
 }
 
-.fc-time-grid-event > .fc-content { /* contains the time and title, but no bg and resizer */
-	position: relative;
-	z-index: 2; /* above the bg */
-}
-
 .fc-time-grid-event .fc-time,
 .fc-time-grid-event .fc-title {
 	padding: 0 1px;
@@ -197,13 +196,6 @@ be a descendant of the grid when it is being dragged.
 	white-space: nowrap;
 }
 
-.fc-time-grid-event .fc-bg {
-	z-index: 1;
-	background: #fff;
-	opacity: .25;
-	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 {
@@ -238,8 +230,6 @@ be a descendant of the grid when it is being dragged.
 /* resizer */
 
 .fc-time-grid-event .fc-resizer {
-	position: absolute;
-	z-index: 3; /* above content */
 	left: 0;
 	right: 0;
 	bottom: 0;

src/common/DayGrid.events.js

@@ -103,7 +103,7 @@ DayGrid.mixin({
 		var timeText;
 		var titleHtml;
 
-		classes.unshift('fc-day-grid-event');
+		classes.unshift('fc-day-grid-event', 'fc-h-event');
 
 		// Only display a timed events time if it is the starting segment
 		if (seg.isStart) {

src/common/TimeGrid.events.js

@@ -112,7 +112,7 @@ TimeGrid.mixin({
 		var fullTimeText; // more verbose time text. for the print stylesheet
 		var startTimeText; // just the start time text
 
-		classes.unshift('fc-time-grid-event');
+		classes.unshift('fc-time-grid-event', 'fc-v-event');
 
 		if (view.isMultiDayEvent(event)) { // if the event appears to span more than one day...
 			// Don't display time text on segments that run entirely through a day.

src/common/common.css

@@ -474,22 +474,31 @@ temporary rendered events).
 	cursor: not-allowed;
 }
 
+.fc-event .fc-bg { /* the generic .fc-bg already does position */
+	z-index: 1;
+	background: #fff;
+	opacity: .25;
+	filter: alpha(opacity=25); /* for IE */
+}
 
-/* DayGrid events
-----------------------------------------------------------------------------------------------------
-We use the full "fc-day-grid-event" class instead of using descendants because the event won't
-be a descendant of the grid when it is being dragged.
-*/
+.fc-event .fc-content {
+	position: relative;
+	z-index: 2;
+}
 
-.fc-day-grid-event {
-	margin: 1px 2px 0; /* spacing between events and edges */
-	padding: 0 1px;
+.fc-event .fc-resizer {
+	position: absolute;
+	z-index: 3;
 }
 
+
+/* Horizontal Events
+--------------------------------------------------------------------------------------------------*/
+
 /* events that are continuing to/from another week. kill rounded corners and butt up against edge */
 
-.fc-ltr .fc-day-grid-event.fc-not-start,
-.fc-rtl .fc-day-grid-event.fc-not-end {
+.fc-ltr .fc-h-event.fc-not-start,
+.fc-rtl .fc-h-event.fc-not-end {
 	margin-left: 0;
 	border-left-width: 0;
 	padding-left: 1px; /* replace the border with padding */
@@ -497,8 +506,8 @@ be a descendant of the grid when it is being dragged.
 	border-bottom-left-radius: 0;
 }
 
-.fc-ltr .fc-day-grid-event.fc-not-end,
-.fc-rtl .fc-day-grid-event.fc-not-start {
+.fc-ltr .fc-h-event.fc-not-end,
+.fc-rtl .fc-h-event.fc-not-start {
 	margin-right: 0;
 	border-right-width: 0;
 	padding-right: 1px; /* replace the border with padding */
@@ -506,32 +515,73 @@ be a descendant of the grid when it is being dragged.
 	border-bottom-right-radius: 0;
 }
 
-.fc-day-grid-event > .fc-content { /* force events to be one-line tall */
-	white-space: nowrap;
-	overflow: hidden;
-}
+/* resizer */
 
-.fc-day-grid-event .fc-time {
-	font-weight: bold;
+.fc-h-event .fc-resizer { /* positioned it to overcome the event's borders */
+	top: -1px;
+	bottom: -1px;
+	left: -1px;
+	right: -1px;
 }
 
-/* resize handle (outside of fc-content, so can go outside of bounds) */
-
-.fc-day-grid-event .fc-resizer {
+.fc-h-event .fc-resizer:before { /* the invisible hit area. conservative overlapping by default */
+	content: "";
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	width: 7px;
+	left: 0;
+	right: 0;
+	width: 5px;
 }
 
-.fc-ltr .fc-day-grid-event .fc-resizer {
-	right: -3px;
+/* left resizer */
+.fc-ltr .fc-h-event .fc-start-resizer,
+.fc-ltr .fc-h-event .fc-start-resizer:before,
+.fc-ltr .fc-h-event .fc-start-resizer:after, /* can be another styled component */
+.fc-rtl .fc-h-event .fc-end-resizer,
+.fc-rtl .fc-h-event .fc-end-resizer:before,
+.fc-rtl .fc-h-event .fc-end-resizer:after {
+	right: auto; /* ignore the right and only use the left */
+	cursor: w-resize;
+}
+
+/* right resizer */
+.fc-ltr .fc-h-event .fc-end-resizer,
+.fc-ltr .fc-h-event .fc-end-resizer:before,
+.fc-ltr .fc-h-event .fc-end-resizer:after, /* can be another styled component */
+.fc-rtl .fc-h-event .fc-start-resizer,
+.fc-rtl .fc-h-event .fc-start-resizer:before,
+.fc-rtl .fc-h-event .fc-start-resizer:after {
+	left: auto; /* ignore the left and only use the right */
 	cursor: e-resize;
 }
 
-.fc-rtl .fc-day-grid-event .fc-resizer {
+
+/* DayGrid events
+----------------------------------------------------------------------------------------------------
+We use the full "fc-day-grid-event" class instead of using descendants because the event won't
+be a descendant of the grid when it is being dragged.
+*/
+
+.fc-day-grid-event {
+	margin: 1px 2px 0; /* spacing between events and edges */
+	padding: 0 1px;
+}
+
+
+.fc-day-grid-event .fc-content { /* force events to be one-line tall */
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.fc-day-grid-event .fc-time {
+	font-weight: bold;
+}
+
+.fc-day-grid-event .fc-resizer:before { /* enlarge the default hit area */
+	width: 7px;
 	left: -3px;
-	cursor: w-resize;
+	right: -3px;
 }