forPrint

packages/core/src/CalendarComponent.tsx

@@ -27,7 +27,11 @@ export interface CalendarComponentProps extends CalendarState {
   title: string
 }
 
-export default class CalendarComponent extends BaseComponent<CalendarComponentProps> {
+interface CalendarComponentState {
+  forPrint: boolean
+}
+
+export default class CalendarComponent extends BaseComponent<CalendarComponentProps, CalendarComponentState> {
 
   private buildViewContext = memoize(buildContext)
   private parseBusinessHours = memoize((input) => parseBusinessHours(input, this.context.calendar))
@@ -42,11 +46,15 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
 
   get view() { return this.viewRef.current }
 
+  state = {
+    forPrint: false
+  }
+
 
   /*
   renders INSIDE of an outer div
   */
-  render(props: CalendarComponentProps, state: {}, context: ComponentContext) {
+  render(props: CalendarComponentProps, state: CalendarComponentState, context: ComponentContext) {
     let { calendar, options, header, footer } = context
 
     let toolbarProps = this.buildToolbarProps(
@@ -73,7 +81,7 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
 
     // TODO: move this somewhere after real render!
     // move to Calendar class?
-    this.updateOuterClassNames({ el: props.rootEl })
+    this.updateOuterClassNames({ el: props.rootEl, forPrint: state.forPrint })
     this.updateOuterHeight({ el: props.rootEl, height: calendarHeight })
 
     return (
@@ -102,11 +110,28 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
   }
 
 
+  componentDidMount() {
+    window.addEventListener('beforeprint', this.handleBeforePrint)
+    window.addEventListener('afterprint', this.handleAfterPrint)
+  }
+
+
   componentWillUnmount() {
+    window.removeEventListener('beforeprint', this.handleBeforePrint)
+    window.removeEventListener('afterprint', this.handleAfterPrint)
     this.subrenderDestroy()
   }
 
 
+  handleBeforePrint = () => {
+    this.setState({ forPrint: true })
+  }
+
+  handleAfterPrint = () => {
+    this.setState({ forPrint: false })
+  }
+
+
   _handleNavLinkClick(ev: UIEvent, anchorEl: HTMLElement) {
     let { dateEnv, calendar } = this.context
 
@@ -158,7 +183,8 @@ export default class CalendarComponent extends BaseComponent<CalendarComponentPr
       eventSelection: props.eventSelection,
       eventDrag: props.eventDrag,
       eventResize: props.eventResize,
-      isHeightAuto: isHeightAuto(options)
+      isHeightAuto: isHeightAuto(options),
+      forPrint: this.state.forPrint
     }
 
     let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers)
@@ -225,7 +251,7 @@ function isHeightAuto(options) {
 // -----------------------------------------------------------------------------------------------------------------
 
 
-function setClassNames({ el }: { el: HTMLElement }, context: ComponentContext) {
+function setClassNames({ el, forPrint }: { el: HTMLElement, forPrint: boolean }, context: ComponentContext) {
   let classList = el.classList
   let classNames: string[] = [
     'fc',
@@ -233,6 +259,10 @@ function setClassNames({ el }: { el: HTMLElement }, context: ComponentContext) {
     context.theme.getClass('root')
   ]
 
+  if (forPrint) {
+    classNames.push('fc-print')
+  }
+
   for (let className of classNames) {
     classList.add(className)
   }

packages/core/src/View.ts

@@ -23,6 +23,7 @@ export interface ViewProps {
   eventDrag: EventInteractionState | null
   eventResize: EventInteractionState | null
   isHeightAuto: boolean
+  forPrint: boolean
 }
 
 export default abstract class View<State={}> extends DateComponent<ViewProps, State> {

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -11,6 +11,7 @@ export interface SimpleScrollGridProps {
   cols: ColCss[]
   sections: SimpleScrollGridSection[]
   vGrow?: boolean
+  forPrint?: boolean
   height?: CssDimValue // TODO: give to real ScrollGrid
 }
 

packages/daygrid/src/TableView.tsx

@@ -28,7 +28,8 @@ export default abstract class TableView<State={}> extends View<State> {
 
 
   renderLayout(headerRowContent: VNode | null, bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode) {
-    let classNames = getViewClassNames(this.props.viewSpec).concat('fc-dayGrid-view')
+    let { props } = this
+    let classNames = getViewClassNames(props.viewSpec).concat('fc-dayGrid-view')
 
     this.processOptions(this.context.options)
 
@@ -57,7 +58,8 @@ export default abstract class TableView<State={}> extends View<State> {
     return (
       <div class={classNames.join(' ')}>
         <SimpleScrollGrid
-          vGrow={!this.props.isHeightAuto}
+          vGrow={!props.isHeightAuto}
+          forPrint={props.forPrint}
           cols={[ { width: 'shrink' } ]}
           sections={sections}
         />

packages/timegrid/src/TimeColsView.tsx

@@ -50,8 +50,9 @@ export default abstract class TimeColsView extends View {
     allDayContent: ((contentArg: ChunkContentCallbackArgs) => VNode) | null,
     timeContent: ((contentArg: ChunkContentCallbackArgs) => VNode) | null
   ) {
+    let { props } = this
     let { theme } = this.context
-    let classNames = getViewClassNames(this.props.viewSpec).concat('fc-timeGrid-view')
+    let classNames = getViewClassNames(props.viewSpec).concat('fc-timeGrid-view')
     let sections: SimpleScrollGridSection[] = []
 
     if (headerRowContent) {
@@ -90,6 +91,7 @@ export default abstract class TimeColsView extends View {
     return (
       <div class={classNames.join(' ')} ref={this.rootElRef}>
         <SimpleScrollGrid
+          forPrint={props.forPrint}
           cols={[ { width: 'shrink' } ]}
           sections={sections}
         />