Fullcalendar how to print div: media print - css

Question

I am using fullcalendar version 4 nicely. I am adding a print button to it. The docs say I don't need to include any other files (like version 3 needed), and I should be able to handle the printing using media queries.
I've been reading about media queries and have come up with some code to work on the print page of the calendar div.
<div class="portlet-body">
<div class='loader'>
</div>
<div class="row">
<div class="col-md-5">
<a id="print_calendar" class="btn btn-xs default">Print</a>
</div>
<div class="col-md-7">
</div>
<br>
<div id="calendar_full" style="padding-left: 10px; padding-right: 15px;">
</div>
</div>
</div>
I pulled some unnecessary code from the above to simplify this. When the user clicks the print link, I just want calendar_full to print.
I am including calendar_full.php on this index page which has my full calendar scripts. In that file, I have this following CSS. I am new to media print CSS, so this is the point I got to isolate only the calendar_full div.
<style type="text/css">
#media print {
body * {
visibility: hidden;
height: 0;
}
#calendar_full,
#calendar_full * {
visibility: visible;
height: auto;
}
#calendar_full {
position: absolute;
left: 0;
top: 0;
height: 100%
}
}
When print is selected, I see something like this:
The calendar NEVER extends past that height, no matter what view I'm in: list, week, etc. Events naturally are cut off, as it seems, to that viewpoint all the time. I don't know if this is a just a CSS issue or if I need to do something more with the full calendar plugin.
I basically need it to expand the entire print range to encompass all of the calendar div events.