fixes forprint

packages-premium

@@ -1 +1 @@
-Subproject commit bd40e9054add6a463d44d0ae4000f98c8a1776bb
+Subproject commit 921e31ed966ce210b57bf7ed654b894ffb5641b2

packages/core/src/CalendarComponent.tsx

@@ -11,7 +11,7 @@ import { DateMarker } from './datelib/marker'
 import { CalendarState } from './reducers/types'
 import { ViewPropsTransformerClass } from './plugin-system'
 import { __assign } from 'tslib'
-import { h, Fragment, createRef } from './vdom'
+import { h, Fragment, createRef, flushToDom } from './vdom'
 import { BaseComponent, subrenderer } from './vdom-util'
 import { buildDelegationHandler } from './util/dom-event'
 import { capitaliseFirstLetter } from './util/misc'
@@ -124,6 +124,7 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
 
   handleBeforePrint = () => {
     this.setState({ forPrint: true })
+    flushToDom()
   }
 
   handleAfterPrint = () => {
@@ -182,7 +183,7 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
       eventSelection: props.eventSelection,
       eventDrag: props.eventDrag,
       eventResize: props.eventResize,
-      isHeightAuto: isHeightAuto(options),
+      isHeightAuto: this.state.forPrint || isHeightAuto(options),
       forPrint: this.state.forPrint
     }
 
@@ -260,6 +261,8 @@ function setClassNames({ el, forPrint }: { el: HTMLElement, forPrint: boolean },
 
   if (forPrint) {
     classNames.push('fc-print')
+  } else {
+    classNames.push('fc-screen')
   }
 
   for (let className of classNames) {

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -44,10 +44,18 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
 
   render(props: SimpleScrollGridProps, state: SimpleScrollGridState, context: ComponentContext) {
     let sectionConfigs = props.sections || []
-    let microColGroupNode = this.renderMicroColGroup(props.cols, state.shrinkWidth)
+
+    let microColGroupNode = props.forPrint ?
+        <colgroup></colgroup> : // temporary
+        this.renderMicroColGroup(props.cols, state.shrinkWidth)
+
+    let classNames = getScrollGridClassNames(props.vGrow, context)
+    if (props.forPrint) { // temporary
+      classNames.push('scrollgrid--forprint')
+    }
 
     return (
-      <table class={getScrollGridClassNames(props.vGrow, context).join(' ')} style={{ height: props.height }}>
+      <table class={classNames.join(' ')} style={{ height: props.height }}>
         {sectionConfigs.map((sectionConfig, sectionI) => this.renderSection(sectionConfig, sectionI, microColGroupNode))}
       </table>
     )

packages/core/src/styles/_toolbar.scss

@@ -34,12 +34,12 @@
 
 }
 
-@media print {
+.fc-print {
 
   // don't display any button-related controls
   // TODO: better to put in _button/_button-group.scss ?
   .fc-button-group,
-  .fc button {
+  button {
     display: none;
   }
 

packages/daygrid/src/TableEvents.ts

@@ -1,7 +1,6 @@
 import {
   VNode,
   removeElement,
-  appendToElement,
   prependToElement,
   Seg,
   BaseFgEventRendererProps,

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

@@ -12,7 +12,6 @@
 .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-day-grid .fc-row.fc-rigid { // TODO: make this a modifier class on fc-day-grid
@@ -68,15 +67,10 @@
 .fc-day-grid .fc-row > .fc-mirror-skeleton {
   & > table {
     height: 100%; // everything but the content-skeleton creates height
-  }
-}
 
-.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;
+    td, th {
+      height: 100%;
+    }
   }
 }
 
@@ -89,10 +83,6 @@
 
 // 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-day-grid .fc-row.fc-rigid > .fc-content-skeleton {
   position: absolute;
   top: 0;
@@ -123,35 +113,50 @@
 .fc-rtl .fc-day-grid .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
 
 
-@media print {
+.fc-screen {
 
-  // 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 */
+    min-height: 4em; // ensure that all rows are at least this tall
+  }
+
+  .fc-day-grid .fc-row > .fc-content-skeleton {
+    padding-bottom: 1em; // ensure a space at bottom of cell for user selecting/clicking
   }
 
-  // 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-content-skeleton,
   .fc-day-grid .fc-row > .fc-mirror-skeleton {
-    display: none;
+    th, td {
+      border-color: transparent;
+    }
   }
 
-  .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-print {
+
+  .fc-day-grid .fc-row > .fc-content-skeleton > table {
+    height: 4em;
   }
 
-  .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-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-top-color: transparent;
+      border-bottom-color: transparent;
+    }
   }
 
-  .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;
+  // 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;
   }
 
 }

packages/timegrid/src/DayTimeCols.tsx

@@ -33,6 +33,7 @@ export interface DayTimeColsProps {
   colGroupNode: VNode
   renderBgIntro: () => VNode[]
   renderIntro: () => VNode[]
+  forPrint: boolean
 }
 
 interface DayTimeColsState {
@@ -69,6 +70,7 @@ export default class DayTimeCols extends DateComponent<DayTimeColsProps, DayTime
         renderIntro={props.renderIntro}
         nowIndicatorDate={state.nowIndicatorDate}
         nowIndicatorSegs={state.nowIndicatorDate && this.slicer.sliceNowDate(state.nowIndicatorDate, this.context.calendar, this.dayRanges)}
+        forPrint={props.forPrint}
       />
     )
   }

packages/timegrid/src/DayTimeColsView.tsx

@@ -62,6 +62,7 @@ export default class DayTimeColsView extends TimeColsView {
           colGroupNode={contentArg.colGroupNode}
           renderBgIntro={this.renderTimeColsBgIntro}
           renderIntro={this.renderTimeColsIntro}
+          forPrint={props.forPrint}
         />
       )
     )

packages/timegrid/src/TimeCols.tsx

@@ -52,6 +52,7 @@ export interface TimeColsProps {
   renderIntro: () => VNode[]
   nowIndicatorDate: DateMarker
   nowIndicatorSegs: TimeColsSeg[]
+  forPrint: boolean
 }
 
 export const TIME_COLS_NOW_INDICATOR_UNIT = 'minute'
@@ -253,7 +254,8 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
           (props.eventResize ? props.eventResize.affectedInstances : null),
         isDragging: false,
         isResizing: false,
-        isSelecting: false
+        isSelecting: false,
+        forPrint: props.forPrint
       }),
       this.subrenderMirror(props, this.mirrorContainerEls, options)
     ]
@@ -268,7 +270,8 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
         isDragging: true,
         isResizing: false,
         isSelecting: false,
-        interactingSeg: props.eventDrag.interactingSeg
+        interactingSeg: props.eventDrag.interactingSeg,
+        forPrint: props.forPrint
       })
 
     } else if (props.eventResize) {
@@ -278,7 +281,8 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
         isDragging: true,
         isResizing: false,
         isSelecting: false,
-        interactingSeg: props.eventResize.interactingSeg
+        interactingSeg: props.eventResize.interactingSeg,
+        forPrint: props.forPrint
       })
 
     } else if (options.selectMirror) {
@@ -287,7 +291,8 @@ export default class TimeCols extends BaseComponent<TimeColsProps> {
         segs: props.dateSelectionSegs,
         isDragging: false,
         isResizing: false,
-        isSelecting: true
+        isSelecting: true,
+        forPrint: props.forPrint
       })
 
     } else {

packages/timegrid/src/TimeColsEvents.ts

@@ -10,6 +10,7 @@ import TimeCols, { attachSegs, detachSegs } from './TimeCols'
 
 export interface TimeColsEventsProps extends BaseFgEventRendererProps {
   containerEls: HTMLElement[]
+  forPrint: boolean
 }
 
 /*
@@ -91,7 +92,10 @@ export default class TimeColsEvents extends FgEventRenderer<TimeColsEventsProps>
 
       // if the event is short that the title will be cut off,
       // attach a className that condenses the title into the time area.
-      if (seg.eventRange.def.title && seg.bottom - seg.top < 30) {
+      if (
+        !this.props.forPrint &&
+        seg.eventRange.def.title && seg.bottom - seg.top < 30
+      ) {
         seg.el.classList.add('fc-short') // TODO: "condensed" is a better name
       }
     }

packages/timegrid/src/styles/_event.scss

@@ -69,7 +69,6 @@ be a descendant of the grid when it is being dragged.
 }
 
 .fc-time-grid-event .fc-time {
-  font-size: .85em;
   white-space: nowrap;
 }
 
@@ -100,7 +99,6 @@ be a descendant of the grid when it is being dragged.
 }
 
 .fc-time-grid-event.fc-short .fc-title {
-  font-size: .85em; /* make the title text the same size as the time */
   padding: 0; /* undo padding from above */
 }
 
@@ -142,7 +140,7 @@ be a descendant of the grid when it is being dragged.
 }
 
 
-@media print {
+.fc-print {
 
   /* naturally position events, vertically stacking them */
   .fc-time-grid .fc-event {

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

@@ -99,7 +99,7 @@
 }
 
 
-@media print {
+.fc-print {
 
   // kill the overlaid, absolutely-positioned components
   .fc-time-grid > .fc-bg,

packages/timegrid/src/styles/_view.scss

@@ -1,15 +1,4 @@
 
-// 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?)
@@ -30,7 +19,22 @@
 }
 
 
-@media print {
+.fc-screen {
+
+  // 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 */
+  }
+
+}
+
+
+.fc-print {
 
   /* don't display the side axis at all ("all-day" and time cells) */
   .fc-timeGrid-view .fc-axis {