From 62a8414090f8a40622127772eef96754d6a9d09e Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 17 Dec 2018 16:45:35 -0500
Subject: [PATCH] (css,js) Dynamic CSS for printing calendars

Initial commit. Fixes #3768
---
 NEWS                                          |   3 +
 .../ContactsUI/UIxContactFoldersView.wox      |   2 +-
 .../MailerUI/UIxMailFolderTemplate.wox        |   2 +-
 UI/Templates/SchedulerUI/UIxCalDayView.wox    |   3 +
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |  63 ++++++-
 UI/Templates/SchedulerUI/UIxCalMonthView.wox  |   3 +
 .../SchedulerUI/UIxCalMulticolumnDayView.wox  |   3 +
 UI/Templates/SchedulerUI/UIxCalWeekView.wox   |  15 +-
 .../js/Scheduler/CalendarController.js        |  65 +++++++-
 .../sgCalendarPrintStylesheet.directive.js    | 157 ++++++++++++++++++
 UI/WebServerResources/scss/core/print.scss    |  40 ++++-
 .../scss/views/SchedulerUI.scss               | 124 ++++++++++++++
 12 files changed, 459 insertions(+), 21 deletions(-)
 create mode 100644 UI/WebServerResources/js/Scheduler/sgCalendarPrintStylesheet.directive.js

diff --git a/NEWS b/NEWS
index 7ab703be7..83995d4e1 100644
--- a/NEWS
+++ b/NEWS
@@ -1,6 +1,9 @@
 4.0.5 (2018-MM-DD)
 ------------------
 
+New features
+ - [web] dynamic stylesheet for printing calendars (#3650)
+
 Enhancements
  - [web] show source addressbook of matching contacts in appointment editor (#4579)
  - [web] improve display of keyboard shortcuts
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index fcf7b19ba..b7eaed27b 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -234,7 +234,7 @@
 
     <div layout="row" class="md-flex">
 
-      <div class="view-list" layout="column" ng-class="{'view-list--close': addressbook.centerIsClose(centerIsClose)}">
+      <div class="view-list sg-no-print" layout="column" ng-class="{'view-list--close': addressbook.centerIsClose(centerIsClose)}">
 
         <!-- single-selection toolbar -->
         <md-toolbar class="md-accent md-hue-1"
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 163ccdc05..6d82cbce7 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -3,7 +3,7 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:label="OGo:label">
-  <div class="view-list" layout="column" ng-class="{'view-list--close': mailbox.centerIsClose(centerIsClose)}">
+  <div class="view-list sg-no-print" layout="column" ng-class="{'view-list--close': mailbox.centerIsClose(centerIsClose)}">
 
     <!-- in virtual mailbox mode -->
     <md-toolbar class="md-whiteframe-z1 md-hue-3"
diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox
index 5c80fc133..4b2bd924f 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox
@@ -56,6 +56,9 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          ng-click="calendar.changeView($event, 'multicolumnday')"><md-icon>view_array</md-icon></a>
+      <md-button class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
+                 label:aria-label="Print"
+                 ng-click="calendar.printView(centerIsClose, list.componentType)"><md-icon>print</md-icon></md-button>
     </md-card-actions>
 
     <var:component
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index a021111a4..123820c83 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -149,8 +149,9 @@
 
         <div class="view-list ng-hide" layout="column"
              ng-show="list.selectedList >= 0"
-             ng-class="{'view-list--close': centerIsClose}">
-          <md-toolbar class="md-accent md-hue-1" flex-none="flex-none"
+             ng-class="{'view-list--close': centerIsClose}"
+             ui-view="listView">
+          <md-toolbar class="md-accent md-hue-1 sg-no-print" flex-none="flex-none"
                       ng-hide="list.mode.multiple">
             <!-- sort/filter mode (default) -->
             <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
@@ -377,7 +378,7 @@
             </div>
           </md-toolbar>
 
-          <md-divider><!-- divider --></md-divider>
+          <md-divider class="sg-no-print"><!-- divider --></md-divider>
 
           <md-content layout="column" class="view-list">
             <md-tabs md-dynamic-height="true"
@@ -385,7 +386,7 @@
               <!-- Events list -->
               <md-tab label:label="Events"
                       md-on-select="list.selectComponentType('events')">
-                <md-subheader>
+                <md-subheader class="sg-no-print">
                   <div layout="row"  layout-align="space-between center">
                     <div class="md-truncate" ng-bind="list.filter() | loc"><!-- active filter --></div>
                     <div class="md-truncate"><md-icon ng-class="{ 'md-flip': list.ascending() }">sort</md-icon> <span ng-bind="list.sort() | loc"><!-- active sort --></span></div>
@@ -432,7 +433,7 @@
               <!-- Tasks list -->
               <md-tab label:label="Tasks"
                       md-on-select="list.selectComponentType('tasks')">
-                <md-subheader>
+                <md-subheader class="sg-no-print">
                   <div layout="row"  layout-align="space-between center">
                     <div class="md-truncate" ng-bind="list.filter() | loc"><!-- active filter --></div>
                     <div class="md-truncate"><md-icon ng-class="{ 'md-flip': list.ascending() }">sort</md-icon> <span ng-bind="list.sort() | loc"><!-- active sort --></span></div>
@@ -686,6 +687,58 @@
     </md-dialog>
   </script>
 
+  <script type="text/ng-template" id="UIxCalPrintDialog">
+    <md-dialog flex="50" flex-xs="90">
+      <md-toolbar>
+        <div class="md-toolbar-tools">
+          <div class="sg-md-title md-flex">
+            {{::'Print Settings' | loc }}
+          </div>
+          <md-button class="md-icon-button" ng-click="$PrintDialogController.close()">
+            <md-icon label:aria-label="Close">close</md-icon>
+          </md-button>
+        </div>
+      </md-toolbar>
+      <form name="printForm" ng-submit="$PrintDialogController.print($event)">
+        <md-dialog-content class="md-dialog-content" layout="row" layout-align="space-around center">
+          <div layout="column" flex="50">
+            <md-input-container class="md-block hide-xs" flex="50">
+              <label><var:string label:value="Page Format"/></label>
+              <md-select ng-model="$PrintDialogController.pageSize">
+                <md-option value="letter">Letter</md-option>
+                <md-option value="legal">Legal</md-option>
+                <md-option value="a4">A4</md-option>
+              </md-select>
+            </md-input-container>
+            <md-checkbox
+                ng-model="$PrintDialogController.workingHoursOnly"
+                label:aria-label="Show working hours only">
+              <var:string label:value="Show working hours only"/>
+            </md-checkbox>
+          </div>
+          <div>
+            <div class="sg-print-preview"
+                 layout="row" layout-align="center" layout-padding="layout-padding"
+                 md-whiteframe="3">
+              <div flex="30" ng-show="$PrintDialogController.visibleList" style="border-right: 1px solid #eee">
+                <div class="sg-md-caption"><var:string label:value="Tasks"/></div>
+              </div>
+              <div class="md-flex" style="align-self: center; text-align: center;">{{:: $PrintDialogController.calendarView | loc }}</div>
+            </div>
+          </div>
+        </md-dialog-content>
+        <md-dialog-actions>
+          <md-button class="md-primary" type="submit"><var:string label:value="Print"/></md-button>
+        </md-dialog-actions>
+      </form>
+      <sg-calendar-print-stylesheet
+          sg-calendar-view="$PrintDialogController.calendarView"
+          sg-page-size="$PrintDialogController.pageSize"
+          sg-orientation="$PrintDialogController.orientation"
+          sg-working-hours-only="$PrintDialogController.workingHoursOnly"></sg-calendar-print-stylesheet>
+    </md-dialog>
+  </script>
+
   <!-- modal for Web calendar authentication -->
   <script type="text/ng-template" id="UIxWebCalendarAuthDialog">
     <md-dialog flex="50" flex-xs="90">
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
index 5d012d396..43591ad87 100644
--- a/UI/Templates/SchedulerUI/UIxCalMonthView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -56,6 +56,9 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          ng-click="calendar.changeView($event, 'multicolumnday')"><md-icon>view_array</md-icon></a>
+      <md-button class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
+                 label:aria-label="Print"
+                 ng-click="calendar.printView(centerIsClose, list.componentType)"><md-icon>print</md-icon></md-button>
     </md-card-actions>
 
     <md-toolbar class="monthView">
diff --git a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
index 9029ede6c..096b84d5d 100644
--- a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
@@ -56,6 +56,9 @@
          label:aria-label="Multicolumn Day View"
          ng-disabled="true"
          ng-click="calendar.changeView($event, 'multicolumnday')"><md-icon>view_array</md-icon></a>
+      <md-button class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
+                 label:aria-label="Print"
+                 ng-click="calendar.printView(centerIsClose, list.componentType)"><md-icon>print</md-icon></md-button>
     </md-card-actions>
 
     <var:component
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index 418f13740..3e9ecad07 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -56,12 +56,15 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          ng-click="calendar.changeView($event, 'multicolumnday')"><md-icon>view_array</md-icon></a>
+      <md-button class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
+                 label:aria-label="Print"
+                 ng-click="calendar.printView(centerIsClose, list.componentType)"><md-icon>print</md-icon></md-button>
     </md-card-actions>
-  <var:component
-      className="UIxCalDayTable"
-      startDate="startDate"
-      const:CSSClass="weekOverview"
-      const:numberOfDays="7"
-      const:currentView="weekview"/>
+    <var:component
+        className="UIxCalDayTable"
+        startDate="startDate"
+        const:CSSClass="weekOverview"
+        const:numberOfDays="7"
+        const:currentView="weekview"/>
   </md-card>
 </container>
diff --git a/UI/WebServerResources/js/Scheduler/CalendarController.js b/UI/WebServerResources/js/Scheduler/CalendarController.js
index 6fa2afa30..21e5c3fcd 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarController.js
@@ -7,8 +7,8 @@
   /**
    * @ngInject
    */
-  CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'sgHotkeys', 'Calendar', 'Component', 'Preferences', 'stateEventsBlocks'];
-  function CalendarController($scope, $rootScope, $state, $stateParams, sgHotkeys, Calendar, Component, Preferences, stateEventsBlocks) {
+  CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', '$mdDialog', 'sgHotkeys', 'Calendar', 'Component', 'Preferences', 'stateEventsBlocks'];
+  function CalendarController($scope, $rootScope, $state, $stateParams, $mdDialog ,sgHotkeys, Calendar, Component, Preferences, stateEventsBlocks) {
     var vm = this, deregisterCalendarsList, hotkeys = [];
 
     this.$onInit = function() {
@@ -184,11 +184,70 @@
       $state.go('calendars.view', { view: view });
     };
 
+    this.printView = function(centerIsClose, componentType) {
+      $mdDialog.show({
+        parent: angular.element(document.body),
+        clickOutsideToClose: true,
+        escapeToClose: true,
+        templateUrl: 'UIxCalPrintDialog', // See UIxCalMainView.wox
+        controller: PrintController,
+        controllerAs: '$PrintDialogController',
+        locals: {
+          calendarView: $stateParams.view,
+          visibleList: centerIsClose? undefined : componentType
+        }
+      });
+
+    };
+
     // Check if the week day should be visible/selectable
     this.isSelectableDay = function(date) {
       return _.includes(vm.selectableDays, date.getDay());
     };
-}
+  }
+
+  /**
+   * @ngInject
+   */
+  PrintController.$inject = ['$rootScope', '$scope', '$window', '$stateParams', '$mdDialog', '$log', '$mdToast', 'Dialog', 'sgSettings', 'Preferences', 'Calendar', 'calendarView', 'visibleList'];
+  function PrintController($rootScope, $scope, $window, $stateParams, $mdDialog, $log, $mdToast, Dialog, Settings, Preferences, Calendar, calendarView, visibleList) {
+    var vm = this;
+    var orientations = {
+      day: 'portrait',
+      week: 'landscape',
+      month: 'landscape',
+      multicolumnday: 'landscape'
+    };
+
+    this.$onInit = function() {
+      // Default values
+      this.pageSize = 'letter';
+      this.workingHoursOnly = true;
+      this.calendarView = calendarView;
+      this.orientation = orientations[this.calendarView];
+      this.visibleList = visibleList;
+
+      angular.element(document.body).addClass(this.orientation);
+      $scope.$watch(function() { return vm.pageSize; }, angular.bind(this, function(newSize, oldSize) {
+        angular.element(document.body).removeClass(oldSize);
+        angular.element(document.body).addClass(newSize);
+      }));
+    };
+
+    this.$onDestroy = function() {
+      angular.element(document.body).removeClass(['portrait', 'landscape', 'letter', 'legal', 'a4']);
+    };
+
+    this.print = function($event) {
+      $window.print();
+      $event.stopPropagation();
+      return false;
+    };
+
+    this.close = function () {
+      $mdDialog.hide();
+    };
+  }
 
   angular
     .module('SOGo.SchedulerUI')  
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarPrintStylesheet.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarPrintStylesheet.directive.js
new file mode 100644
index 000000000..ce296ce80
--- /dev/null
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarPrintStylesheet.directive.js
@@ -0,0 +1,157 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  /* jshint validthis: true */
+  'use strict';
+
+  /*
+   * sgCalendarPrintStylesheet - Add CSS stylesheet to fix printing of calendars
+   * @memberof SOGo.SchedulerUI
+   * @restrict attribute
+   * @param {string} sgCalendarView - the name of the calendar view
+   * @param {string} sgPageSize - the desired page size (letter, legal, etc)
+   * @param {string} sgOrientation - the page orientation
+   * @param {boolean} sgWorkingHoursOnly - hide off-working hours
+   * @example:
+
+    <sg-calendar-print-stylesheet
+      sg-calendar-view="calendarView"
+      sg-page-size="pageSize"
+      sg-orientation="orientation"
+      sg-working-hours-only="workingHoursOnly" />
+  */
+  function sgCalendarPrintStylesheet() {
+    return {
+      restrict: 'E',
+      scope: {
+        calendarView: '<sgCalendarView',
+        pageSize: '<sgPageSize',
+        orientation: '<sgOrientation',
+        workingHoursOnly: '<sgWorkingHoursOnly',
+      },
+      replace: true,
+      bindToController: true,
+      controller: sgPrintStylesheetController,
+      controllerAs: '$ctrl',
+      template: [
+        '<style type="text/css">',
+        '  @page {',
+        '    size: {{ $ctrl.pageSize }} {{ $ctrl.orientation }};',
+        '    margin: 0;',
+        '  }',
+        '  @media print {',
+        '    body {',
+        '      padding: {{ $ctrl.pageMargin }};',
+        '    }',
+        '    [ui-view=calendars] .view-list {',
+        '      height: {{ $ctrl.viewportHeight }};',
+        '      overflow: hidden;',
+        '    }',
+        '    [ui-view=calendars] .calendarView {',
+        '      transform: translateY(-{{ $ctrl.clipTop }});', // hide non-working hours at the top
+        '      height: {{ $ctrl.viewHeight }};',
+        '      position: relative;',
+        '      overflow: hidden;', // hide non-working hours at the bottom
+        '    }',
+        '    [ui-view=calendars] .allDaysView {',
+        '      max-height: {{ $ctrl.hourHeight }}{{ $ctrl.units }} !important;', // limit size of all-day cells
+        '    }',
+        '    [ui-view=calendars] .hours .hour,',
+        '    [ui-view=calendars] .days .day .clickableHourCell {',
+        '      min-height: {{ $ctrl.hourHeight }}{{ $ctrl.units }};',
+        '      max-height: {{ $ctrl.hourHeight }}{{ $ctrl.units }};',
+        '    }',
+        '    {{ $ctrl.eventsPositions() }}',
+        '  }',
+        '</style>'
+      ].join('\n')
+    };
+  }
+
+  /**
+   * @ngInject
+   */
+  sgPrintStylesheetController.$inject = ['$scope', 'Preferences'];
+  function sgPrintStylesheetController($scope, Preferences) {
+    var vm = this;
+    var sizes = {
+      portrait: {
+        letter: [8.5, 11, 'in'],
+        legal:  [8.5, 14, 'in'],
+        a4:     [210, 297, 'mm']
+      },
+      landscape: {
+        letter: [11, 8.5, 'in'],
+        legal:  [14, 8.5, 'in'],
+        a4:     [297, 210, 'mm']
+      }
+    };
+    var margins = {
+      letter: [0.4, 2.1],
+      legal: [0.4, 2.1],
+      a4: [10, 30]
+    };
+
+    this.$onInit = function() {
+      $scope.$watchGroup([function() { return vm.pageSize; }, function() { return vm.workingHoursOnly; }], angular.bind(this, function() {
+        var time;
+        var size = sizes[this.orientation][this.pageSize];
+        this.units = size[2];
+        this.pageMargin = margins[this.pageSize][0] + this.units;
+        this.viewportHeight = (size[1] - 2 * margins[this.pageSize][0]).toString() + this.units;
+        this.hideHoursStart = 0;
+        this.hideHoursEnd = 24;
+        this.totalHours = 24;
+        this.clipTop = 0;
+
+        if (this.calendarView === 'month') {
+          this.viewHeight = (size[1] - (3 * margins[this.pageSize][0])).toString() + this.units;
+        }
+        else {
+          // Day-based views
+          if (this.workingHoursOnly) {
+            if (Preferences.defaults.SOGoDayEndTime) {
+              time = Preferences.defaults.SOGoDayEndTime.split(':');
+              this.hideHoursEnd = parseInt(time[0]);
+              this.totalHours = this.hideHoursEnd;
+            }
+            if (Preferences.defaults.SOGoDayStartTime) {
+              time = Preferences.defaults.SOGoDayStartTime.split(':');
+              this.hideHoursStart = parseInt(time[0]);
+              this.totalHours -= this.hideHoursStart;
+            }
+          }
+          this.hourHeight = (size[1] - 2 * margins[this.pageSize][0] - margins[this.pageSize][1]) / this.totalHours;
+          this.clipTop = (this.hourHeight * this.hideHoursStart).toString() + this.units;
+          this.viewHeight = (this.hideHoursEnd * this.hourHeight).toString() + this.units;
+        }
+      }));
+    };
+
+    this.eventsPositions = function() {
+      var i = 0, j;
+      var css = [];
+
+      if (this.calendarView === 'month') {
+        css.push('[ui-view=calendars] .monthView md-grid-list { min-height: ' + this.viewHeight + '; }');
+      }
+      else {
+        while (i <= 96) { // number of 15-minutes blocks in a day
+          if (i <= (4 * this.hideHoursStart)) {
+            j = (4 * this.hideHoursStart) - i;
+            css.push('[ui-view=calendars] .sg-event.starts' + i +
+                     ' .text { margin-top: ' + (this.hourHeight/4*j) + this.units + '; }');
+          }
+          css.push('[ui-view=calendars] .sg-event.starts' + i + ' { top: ' + (this.hourHeight/4*i) + this.units + '; }');
+          css.push('[ui-view=calendars] .sg-event.lasts' + i + ' { height: ' + (this.hourHeight/4*i) + this.units + '; }');
+          i++;
+        }
+      }
+      return css.join('\n');
+    };
+  }
+
+  angular
+    .module('SOGo.SchedulerUI')
+    .directive('sgCalendarPrintStylesheet', sgCalendarPrintStylesheet);
+})();
diff --git a/UI/WebServerResources/scss/core/print.scss b/UI/WebServerResources/scss/core/print.scss
index 55a3e0ce9..fd7e0a947 100644
--- a/UI/WebServerResources/scss/core/print.scss
+++ b/UI/WebServerResources/scss/core/print.scss
@@ -10,6 +10,37 @@
     min-height: auto !important;
     max-height: none !important;
     overflow: visible !important;
+
+    &.letter {
+      width: 8.5in;
+      height: 11in !important;
+      &.landscape {
+        width: 11in;
+        height: 8.5in !important;
+      }
+      [ui-view=listView] {
+        max-width: 3in;
+      }
+    }
+    &.legal {
+      width: 8.5in;
+      height: 14in !important;
+      &.landscape {
+        width: 14in;
+        height: 8.5in !important;
+      }
+    }
+    &.a4 {
+      width: 210mm;
+      height: 297mm;
+      &.landscape {
+        width: 297mm;
+        height: 210mm;
+      }
+      [ui-view=listView] {
+        max-width: 80mm;
+      }
+    }
   }
 
   // Don't print some components
@@ -17,10 +48,13 @@
   md-sidenav,
   md-card-actions,
   md-fab-speed-dial,
+  md-backdrop,
+  .md-scroll-mask,
+  .md-dialog-container,
   .md-open-menu-container,
   .md-chip-remove-container,
   .toolbar-main,
-  .view-list,
+  .view-list--close,
   .view-detail .sg-reversible.sg-flip .sg-face,
   .view-detail .sg-reversible:not(.sg-flip) .sg-back,
   .sg-no-print
@@ -29,8 +63,6 @@
   }
 
   // Horizontal flex layout must be ignored for element that could spawn multiple pages
-  .view[layout="row"],
-  section > div[layout="row"],
   .msg-body > [layout="row"],
   .mailer_mailcontent[layout="row"] {
     display: block !important;
@@ -50,7 +82,6 @@
   md-card,
   md-card-content,
   md-card-content pre,
-  .view-detail,
   .view-detail .sg-reversible,
   .view-detail .sg-reversible:not(.sg-flip) .sg-face,
   .view-detail .sg-reversible.sg-flip .sg-back {
@@ -59,7 +90,6 @@
     min-height: auto !important;
     overflow: visible !important;
     position: relative !important;
-    min-width: 100%; // compensate for flex display
   }
 
   // Remove shadow from Cards
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index a78cd1cf7..62bbdf8b8 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -798,3 +798,127 @@ $quarter_height: 10px;
   }
 }
 
+/**
+ * Print page preview
+ */
+$preview-size: 200px;
+$preview-letter-ratio: 8.5 / 11;
+$preview-legal-ratio: 8.5 / 14;
+$preview-a4-ratio: 210 / 297;
+
+.sg-print-preview {
+  .letter.portrait & {
+    height: $preview-size;
+    width: $preview-letter-ratio * $preview-size;
+  }
+  .letter.landscape & {
+    height: $preview-letter-ratio * $preview-size;
+    width: $preview-size;
+  }
+  .legal.portrait & {
+    height: $preview-size;
+    width: $preview-legal-ratio * $preview-size;
+  }
+  .legal.landscape & {
+    height: $preview-legal-ratio * $preview-size;
+    width: $preview-size;
+  }
+  .a4.portrait & {
+    height: $preview-size;
+    width: $preview-a4-ratio * $preview-size;
+  }
+  .a4.landscape & {
+    height: $preview-a4-ratio * $preview-size;
+    width: $preview-size;
+  }
+}
+
+/**
+ * Print media
+ */
+@media print {
+  [ui-view=calendars] {
+
+    .allDaysView,
+    md-toolbar.daysView .days:not([sg-calendar-scroll-view$="allday"]),
+    md-toolbar.monthView > div {
+      overflow-y: hidden; // hide scrollbar
+    }
+  }
+
+
+  [ui-view=calendars] {
+
+    /**
+     * Events/tasks center list
+     */
+    md-tab-data,
+    md-tab-item:not(.md-active),
+    md-ink-bar,
+    // md-divider,
+    // .md-subheader,
+    md-list-item .md-secondary-container {
+      display: none;
+    }
+
+    [ui-view=listView]:not(.view-list--close) {
+      // border-right: 1px solid $colorGrayLighter;
+      padding-right: 2 * $layout-gutter-width;
+
+      .sg-tile-content .sg-md-subhead {
+        font-size: $caption-font-size-base;
+      }
+
+      md-list-item,
+      md-list-item::before,
+      md-list-item .md-list-item-inner::before {
+        min-height: 6 * $baseline-grid;
+      }
+    }
+
+    .md-tab {
+      font-size: $title-font-size-base;
+      padding: $layout-gutter-width;
+      color: $colorGrayDark;
+    }
+
+    .sg-tile-icons {
+      height: auto;
+    }
+
+    /**
+     * Calendar view
+     */
+    .view-detail md-card {
+      margin: 0;
+    }
+
+    .days .day {
+      border-left-color: $colorGrayLight;
+    }
+
+    .allDaysView,
+    .allDaysView--sidenav,
+    .hours .hour,
+    .days .day .clickableHourCell {
+      border-bottom-color: $colorGrayLight;
+    }
+
+    .sg-event {
+      &.sg-event--transparent:before {
+        content: none;
+      }
+      &[class*=bg-folder],
+      &[class*=bg-folder] md-icon {
+        background: white !important;
+        color: black !important;
+      }
+      &[class*=contrast-bdr-folder] {
+        border-color: black !important;
+        border-width: 1px !important;
+        border-style: solid !important;
+      }
+    }
+
+  }
+}