timegrid event condensed styling

fullcalendar · Jun 4, 2020 · 7c7ce1e · 7c7ce1e
1 parent 8ecb01e
commit 7c7ce1e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/packages/timegrid/src/TimeCol.tsx b/packages/timegrid/src/TimeCol.tsx
@@ -1,4 +1,7 @@
-import { Ref, DateMarker, BaseComponent, createElement, EventSegUiInteractionState, Seg, getSegMeta, DateRange, Fragment, DayCellRoot, NowIndicatorRoot, DayCellContent, BgEvent, renderFill, DateProfile } from '@fullcalendar/common'
+import {
+  Ref, DateMarker, BaseComponent, createElement, EventSegUiInteractionState, Seg, getSegMeta, DateRange, Fragment, DayCellRoot, NowIndicatorRoot,
+  DayCellContent, BgEvent, renderFill, DateProfile, config
+} from '@fullcalendar/common'
 import { TimeColsSeg } from './TimeColsSeg'
 import { TimeColsSlatsCoords } from './TimeColsSlatsCoords'
 import { computeSegCoords, computeSegVerticals } from './event-placement'
@@ -26,6 +29,9 @@ export interface TimeColProps {
   forPrint: boolean
 }
 
+config.timeGridEventCondensedHeight = 30
+
+
 export class TimeCol extends BaseComponent<TimeColProps> {
 
 
@@ -123,6 +129,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
           isResizing={false}
           isDateSelecting={false}
           isSelected={false}
+          isCondensed={false}
           {...getSegMeta(seg, props.todayRange, props.nowDate)}
         />
       </div>
@@ -168,6 +175,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
             isResizing={isResizing}
             isDateSelecting={isDateSelecting}
             isSelected={instanceId === props.eventSelection}
+            isCondensed={(seg.bottom - seg.top) < config.timeGridEventCondensedHeight}
             {...getSegMeta(seg, props.todayRange, props.nowDate)}
           />
         </div>

diff --git a/packages/timegrid/src/TimeColEvent.tsx b/packages/timegrid/src/TimeColEvent.tsx
@@ -8,14 +8,27 @@ const DEFAULT_TIME_FORMAT = createFormatter({
 })
 
 
-export class TimeColEvent extends BaseComponent<MinimalEventProps> {
+export interface TimeColEventProps extends MinimalEventProps {
+  isCondensed: boolean
+}
+
+export class TimeColEvent extends BaseComponent<TimeColEventProps> {
 
   render() {
+    let classNames = [
+      'fc-timegrid-event',
+      'fc-v-event'
+    ]
+
+    if (this.props.isCondensed) {
+      classNames.push('fc-timegrid-event-condensed')
+    }
+
     return (
       <StandardEvent
         {...this.props}
         defaultTimeFormat={DEFAULT_TIME_FORMAT}
-        extraClassNames={[ 'fc-timegrid-event', 'fc-v-event' ]}
+        extraClassNames={classNames}
       />
     )
   }

diff --git a/packages/timegrid/src/styles/timegrid-event.css b/packages/timegrid/src/styles/timegrid-event.css
@@ -21,6 +21,22 @@
 
 }
 
+.fc-timegrid-event-condensed {
+
+  & .fc-event-main {
+    flex-direction: row;
+  }
+
+  & .fc-event-time:after {
+    content: '\00a0-\00a0'; // dash surrounded by non-breaking spaces
+  }
+
+  & .fc-event-title {
+    font-size: var(--fc-smaller-font-size)
+  }
+
+}
+
 .fc-media-screen {
 
   & .fc-timegrid-event {