library/fullcalendar/fullcalendar.print.css

   1 /*!
   2  * FullCalendar v3.0.1 Print Stylesheet
   3  * Docs & License: http://fullcalendar.io/
   4  * (c) 2016 Adam Shaw
   5  */
   6
   7 /*
   8  * Include this stylesheet on your page to get a more printer-friendly calendar.
   9  * When including this stylesheet, use the media='print' attribute of the <link> tag.
  10  * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
  11  */
  12
  13 .fc {
  14         max-width: 100% !important;
  15 }
  16
  17
  18 /* Global Event Restyling
  19 --------------------------------------------------------------------------------------------------*/
  20
  21 .fc-event {
  22         background: #fff !important;
  23         color: #000 !important;
  24         page-break-inside: avoid;
  25 }
  26
  27 .fc-event .fc-resizer {
  28         display: none;
  29 }
  30
  31
  32 /* Table & Day-Row Restyling
  33 --------------------------------------------------------------------------------------------------*/
  34
  35 .fc th,
  36 .fc td,
  37 .fc hr,
  38 .fc thead,
  39 .fc tbody,
  40 .fc-row {
  41         border-color: #ccc !important;
  42         background: #fff !important;
  43 }
  44
  45 /* kill the overlaid, absolutely-positioned components */
  46 /* common... */
  47 .fc-bg,
  48 .fc-bgevent-skeleton,
  49 .fc-highlight-skeleton,
  50 .fc-helper-skeleton,
  51 /* for timegrid. within cells within table skeletons... */
  52 .fc-bgevent-container,
  53 .fc-business-container,
  54 .fc-highlight-container,
  55 .fc-helper-container {
  56         display: none;
  57 }
  58
  59 /* don't force a min-height on rows (for DayGrid) */
  60 .fc tbody .fc-row {
  61         height: auto !important; /* undo height that JS set in distributeHeight */
  62         min-height: 0 !important; /* undo the min-height from each view's specific stylesheet */
  63 }
  64
  65 .fc tbody .fc-row .fc-content-skeleton {
  66         position: static; /* undo .fc-rigid */
  67         padding-bottom: 0 !important; /* use a more border-friendly method for this... */
  68 }
  69
  70 .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td { /* only works in newer browsers */
  71         padding-bottom: 1em; /* ...gives space within the skeleton. also ensures min height in a way */
  72 }
  73
  74 .fc tbody .fc-row .fc-content-skeleton table {
  75         /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
  76            making it look more like 3em. for other browers, it will already be this tall */
  77         height: 1em;
  78 }
  79
  80
  81 /* Undo month-view event limiting. Display all events and hide the "more" links
  82 --------------------------------------------------------------------------------------------------*/
  83
  84 .fc-more-cell,
  85 .fc-more {
  86         display: none !important;
  87 }
  88
  89 .fc tr.fc-limited {
  90         display: table-row !important;
  91 }
  92
  93 .fc td.fc-limited {
  94         display: table-cell !important;
  95 }
  96
  97 .fc-popover {
  98         display: none; /* never display the "more.." popover in print mode */
  99 }
 100
 101
 102 /* TimeGrid Restyling
 103 --------------------------------------------------------------------------------------------------*/
 104
 105 /* undo the min-height 100% trick used to fill the container's height */
 106 .fc-time-grid {
 107         min-height: 0 !important;
 108 }
 109
 110 /* don't display the side axis at all ("all-day" and time cells) */
 111 .fc-agenda-view .fc-axis {
 112         display: none;
 113 }
 114
 115 /* don't display the horizontal lines */
 116 .fc-slats,
 117 .fc-time-grid hr { /* this hr is used when height is underused and needs to be filled */
 118         display: none !important; /* important overrides inline declaration */
 119 }
 120
 121 /* let the container that holds the events be naturally positioned and create real height */
 122 .fc-time-grid .fc-content-skeleton {
 123         position: static;
 124 }
 125
 126 /* in case there are no events, we still want some height */
 127 .fc-time-grid .fc-content-skeleton table {
 128         height: 4em;
 129 }
 130
 131 /* kill the horizontal spacing made by the event container. event margins will be done below */
 132 .fc-time-grid .fc-event-container {
 133         margin: 0 !important;
 134 }
 135
 136
 137 /* TimeGrid *Event* Restyling
 138 --------------------------------------------------------------------------------------------------*/
 139
 140 /* naturally position events, vertically stacking them */
 141 .fc-time-grid .fc-event {
 142         position: static !important;
 143         margin: 3px 2px !important;
 144 }
 145
 146 /* for events that continue to a future day, give the bottom border back */
 147 .fc-time-grid .fc-event.fc-not-end {
 148         border-bottom-width: 1px !important;
 149 }
 150
 151 /* indicate the event continues via "..." text */
 152 .fc-time-grid .fc-event.fc-not-end:after {
 153         content: "...";
 154 }
 155
 156 /* for events that are continuations from previous days, give the top border back */
 157 .fc-time-grid .fc-event.fc-not-start {
 158         border-top-width: 1px !important;
 159 }
 160
 161 /* indicate the event is a continuation via "..." text */
 162 .fc-time-grid .fc-event.fc-not-start:before {
 163         content: "...";
 164 }
 165
 166 /* time */
 167
 168 /* undo a previous declaration and let the time text span to a second line */
 169 .fc-time-grid .fc-event .fc-time {
 170         white-space: normal !important;
 171 }
 172
 173 /* hide the the time that is normally displayed... */
 174 .fc-time-grid .fc-event .fc-time span {
 175         display: none;
 176 }
 177
 178 /* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
 179 .fc-time-grid .fc-event .fc-time:after {
 180         content: attr(data-full);
 181 }
 182
 183
 184 /* Vertical Scroller & Containers
 185 --------------------------------------------------------------------------------------------------*/
 186
 187 /* kill the scrollbars and allow natural height */
 188 .fc-scroller,
 189 .fc-day-grid-container,    /* these divs might be assigned height, which we need to cleared */
 190 .fc-time-grid-container {  /* */
 191         overflow: visible !important;
 192         height: auto !important;
 193 }
 194
 195 /* kill the horizontal border/padding used to compensate for scrollbars */
 196 .fc-row {
 197         border: 0 !important;
 198         margin: 0 !important;
 199 }
 200
 201
 202 /* Button Controls
 203 --------------------------------------------------------------------------------------------------*/
 204
 205 .fc-button-group,
 206 .fc button {
 207         display: none; /* don't display any button-related controls */
 208 }