flat events

fullcalendar · Mar 14, 2019 · dffff28 · dffff28
1 parent 1f0074a
commit dffff28
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 50 deletions.
diff --git a/src/core/common/_common.scss b/src/core/common/_common.scss
@@ -266,12 +266,12 @@ temporary rendered events).
   font-size: .85em;
   line-height: 1.4;
   border-radius: 3px;
-  border: 1px solid #3a87ad; /* default BORDER color */
+  border: 1px solid #3788d8;
 }
 
 .fc-event,
 .fc-event-dot {
-  background-color: #3a87ad; /* default BACKGROUND color */
+  background-color: #3788d8; /* default BACKGROUND color */
 }
 
 .fc-event,
@@ -290,12 +290,6 @@ temporary rendered events).
   cursor: not-allowed;
 }
 
-.fc-event .fc-bg { /* the generic .fc-bg already does position */
-  z-index: 1;
-  background: #fff;
-  opacity: .25;
-}
-
 .fc-event .fc-content {
   position: relative;
   z-index: 2;
@@ -344,6 +338,20 @@ temporary rendered events).
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
+.fc-event.fc-selected:after {
+  content: "";
+  position: absolute;
+  z-index: 1; /* same z-index as fc-bg, behind text */
+  /* overcome the borders */
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  /* darkening effect */
+  background: #000;
+  opacity: .25;
+}
+
 
 /* Event Dragging
 --------------------------------------------------------------------------------------------------*/
@@ -462,20 +470,6 @@ tr:first-child > td > .fc-day-grid-event {
   margin-top: 0; /* except for mirror skeleton */
 }
 
-.fc-day-grid-event.fc-selected:after {
-  content: "";
-  position: absolute;
-  z-index: 1; /* same z-index as fc-bg, behind text */
-  /* overcome the borders */
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  /* darkening effect */
-  background: #000;
-  opacity: .25;
-}
-
 .fc-day-grid-event .fc-content { /* force events to be one-line tall */
   white-space: nowrap;
   overflow: hidden;

diff --git a/src/timegrid/TimeGridEventRenderer.ts b/src/timegrid/TimeGridEventRenderer.ts
@@ -115,7 +115,7 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
     let fullTimeText // more verbose time text. for the print stylesheet
     let startTimeText // just the start time text
 
-    classes.unshift('fc-time-grid-event', 'fc-v-event')
+    classes.unshift('fc-time-grid-event')
 
     // if the event appears to span more than one day...
     if (isMultiDayRange(eventRange.range)) {
@@ -163,7 +163,6 @@ export default class TimeGridEventRenderer extends FgEventRenderer {
             ''
             ) +
         '</div>' +
-        '<div class="fc-bg"></div>' +
         /* TODO: write CSS for this
         (isResizableFromStart ?
           '<div class="fc-resizer fc-start-resizer"></div>' :

diff --git a/src/timegrid/main.scss b/src/timegrid/main.scss
@@ -157,10 +157,17 @@
 }
 
 
-/* Generic Vertical Event
---------------------------------------------------------------------------------------------------*/
+/* 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-v-event.fc-not-start { /* events that are continuing from another day */
+.fc-time-grid-event {
+  margin-bottom: 1px;
+}
+
+.fc-time-grid-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;
@@ -170,7 +177,7 @@
   border-top-right-radius: 0;
 }
 
-.fc-v-event.fc-not-end {
+.fc-time-grid-event.fc-not-end {
   /* replace space made by the top border with padding */
   border-bottom-width: 0;
   padding-bottom: 1px;
@@ -180,29 +187,9 @@
   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-selected {
-  /* need to allow touch resizers to extend outside event's bounding box */
-  /* common fc-selected styles hide the fc-bg, so don't need this anyway */
-  overflow: visible;
-}
-
-.fc-time-grid-event.fc-selected .fc-bg {
-  display: none; /* hide semi-white background, to appear darker */
-}
-
 .fc-time-grid-event .fc-content {
-  overflow: hidden; /* for when .fc-selected */
+  overflow: hidden;
+  max-height: 100%;
 }
 
 .fc-time-grid-event .fc-time,