get daygrid/timegrid css working event, eventLimit

packages/core/src/main.scss

@@ -12,4 +12,3 @@
 @import './styles/scroller';
 @import './styles/scrollgrid';
 @import './styles/view-structure';
-@import './styles/legacy';

packages/core/src/styles/_event-horizontal.scss

@@ -1,4 +1,14 @@
 
+/*
+this class is used for:
+- left/right resizers (esp for touch)
+  - hiding/showing --- used .fc-event-resizer general class for this
+      based on .fc-event-selected/.fc-event-allow-mouse-resize
+  - the dot --- use a subclass of the subcomponent for this like fc-event-resizer-dot
+- edges for start/end  ---- implement separately for each event type
+- vertically expand the touch area when it's selected --- use mixin
+*/
+
 /* bigger touch area when selected */
 .fc-h-event.fc-selected:before {
   content: "";

packages/core/src/styles/_event.scss

@@ -1,4 +1,9 @@
 
+/* TODO
+.fc-not-start --> :not(.fc-event-start)
+.fc-not-end --> :not(.fc-event-end)
+*/
+
 .fc-event {
   position: relative; /* for resize handle and other inner positioning */
   display: block; /* make the <a> tag block */

packages/core/src/styles/_legacy.scss

@@ -1,170 +0,0 @@
-
-
-/* Misc Reusable Components
---------------------------------------------------------------------------------------------------*/
-
-.fc-bg,
-.fc-bgevent-skeleton,
-.fc-highlight-skeleton,
-.fc-mirror-skeleton {
-  /* these element should always cling to top-left/right corners */
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.fc-bg {
-  bottom: 0; /* strech bg to bottom edge */
-}
-
-.fc-bg table {
-  height: 100%; /* strech bg to bottom edge */
-}
-
-
-/* Fake Table Rows
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-row { /* extra precedence to overcome themes forcing a 1px border */
-  /* no visible border by default. but make available if need be (scrollbar width compensation) */
-  border-style: solid;
-  border-width: 0;
-}
-
-.fc-row table {
-  width: 100%;
-
-  /* don't put left/right border on anything within a fake row.
-     the outer tbody will worry about this */
-  border-left: 0 hidden transparent;
-  border-right: 0 hidden transparent;
-
-  /* no bottom borders on rows */
-  border-bottom: 0 hidden transparent;
-}
-
-.fc-row:first-child table {
-  border-top: 0 hidden transparent; /* no top border on first row */
-}
-
-
-/* Day Row (used within the header and the DayGrid)
---------------------------------------------------------------------------------------------------*/
-
-.fc-row {
-  position: relative;
-}
-
-.fc-row .fc-bg {
-  z-index: 1;
-}
-
-/* highlighting cells & background event skeleton */
-
-.fc-row .fc-bgevent-skeleton,
-.fc-row .fc-highlight-skeleton {
-  bottom: 0; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-bgevent-skeleton table,
-.fc-row .fc-highlight-skeleton table {
-  height: 100%; /* stretch skeleton to bottom of row */
-}
-
-.fc-row .fc-highlight-skeleton td,
-.fc-row .fc-bgevent-skeleton td {
-  border-color: transparent;
-}
-
-.fc-row .fc-bgevent-skeleton {
-  z-index: 2;
-
-}
-
-.fc-row .fc-highlight-skeleton {
-  z-index: 3;
-}
-
-/*
-row content (which contains day/week numbers and events) as well as "mirror" (which contains
-temporary rendered events).
-*/
-
-.fc-row .fc-content-skeleton {
-  position: relative;
-  z-index: 4;
-  padding-bottom: 2px; /* matches the space above the events */
-}
-
-.fc-row .fc-mirror-skeleton {
-  z-index: 5;
-}
-
-.fc .fc-row .fc-content-skeleton table,
-.fc .fc-row .fc-content-skeleton td,
-.fc .fc-row .fc-mirror-skeleton td {
-  /* see-through to the background below */
-  /* extra precedence to prevent theme-provided backgrounds */
-  background: none; /* in case <td>s are globally styled */
-  border-color: transparent;
-}
-
-.fc-row .fc-content-skeleton td,
-.fc-row .fc-mirror-skeleton td {
-  /* don't put a border between events and/or the day number */
-  border-bottom: 0;
-}
-
-.fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
-.fc-row .fc-mirror-skeleton tbody td {
-  /* don't put a border between event cells */
-  border-top: 0;
-}
-
-
-/* popover that appears when "more" link is clicked */
-
-.fc-day-grid .fc-row {
-  z-index: 1; /* make the "more" popover one higher than this */
-}
-
-
-@media print {
-
-  /* kill the overlaid, absolutely-positioned components */
-  /* common... */
-  .fc-bg,
-  .fc-bgevent-skeleton,
-  .fc-highlight-skeleton,
-  .fc-mirror-skeleton,
-  /* for timegrid. within cells within table skeletons... */
-  .fc-bgevent-container,
-  .fc-business-container,
-  .fc-highlight-container,
-  .fc-mirror-container {
-    display: none;
-  }
-
-  /* don't force a min-height on rows (for DayGrid) */
-  .fc tbody .fc-row {
-    height: auto !important; /* undo height that JS set in distributeHeight */
-    min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
-  }
-
-  .fc tbody .fc-row .fc-content-skeleton {
-    position: static; /* undo .fc-rigid */
-    padding-bottom: 0 !important; /* use a more border-friendly method for this... */
-  }
-
-  .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
-    padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
-  }
-
-  .fc tbody .fc-row .fc-content-skeleton table {
-    /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
-      making it look more like 3em. for other browers, it will already be this tall */
-    height: 1em;
-  }
-
-}

packages/core/src/styles/_popover.scss

@@ -1,6 +1,6 @@
 
 .fc-popover {
-  position: fixed;
+  position: fixed !important; // override bootstrap!
   top: 0; // for when not positioned yet
   box-shadow: 0 2px 6px rgba(0,0,0,.15);
 }

packages/core/src/styles/_resets.scss

@@ -23,7 +23,6 @@
   }
 
   th, td {
-    padding: 0;
     vertical-align: top;
   }
 

packages/core/src/styles/_scrollgrid.scss

@@ -6,10 +6,6 @@
     table-layout: fixed;
   }
 
-  > * > tr > * { // cells
-    padding: 0 !important;
-  }
-
   table { // inner tables
     border-style: hidden; // kill outer border
   }
@@ -24,6 +20,12 @@
   }
 }
 
+.fc .scrollgrid__section { // more precedence to overcome theme
+  th, td {
+    padding: 0 !important;
+  }
+}
+
 .scrollgrid__section.vgrow {
   height: auto; // undo 1px height. will cancel height:100% also
 

packages/daygrid/src/DayTable.tsx

@@ -34,6 +34,8 @@ export interface DayTableProps {
   renderIntro: () => VNode[]
   colWeekNumbersVisible: boolean // week numbers render in own column? (caller does HTML via intro)
   cellWeekNumbersVisible: boolean // display week numbers in day cell?
+  eventLimit: boolean | number
+  vGrow: boolean
 }
 
 export default class DayTable extends DateComponent<DayTableProps, ComponentContext> {
@@ -61,6 +63,8 @@ export default class DayTable extends DateComponent<DayTableProps, ComponentCont
         renderIntro={props.renderIntro}
         colWeekNumbersVisible={props.colWeekNumbersVisible}
         cellWeekNumbersVisible={props.cellWeekNumbersVisible}
+        eventLimit={props.eventLimit}
+        vGrow={props.vGrow}
       />
     )
   }

packages/daygrid/src/DayTableView.tsx

@@ -10,7 +10,7 @@ import {
   DayTableModel,
   ChunkContentCallbackArgs,
 } from '@fullcalendar/core'
-import TableView, { hasRigidRows } from './TableView'
+import TableView, { isEventLimitAuto } from './TableView'
 import DayTable from './DayTable'
 
 
@@ -48,7 +48,7 @@ export default class DayTableView extends TableView {
           eventSelection={props.eventSelection}
           eventDrag={props.eventDrag}
           eventResize={props.eventResize}
-          isRigid={hasRigidRows(context.options)}
+          isRigid={isEventLimitAuto(context.options) && !props.isHeightAuto}
           nextDayThreshold={context.nextDayThreshold}
           colGroupNode={contentArg.colGroupNode}
           renderNumberIntro={this.renderNumberIntro}
@@ -56,6 +56,8 @@ export default class DayTableView extends TableView {
           renderIntro={this.renderIntro}
           colWeekNumbersVisible={colWeekNumbersVisible}
           cellWeekNumbersVisible={cellWeekNumbersVisible}
+          eventLimit={options.eventLimit}
+          vGrow={!props.isHeightAuto}
         />
       )
     )

packages/daygrid/src/Table.tsx

@@ -37,6 +37,8 @@ export interface TableProps extends TableSkeletonProps {
   eventResize: EventSegUiInteractionState | null
   rootElRef?: Ref<HTMLDivElement>
   colGroupNode: VNode
+  eventLimit: boolean | number
+  vGrow: boolean
 }
 
 export interface TableSeg extends Seg {
@@ -91,6 +93,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
           cellWeekNumbersVisible={props.cellWeekNumbersVisible}
           colGroupNode={props.colGroupNode}
           onReceiveEls={this.handleSkeletonEls}
+          vGrow={props.vGrow}
         />
         {this.renderPopover()}
       </Fragment>
@@ -183,6 +186,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
     if (props.eventDrag && props.eventDrag.segs.length) { // messy check
       this.renderHighlight({
         type: 'highlight',
+        colGroupNode: props.colGroupNode,
         renderIntro: props.renderIntro,
         segs: props.eventDrag.segs,
         rowEls,
@@ -191,6 +195,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
     } else if (props.eventResize && props.eventResize.segs.length) { // messy check
       this.renderHighlight({
         type: 'highlight',
+        colGroupNode: props.colGroupNode,
         renderIntro: props.renderIntro,
         segs: props.eventResize.segs,
         rowEls,
@@ -199,6 +204,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
     } else {
       this.renderHighlight({
         type: 'highlight',
+        colGroupNode: props.colGroupNode,
         renderIntro: props.renderIntro,
         segs: props.dateSelectionSegs,
         rowEls,
@@ -208,6 +214,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
 
     this.renderBusinessHours({
       type: 'businessHours',
+      colGroupNode: props.colGroupNode,
       renderIntro: props.renderIntro,
       segs: props.businessHourSegs,
       rowEls,
@@ -216,6 +223,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
 
     this.renderBgEvents({
       type: 'bgEvent',
+      colGroupNode: props.colGroupNode,
       renderIntro: props.renderIntro,
       segs: props.bgEventSegs,
       rowEls,
@@ -275,6 +283,7 @@ export default class Table extends BaseComponent<TableProps, TableState> {
       this.isCellSizesDirty ||
       calendar.isEventsUpdated // hack
     ) {
+      this.updateEventLimitSizing()
       this.buildPositionCaches()
       this.isCellSizesDirty = false
     }
@@ -356,8 +365,17 @@ export default class Table extends BaseComponent<TableProps, TableState> {
   ------------------------------------------------------------------------------------------------------------------*/
 
 
-  limitRows(eventLimit) {
-    this._limitRows(eventLimit, this.rowEls, this.rowStructs, this.props.cells, this.context)
+  updateEventLimitSizing() {
+    let { props, rowStructs } = this
+
+    if (props.vGrow) {
+      this._limitRows(props.eventLimit, this.rowEls, rowStructs, this.props.cells, this.context)
+
+    } else {
+      for (let row = 0; row < rowStructs.length; row++) {
+        this.unlimitRow(row, rowStructs)
+      }
+    }
   }
 
 

packages/daygrid/src/TableFills.ts → packages/daygrid/src/TableFills.tsx

@@ -1,6 +1,5 @@
 import {
   VNode,
-  htmlToElement,
   appendToElement,
   prependToElement,
   FillRenderer,
@@ -9,7 +8,8 @@ import {
   removeElement,
   BaseFillRendererProps,
   subrenderer,
-  renderVNodes
+  renderVNodes,
+  h
 } from '@fullcalendar/core'
 
 
@@ -21,6 +21,7 @@ export interface TableFillsProps extends BaseFillRendererProps {
   rowEls: HTMLElement[]
   colCnt: number
   renderIntro: () => VNode[]
+  colGroupNode: VNode
 }
 
 export default class TableFills extends FillRenderer<TableFillsProps> {
@@ -50,7 +51,8 @@ export default class TableFills extends FillRenderer<TableFillsProps> {
       segs,
       rowEls: props.rowEls,
       colCnt: props.colCnt,
-      renderIntro: props.renderIntro
+      renderIntro: props.renderIntro,
+      colGroupNode: props.colGroupNode
     })
   }
 
@@ -81,7 +83,7 @@ function detachSegs(els: HTMLElement[]) {
 
 
 // Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
-function renderFillRow(seg: Seg, { colCnt, type, renderIntro }: TableFillsProps, context: ComponentContext): HTMLElement {
+function renderFillRow(seg: Seg, { colCnt, type, renderIntro, colGroupNode }: TableFillsProps, context: ComponentContext): HTMLElement {
   let { isRtl } = context
   let startCol = seg.firstCol
   let endCol = seg.lastCol + 1
@@ -95,11 +97,15 @@ function renderFillRow(seg: Seg, { colCnt, type, renderIntro }: TableFillsProps,
     className = type.toLowerCase()
   }
 
-  skeletonEl = htmlToElement(
-    '<div class="fc-' + className + '-skeleton">' +
-      '<table><tr></tr></table>' +
-    '</div>'
-  )
+  skeletonEl = renderVNodes(
+    <div class={'fc-' + className + '-skeleton'}>
+      <table>
+        {colGroupNode}
+        <tr />
+      </table>
+    </div>,
+    context
+  )[0] as HTMLElement
   trEl = skeletonEl.getElementsByTagName('tr')[0]
 
   if (startCol > 0) {

packages/daygrid/src/TableSkeleton.tsx

@@ -22,6 +22,7 @@ export interface TableSkeletonProps {
   colWeekNumbersVisible: boolean // week numbers render in own column? (caller does HTML via intro)
   cellWeekNumbersVisible: boolean // display week numbers in day cell?
   colGroupNode: VNode
+  vGrow: boolean
 }
 
 export interface CellModel {
@@ -36,7 +37,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
   cellElRefs = new RefMap<HTMLTableCellElement[]>() // the bg cells
 
 
-  render() {
+  render(props: TableSkeletonProps) {
     let rowCnt = this.props.cells.length
     let rowNodes: VNode[] = []
 
@@ -47,7 +48,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
     }
 
     return (
-      <div class='fc-day-grid'>
+      <div class={'fc-day-grid' + (props.vGrow ? ' vgrow' : '')}>
         {rowNodes}
       </div>
     )
@@ -85,7 +86,7 @@ export default class TableSkeleton extends BaseComponent<TableSkeletonProps> {
   renderDayRow(row) {
     let { theme } = this.context
     let { props } = this
-    let classes = [ 'fc-row', 'fc-week' ]
+    let classes = [ 'fc-row', 'fc-week', theme.getClass('bordered') ]
 
     if (props.isRigid) {
       classes.push('fc-rigid')

packages/daygrid/src/TableView.tsx

@@ -93,22 +93,6 @@ export default abstract class TableView<State={}> extends View<State> {
   }
 
 
-  /* Dimensions
-  ------------------------------------------------------------------------------------------------------------------*/
-
-  // TODO: give eventLimit to DayTable
-
-  // // is the event limit a constant level number?
-  // if (eventLimit && typeof eventLimit === 'number') {
-  //   table.limitRows(eventLimit) // limit the levels first so the height can redistribute after
-  // }
-
-  // // is the event limit dynamically calculated?
-  // if (eventLimit && typeof eventLimit !== 'number') {
-  //   table.limitRows(eventLimit) // limit the levels after the grid's row heights have been set
-  // }
-
-
   /* Header Rendering
   ------------------------------------------------------------------------------------------------------------------*/
 
@@ -189,8 +173,7 @@ export default abstract class TableView<State={}> extends View<State> {
 TableView.prototype.dateProfileGeneratorClass = TableDateProfileGenerator
 
 
-// Determines whether each row should have a constant height
-export function hasRigidRows(options) {
+export function isEventLimitAuto(options) { // TODO: use in other places?
   let eventLimit = options.eventLimit
 
   return eventLimit && typeof eventLimit !== 'number'

packages/daygrid/src/main.ts

@@ -4,7 +4,7 @@ import './main.scss'
 
 export { default as DayTable, DayTableSlicer } from './DayTable'
 export { default as Table, TableSeg } from './Table'
-export { default as TableView, hasRigidRows } from './TableView'
+export { default as TableView, isEventLimitAuto } from './TableView'
 export { buildDayTableModel } from './DayTableView'
 export { default as DayBgRow, DayBgCellModel } from './DayBgRow'
 export { DayTableView as DayGridView } // export as old name!

packages/daygrid/src/styles/_day-grid.scss

@@ -2,68 +2,156 @@
 /* DayGridView
 --------------------------------------------------------------------------------------------------*/
 
-/* day row structure */
+.fc-day-grid {
+  position: relative; // because containers z-index'd children
+  z-index: 1;         // "
+  display: flex;
+  flex-direction: column;
+}
 
-.fc-dayGridWeek-view .fc-content-skeleton,
-.fc-dayGridDay-view .fc-content-skeleton {
-  /* there may be week numbers in these views, so no padding-top */
-  padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
+.fc-day-grid .fc-row {
+  flex-grow: 1;
+  position: relative; // for housing the skeletons
+  min-height: 4em; // ensure that all rows are at least this tall
 }
 
-.fc-dayGrid-view .fc-body .fc-row {
-  min-height: 4em; /* ensure that all rows are at least this tall */
+.fc-day-grid .fc-row.fc-rigid { // TODO: make this a modifier class on fc-day-grid
+  // a "rigid" row will take up a constant amount of height because content-skeleton is absolute
+  overflow: hidden;
 }
 
-/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
 
-.fc-row.fc-rigid {
-  overflow: hidden;
+// BORDER
+
+.fc-day-grid .fc-row {
+  border-width: 1px 0 0;
+
+  &:first-child {
+    border-top-width: 0;
+  }
 }
 
-.fc-row.fc-rigid .fc-content-skeleton {
+.fc-unthemed .fc-day-grid .fc-row {
+  border-style: solid;
+  border-color: $fc-unthemed-border-color;
+  border-color: var(--fc-unthemed-border-color, $fc-unthemed-border-color);
+}
+
+
+// SKELETONS
+// the order:
+// .fc-bg
+// .fc-bgevent-skeleton
+// .fc-highlight-skeleton
+// .fc-content-skeleton
+// .fc-mirror-skeleton
+
+.fc-day-grid .fc-row .fc-content-skeleton {
+  position: relative;
+}
+
+.fc-day-grid .fc-row > .fc-bg,
+.fc-day-grid .fc-row > .fc-bgevent-skeleton,
+.fc-day-grid .fc-row > .fc-highlight-skeleton,
+.fc-day-grid .fc-row.fc-rigid > .fc-content-skeleton,
+.fc-day-grid .fc-row > .fc-mirror-skeleton {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  bottom: 0;
 }
 
-/* week and day number styling */
+.fc-day-grid .fc-row > .fc-bg,
+.fc-day-grid .fc-row > .fc-bgevent-skeleton,
+.fc-day-grid .fc-row > .fc-highlight-skeleton,
+.fc-day-grid .fc-row > .fc-mirror-skeleton {
+  & > table {
+    height: 100%; // everything but the content-skeleton creates height
+  }
+}
 
-.fc-day-top.fc-other-month {
-  opacity: 0.3;
+.fc-day-grid .fc-row > .fc-bgevent-skeleton,
+.fc-day-grid .fc-row > .fc-highlight-skeleton,
+.fc-day-grid .fc-row > .fc-content-skeleton,
+.fc-day-grid .fc-row > .fc-mirror-skeleton {
+  th, td {
+    border-color: transparent;
+  }
 }
 
-.fc-dayGrid-view .fc-week-number,
-.fc-dayGrid-view .fc-day-number {
-  padding: 2px;
+.fc-day-grid .fc-row > .fc-bg { z-index: 1; }
+.fc-day-grid .fc-row > .fc-bgevent-skeleton { z-index: 2;}
+.fc-day-grid .fc-row > .fc-highlight-skeleton { z-index: 3; }
+.fc-day-grid .fc-row > .fc-content-skeleton { z-index: 4; }
+.fc-day-grid .fc-row > .fc-mirror-skeleton { z-index: 5; }
+
+
+// CONTENT SKELETON
+
+.fc-day-grid .fc-row > .fc-content-skeleton {
+  padding-bottom: 1em; // ensure a space at bottom of cell for user selecting/clicking
 }
 
-.fc-dayGrid-view th.fc-week-number,
-.fc-dayGrid-view th.fc-day-number {
-  padding: 0 2px; /* column headers can't have as much v space */
+.fc-day-grid .fc-row.fc-rigid > .fc-content-skeleton {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 
-.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number { float: right; }
-.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number { float: left; }
+.fc-day-grid .fc-week-number,
+.fc-day-grid .fc-day-number {
+  padding: 2px;
+}
 
-.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
-.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
+.fc-day-grid .fc-day-top.fc-other-month { // TODO: why is other-month not on fc-day?
+  opacity: 0.3;
+}
 
-.fc-dayGrid-view .fc-day-top .fc-week-number {
+.fc-day-grid .fc-day-top .fc-week-number {
   min-width: 1.5em;
   text-align: center;
   background-color: #f2f2f2;
   color: #808080;
 }
 
-/* when week/day number have own column */
+.fc-ltr .fc-day-grid .fc-day-top .fc-day-number { float: right; }
+.fc-rtl .fc-day-grid .fc-day-top .fc-day-number { float: left; }
 
-.fc-dayGrid-view td.fc-week-number {
-  text-align: center;
-}
+.fc-ltr .fc-day-grid .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
+.fc-rtl .fc-day-grid .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
+
+
+@media print {
+
+  // don't force a min-height on rows
+  .fc-day-grid .fc-row {
+    height: auto !important; /* undo height that JS set in distributeHeight */
+    min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
+  }
+
+  // kill the overlaid, absolutely-positioned components
+  .fc-day-grid .fc-row > .fc-bg,
+  .fc-day-grid .fc-row > .fc-bgevent-skeleton,
+  .fc-day-grid .fc-row > .fc-highlight-skeleton,
+  .fc-day-grid .fc-row > .fc-mirror-skeleton {
+    display: none;
+  }
+
+  .fc-day-grid .fc-row > .fc-content-skeleton {
+    position: static; /* undo .fc-rigid */
+    padding-bottom: 0 !important; /* use a more border-friendly method for this... */
+  }
+
+  .fc-day-grid .fc-row > .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
+    padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
+  }
+
+  .fc-day-grid .fc-row > .fc-content-skeleton table {
+    /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
+      making it look more like 3em. for other browers, it will already be this tall */
+    height: 1em;
+  }
 
-.fc-dayGrid-view td.fc-week-number > * {
-  /* work around the way we do column resizing and ensure a minimum width */
-  display: inline-block;
-  min-width: 1.25em;
 }

packages/daygrid/src/styles/_event-limit.scss

@@ -13,7 +13,7 @@ a.fc-more:hover {
   text-decoration: underline;
 }
 
-.fc-limited { /* rows and cells that are hidden because of a "more" link */
+.fc-limited { // rows and cells that are hidden because of a "more" link
   display: none;
 }
 

packages/timegrid/src/DayTimeColsView.tsx

@@ -49,6 +49,8 @@ export default class DayTimeColsView extends TimeColsView {
           renderIntro={this.renderTableIntro}
           colWeekNumbersVisible={false}
           cellWeekNumbersVisible={false}
+          eventLimit={this.getAllDayEventLimit()}
+          vGrow={!props.isHeightAuto}
         />
       )),
       (contentArg: ChunkContentCallbackArgs) => (

packages/timegrid/src/TimeColsView.tsx

@@ -17,6 +17,7 @@ import AllDaySplitter from './AllDaySplitter'
 
 
 const WEEK_HEADER_FORMAT = createFormatter({ week: 'short' })
+const AUTO_ALL_DAY_EVENT_LIMIT = 5
 
 
 /* An abstract class for all timegrid-related views. Displays one more columns with time slots running vertically.
@@ -124,16 +125,14 @@ export default abstract class TimeColsView extends View {
   /* Dimensions
   ------------------------------------------------------------------------------------------------------------------*/
 
-  // const ALL_DAY_EVENT_LIMIT = 5
-  //
-  // let eventLimit
-  // eventLimit = this.context.options.eventLimit
-  // if (eventLimit && typeof eventLimit !== 'number') {
-  //   eventLimit = ALL_DAY_EVENT_LIMIT // make sure "auto" goes to a real number
-  // }
-  // if (eventLimit) {
-  //   table.limitRows(eventLimit)
-  // }
+
+  getAllDayEventLimit() {
+    let eventLimit = this.context.options.eventLimit
+    if (eventLimit && typeof eventLimit !== 'number') {
+      eventLimit = AUTO_ALL_DAY_EVENT_LIMIT // make sure "auto" goes to a real number
+    }
+    return eventLimit
+  }
 
 
   /* Scroll

packages/timegrid/src/main.scss

@@ -1,4 +1,5 @@
 
+@import './styles/view';
 @import './styles/time-grid';
 @import './styles/event';
 @import './styles/now-indicator';

packages/timegrid/src/styles/_time-grid.scss

@@ -1,81 +1,52 @@
 
-.fc-timeGrid-view .fc-divider { // TODO: better selector
-  padding-bottom: 2px;
-}
-
-/* TimeGridView all-day area
---------------------------------------------------------------------------------------------------*/
-
-.fc-timeGrid-view .fc-day-grid {
-  position: relative;
-  z-index: 2; /* so the "more.." popover will be over the time grid */
-}
-
-.fc-timeGrid-view .fc-day-grid .fc-row {
-  min-height: 3em; /* all-day section will never get shorter than this */
-}
-
-.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
-  padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
-}
-
-
-/* TimeGrid axis running down the side (for both the all-day area and the slot area)
---------------------------------------------------------------------------------------------------*/
-
-.fc .fc-axis { /* .fc to overcome default cell styles */
-  vertical-align: middle;
-  padding: 0 4px;
-  white-space: nowrap;
-}
-
-.fc-ltr .fc-axis {
-  text-align: right;
-}
-
-.fc-rtl .fc-axis {
-  text-align: left;
-}
-
-
-/* TimeGrid Structure
---------------------------------------------------------------------------------------------------*/
-
-.fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
-  position: relative;
-  z-index: 1;
-}
-
 .fc-time-grid {
-  min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
+  position: relative; // for housing skeletons
+  z-index: 1; // because containers z-index'd children
 }
 
-.fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
-  border: 0 hidden transparent;
-}
+
+// SKELETONS
+// order:
+// .fc-bg
+// .fc-slats
+// .fc-content-skeleton
 
 .fc-time-grid > .fc-bg {
+  position: absolute;
   z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  & > table {
+    height: 100%;
+  }
 }
 
-.fc-time-grid .fc-slats {
+.fc-time-grid > .fc-slats {
   position: relative;
   z-index: 2;
 }
 
-.fc-time-grid .fc-content-col {
-  position: relative; /* because now-indicator lives directly inside */
-}
-
-.fc-time-grid .fc-content-skeleton {
+.fc-time-grid > .fc-content-skeleton {
   position: absolute;
   z-index: 3;
   top: 0;
   left: 0;
   right: 0;
+
+  & > table {
+    height: 100%;
+  }
 }
 
-/* divs within a cell within the fc-content-skeleton */
+.fc-time-grid .fc-content-col { // <td>s within .fc-content-skeleton
+  position: relative;
+}
+
+
+// elements that live WITHIN each .fc-content-col
 
 .fc-time-grid .fc-business-container {
   position: relative;
@@ -97,69 +68,59 @@
   z-index: 4;
 }
 
-.fc-time-grid .fc-now-indicator-line {
+.fc-time-grid .fc-now-indicator-line { // will be absolute
   z-index: 5;
 }
 
-.fc-time-grid .fc-mirror-container { /* also is fc-event-container */
+.fc-time-grid .fc-mirror-container {
   position: relative;
   z-index: 6;
 }
 
 
-/* TimeGrid Slats (lines that run horizontally)
---------------------------------------------------------------------------------------------------*/
+// highlight (within .fc-highlight-container)
 
-.fc-time-grid .fc-slats td {
-  height: 1.5em;
-  border-bottom: 0; /* each cell is responsible for its top border */
-}
-
-.fc-time-grid .fc-slats .fc-minor td {
-  border-top-style: dotted;
+.fc-time-grid .fc-highlight {
+  position: absolute;
+  left: 0;
+  right: 0;
 }
 
 
-/* TimeGrid Highlighting Slots
---------------------------------------------------------------------------------------------------*/
+// SLATS (lines that run horizontally)
 
-.fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
-  position: relative; /* scopes the left/right of the fc-highlight to be in the column */
+.fc-time-grid > .fc-slats td {
+  height: 1.5em;
+  border-bottom: 0; /* each cell is responsible for its top border */
 }
 
-.fc-time-grid .fc-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  /* top and bottom will be in by JS */
+.fc-time-grid > .fc-slats .fc-minor td {
+  border-top-style: dotted;
 }
 
 
 @media print {
 
-  /* undo the min-height 100% trick used to fill the container's height */
-  .fc-time-grid {
-    min-height: 0 !important;
-  }
-
-  /* don't display the side axis at all ("all-day" and time cells) */
-  .fc-timeGrid-view .fc-axis {
-    display: none;
-  }
-
-  /* don't display the horizontal lines */
-  .fc-slats,
-  .fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
-    display: none !important; /* important overrides inline declaration */
+  // kill the overlaid, absolutely-positioned components
+  .fc-time-grid > .fc-bg,
+  .fc-time-grid > .fc-slats,
+  .fc-time-grid .fc-bgevent-skeleton,
+  .fc-time-grid .fc-highlight-skeleton,
+  .fc-time-grid .fc-mirror-skeleton,
+  .fc-time-grid .fc-bgevent-container,
+  .fc-time-grid .fc-business-container,
+  .fc-time-grid .fc-highlight-container,
+  .fc-time-grid .fc-mirror-container {
+    display: none !important; // important overrides inline declaration for .fc-slats
   }
 
   /* let the container that holds the events be naturally positioned and create real height */
-  .fc-time-grid .fc-content-skeleton {
+  .fc-time-grid > .fc-content-skeleton {
     position: static;
   }
 
   /* in case there are no events, we still want some height */
-  .fc-time-grid .fc-content-skeleton table {
+  .fc-time-grid > .fc-content-skeleton table {
     height: 4em;
   }
 

packages/timegrid/src/styles/_view.scss

@@ -0,0 +1,36 @@
+
+// all-day area
+
+.fc-timeGrid-view .fc-day-grid .fc-row {
+  min-height: 3em; /* all-day section will never get shorter than this */
+}
+
+.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
+  padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
+}
+
+
+// the divider between daygrid the timegrid
+// high precedence to overcome theme
+// TODO: better selector. add className to HTML (.fc-timeGrid-view-divider?)
+.fc .fc-timeGrid-view .fc-divider {
+  padding: 0 0 2px;
+}
+
+
+// axis, for the timegrid AND the daygrid
+
+.fc-timeGrid-view .fc-axis {
+  vertical-align: middle;
+  padding: 0 4px;
+}
+
+
+@media print {
+
+  /* don't display the side axis at all ("all-day" and time cells) */
+  .fc-timeGrid-view .fc-axis {
+    display: none;
+  }
+
+}