Printing issues

[Haks1]

Hi,

First of all, thank you for this great fork of fullcalendar :)

I've detected some issues about the printing:

Some events are shifting from their right position, which make the calendar to be false.

Also, but I think this is about yearview but also the other version of fullcalendar, the event background is not displayed and so the calendar is pretty empty.

For this last issue, I've tried to set a border in the .print.css to keep them displayed on media="print":

.fc-event, .fc-event-inner {
/*  background: #fff !important; */
    border: 1px dashed red !important;
    color: #000 !important;
    }

Some ones (as long event) finally appear after this fix but most of them still not displayed.

If you got a solution, it will be great :) !

Thx again

[tpruvot]

I had the same problem in my project... I fixed the problem with local margins on the body (or container) for @media print.

Can you repeat the problem with the demo ? In which browser ?

[Haks1]

Yes sure, here is a rendered html (saved with chrome): https://github.com/Haks1/devstuffs/tree/master/fc_yv_printbug

The the browser, it's the same result in all of them.

[tpruvot]

Nice integration.

But this is static html, i cant do anything with that. Ive seen something similar when i tried to add a year calendar in a hidden tab.

Two possible solutions for the events alignment:

• if resizing the browser window change something, you can fire a resize() event.
• make the tab visible before the fullcalendar init code.

For the print styles, do something like this:

@media print {
    body { background: transparent; }
    #header, #footer, #mainmenu { display:none; }
    td.fc-header-left { display:none; }
    #content { padding: 0; }
    #calendar { margin: 0; margin-top: -8px; margin-left: 16px; width: 930px; }
    a.btcom { display:none; }
    .fc-event-bg { display:normal; }
    a.ev1.fc-event { color: navy !important; }
    a.ev2.fc-event { color: darkgreen !important; }
    a.ev3.fc-event { color: darkred !important; }
    a.ev4.fc-event { color: purple !important; }
    a.ev5.fc-event { color: black !important; }
    a.ev8.fc-event { color: darkcyan !important; }
    a.evit.fc-event { color: gray !important; }
    a.fc-event, .fc-year-monthly-td table { box-shadow: none; }

    .fc-year-main-table { page-break-inside:auto; }
    .fc-year-main-table tbody tr { page-break-inside:avoid; page-break-after:always; }
    .fc-year-monthly-name { page-break-before:auto; page-break-after:avoid; }

    a.fc-event span.fc-event-title { font-size: 9px; }
    @page { margin: 10px; }
}
</style>