eventMinHeight, rename timegrid "condensed" event to "short"

CHANGELOG.md

@@ -1,14 +1,15 @@
 
 v5.7.0
 ------
+- feature: eventMinHeight (#961)
+- feature: timeGridEventShortHeight
 - fix: events can be completely hidden behind others with custom eventOrder (#6019)
 - fix: +more shows on days with less events than dayMaxEvents (#6187)
 
 write tests:
 - fix: less homogeneous event widths in timegrid (#5004)
 - feature: +more popover for timegrid (#4218)
 - feature: +more popover for timeline (#4827)
-- feature: eventMinHeight (#961)
 
 verify manually (then, write tests):
 - fix: +more popover can be scrolled down with page scroll (#5532)
@@ -26,6 +27,9 @@ not yet implemented:
 - misc: ensure only yarn (#5504)
 - misc: ensure building on windows (#5366)
 
+breaking changes:
+- renamed fc-timegrid-event-condensed className to fc-timegrid-event-short
+
 
 v5.6.0 (2021-03-28)
 -------------------

packages/__tests__/src/event-render/eventMinHeight.ts

@@ -0,0 +1,38 @@
+import { CalendarWrapper } from '../lib/wrappers/CalendarWrapper'
+
+describe('eventMinHeight', () => {
+  pushOptions({
+    initialView: 'timeGridWeek',
+    initialDate: '2017-08-10',
+    events: [
+      { start: '2017-08-10T10:30:00', end: '2017-08-10T10:31:00' },
+    ],
+  })
+
+  it('has a non-zero default', () => {
+    let calendar = initCalendar()
+    let eventEl = new CalendarWrapper(calendar).getFirstEventEl()
+    expect(eventEl.offsetHeight).toBeGreaterThan(5)
+  })
+
+  it('can be set and rendered', () => {
+    let calendar = initCalendar({
+      eventMinHeight: 40
+    })
+    let eventEl = new CalendarWrapper(calendar).getFirstEventEl()
+    expect(eventEl.offsetHeight).toBeGreaterThanOrEqual(39)
+  })
+
+  it('will ignore temporal non-collision and render side-by-side', () => {
+    let calendar = initCalendar({
+      eventMinHeight: 40,
+      events: [
+        { start: '2017-08-10T10:30:00', end: '2017-08-10T10:31:00', title: 'event a' },
+        { start: '2017-08-10T10:31:20', end: '2017-08-10T10:31:40', title: 'event b' },
+      ],
+    })
+    let eventEls = new CalendarWrapper(calendar).getEventEls()
+    expect(eventEls[0].getBoundingClientRect().left)
+      .toBeLessThan(eventEls[1].getBoundingClientRect().left)
+  })
+})

packages/__tests__/src/event-render/timeGrid-events-short.ts

@@ -0,0 +1,17 @@
+import { TimeGridViewWrapper } from "../lib/wrappers/TimeGridViewWrapper"
+import { queryEventElInfo } from '../lib/wrappers/TimeGridWrapper'
+
+describe('short timegrid events', () => {
+  it('gets corrected className when short enough', () => {
+    let calendar = initCalendar({
+      initialView: 'timeGridWeek',
+      initialDate: '2017-08-10',
+      events: [
+        { start: '2017-08-10T10:30:00', end: '2017-08-10T10:31:00', title: 'event a' }
+      ],
+    })
+    let timeGridWrapper = new TimeGridViewWrapper(calendar).timeGrid
+    let eventEls = timeGridWrapper.getEventEls()
+    expect(queryEventElInfo(eventEls[0]).isShort).toBe(true)
+  })
+})

packages/__tests__/src/lib/wrappers/TimeGridWrapper.ts

@@ -597,6 +597,6 @@ function checkEventRenderingMatch(expectedRects, eventEls) {
 export function queryEventElInfo(eventEl: HTMLElement) {
   return {
     timeText: $(eventEl.querySelector('.fc-event-time')).text(),
-    isShort: eventEl.classList.contains('fc-timegrid-event-condensed'),
+    isShort: eventEl.classList.contains('fc-timegrid-event-short'),
   }
 }

packages/common/src/options.ts

@@ -200,7 +200,8 @@ export const BASE_OPTION_REFINERS = {
   eventLongPressDelay: Number,
 
   selectMirror: Boolean,
-  eventMinHeight: Number, // TODO: kill this setting
+  eventMinHeight: Number,
+  timeGridEventShortHeight: Number, // TODO: move to timegrid plugin when plugins can provide defaults
   slotEventOverlap: Boolean,
   plugins: identity as Identity<PluginDef[]>,
   firstDay: Number,
@@ -283,6 +284,8 @@ export const BASE_OPTION_DEFAULTS = {
   expandRows: false,
   navLinks: false,
   selectable: false,
+  eventMinHeight: 15,
+  timeGridEventShortHeight: 30,
 }
 
 export type BaseOptionsRefined = DefaultedRefinedOptions<

packages/timegrid/src/TimeCol.tsx

@@ -32,8 +32,6 @@ export interface TimeColProps {
   forPrint: boolean
 }
 
-config.timeGridEventCondensedHeight = 30
-
 export class TimeCol extends BaseComponent<TimeColProps> {
   sortEventSegs = memoize(sortEventSegs)
   computeFgSegPlacements = memoize(computeFgSegPlacements) // only for non-print, non-mirror
@@ -135,11 +133,12 @@ export class TimeCol extends BaseComponent<TimeColProps> {
     isResizing?: boolean,
     isDateSelecting?: boolean,
   ) {
+    let { timeGridEventMaxStack, timeGridEventShortHeight } = this.context.options
     let { eventSelection, todayRange, nowDate } = this.props
     let isMirror = isDragging || isResizing || isDateSelecting
     let segInputs = this.buildSegInputs(segs)
     let { segRects, hiddenGroups } = isMirror ? computeFgSegPlacements(segInputs) : // don't use memoized
-      this.computeFgSegPlacements(segInputs, this.context.options.timeGridEventMaxStack)
+      this.computeFgSegPlacements(segInputs, timeGridEventMaxStack)
 
     return (
       <Fragment>
@@ -169,7 +168,7 @@ export class TimeCol extends BaseComponent<TimeColProps> {
                 isResizing={isResizing}
                 isDateSelecting={isDateSelecting}
                 isSelected={instanceId === eventSelection}
-                isCondensed={(seg.bottom - seg.top) < config.timeGridEventCondensedHeight}
+                isShort={(segRect.spanEnd - segRect.spanStart) < timeGridEventShortHeight}
                 {...getSegMeta(seg, todayRange, nowDate)}
               />
             </div>
@@ -348,7 +347,7 @@ export function renderPlainFgSegs(
               isResizing={false}
               isDateSelecting={false}
               isSelected={instanceId === eventSelection}
-              isCondensed={false}
+              isShort={false}
               {...getSegMeta(seg, todayRange, nowDate)}
             />
           </div>

packages/timegrid/src/TimeColEvent.tsx

@@ -7,7 +7,7 @@ const DEFAULT_TIME_FORMAT = createFormatter({
 })
 
 export interface TimeColEventProps extends MinimalEventProps {
-  isCondensed: boolean
+  isShort: boolean
 }
 
 export class TimeColEvent extends BaseComponent<TimeColEventProps> {
@@ -17,8 +17,8 @@ export class TimeColEvent extends BaseComponent<TimeColEventProps> {
       'fc-v-event',
     ]
 
-    if (this.props.isCondensed) {
-      classNames.push('fc-timegrid-event-condensed')
+    if (this.props.isShort) {
+      classNames.push('fc-timegrid-event-short')
     }
 
     return (

packages/timegrid/src/styles/timegrid-event.css

@@ -37,7 +37,7 @@
   }
 }
 
-.fc-timegrid-event-condensed {
+.fc-timegrid-event-short {
   & .fc-event-main-frame {
     flex-direction: row;
     overflow: hidden;