Fullcalendar Scheduler Timeline Print Issue - css

Question

Scheduler Fullcalendar timeline view doesn't REALLY support printing at all but unfortunately my client needs it. The issue is that the latter half of the calendar is getting cut off in print.
The potential solutions: Using zoom: 0.8 works amazing in Chrome and all the days of the week appear. However that doesn't do anything for Firefox. transform: scale(0.8) doesn't seem to have the same effect as part of calendar is still cut off, though it's all scaled down. If I emulate css in Chrome it shows up even with the transform scale toggled on, however does not show up in actual print.
Please excuse the potato styling of the calendar when it prints. I'm more concerned with friday the latter half of the calendar being cut off. In chrome toggle my comment for zoom and switch to scale to see the difference.
Here is codepen link https://codepen.io/bedelman851/pen/wXeZEO

Answer 1

I've been away from this project for a while and I don't think I solved this satisfactorily but I did solve it to be "good enough" for my situation. I looked into lots of options and spent way too much time on it.
The css I ended up going with is below. I can't vouch for how it looks or what you need, but if it's helpful then I am glad!
//CALENDAR CSS
.calendar-functions,
.calendar-functions div:last-child,
.calendar-functions a,
.calendar-view h1,
.fc-right,
.fc-right button,
.fc-license-message,
.print-button,
.print-button-week {
display: none;
}
.month-view .calendar-functions div,
.week-view .calendar-functions div {
display: none;
}
.fc-event:after {
content: attr(data-coll) !important;
}
.fc-body {
height: 400px !important;
}
.calendar-widget-week,
.fc-timeline {
width: 100%;
}
body {
width: 100%;
}
.fc-view-container {
// transform: scale(0.8);
zoom: 0.8;
}
.fc-timeline {
th {
height: 30px;
}
.fc-scroller-canvas {
min-width: 100% !important;
width: 100% !important;
}
}
.calendar-day tr td:first-child {
a[href]:after {
display: none;
}
}
.fc {
max-width: 100% !important;
th {
height: 30px;
}
}
.fc-event {
background: transparent !important;
color: #000 !important;
page-break-inside: avoid;
}
.fc-event .fc-resizer {
display: none;
}
.fc th,
.fc td,
.fc hr,
.fc thead,
.fc tbody,
.fc-row {
border-color: #ccc !important;
}
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-helper-skeleton,
.fc-business-container,
.fc-highlight-container,
.fc-helper-container {
display: none;
}
.fc-ltr .fc-timeline-event {
margin-right: 5px;
}
.calendar-widget-week .fc-timeline-event {
padding-bottom: 97px;
}
/* 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; }
//List views
.pagination-right,
.pagination-left *,
.pagination-right *,
.pagination-left {
display: none;
}
.fc-day-grid-event,
.fc-timeline-event {
&:before {
content: attr(data-id);
}
&:after {
content: "";
}
&:before,
&:after {
display: inline-block !important;
}
}
.fc-scroller {
overflow: visible !important;
.fc-scroller-canvas {
min-width: none !important;
}
}
#page :left {
margin-left: 0;
}
#page :right {
margin-left: 0;
}
/* for vertical events */
.fc-event-bg {
display: none !important;
}
.fc-event .ui-resizable-handle {
display: none !important;
}
.print-window__exit {
display: none;
}
#calendar-week {
display: none;
}
.dt-print-view {
#calendar-week {
display: block;
}
}
.print-table,
.print-title {
display: block !important;
}

Answer 2

This worked from me on Chrome and Edge (Firefox is still working too)
#media print {
body {
zoom: 0.8;
}
}