0

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:

enter image description here

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.

chris.cavage
  • 759
  • 1
  • 13
  • 35
  • I can't see your entire HTML but could you try `@media print { body * { display:none; } #calendar_full, #calendar_full * { display:block; } }` I can't see any reason for the absolute positioning or the setting of height, if you use display: none instead of visibility: hidden. If you use "visibility:hidden" it makes the element invisible, but it still takes up space on the screen/page. Whereas display:none actually removes it entirely. – ADyson Jun 18 '19 at 20:17
  • See https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone for more on that topic – ADyson Jun 18 '19 at 20:17
  • 1
    only snag I can think of is maybe everything under body will inherit the display:none and not sure if you'll be able to override it. Haven't had time to test. You might be better off to add a "noprint" class or similar to the large areas of the page (under body) which you don't want printed - or adapt your HTML a bit so you've got some big wrapper divs you can put this class onto, and then make a rule in your CSS media query like `.noprint { "display:none;" }`, so that all areas specifically ordered not to print are hidden. Everything else would stay visible. That's a common technique. – ADyson Jun 18 '19 at 20:27
  • Thank you for the advice. It seems that ADyson your technique is working. I'm doing that now. Do you know if the fullcalendar print is mostly used for listviews? It seems to be showing all events properly now while printing lists. When I am in 'day' or 'week' view, it is still cutoff in the same way. Oddly enough, if I'm in any version of listview OR in month view, the calendar shows in its entirety for printing. It kinda makes sense to print out list views only, and if that's the case, I'll just make the print button only visible while viewing the list. – chris.cavage Jun 18 '19 at 20:51
  • No, I have no idea what types of views people tend to print. I'm pretty sure they're all supposed to print correctly. You could maybe try printing from some of the demos on the fullCalendar website and see if they have an issue with those kinds of views, or whether it's likely to be something more specific to your code. – ADyson Jun 18 '19 at 21:15

0 Answers0