Printing Calendar Questions – print.css

[wallyglenn]

I would like to set up the Month grid view so that if a customer wants to print out the calendar, it shows the events.

What happens now is that when I print, I get the page view (menu, footer, calendar grid, date), but no listings.

In addition, the formatting of the calendar grid is stripped out and I would like to add it back in.

The problem is that I can’t locate a print.css file or a “@media print” Media Type where printing is handled. I have tried looking over events-calendar-pro.php to see if I could figure out which classes might be hidden in the print view and set them to display.

What I would specifically like to do is activate the Event titles. It would be really great if I could add in thumbnails as well and better style the table grid.

I have started to create an print media type to add to my custom user tribe-events.css to illustrate what I am attempting to do and offer it as a starter for anyone else looking to utilize the same feature.

@media print {

#tribe-events-bar,
#tribe-events-footer,
#tribe-events-button,
#footer {
display: none;
}

.tribe-events-ical,
.tribe-events-button {
display: none !important;
}

.main-nav {
display: none;
}

.tribe-events-month-event-title,
.print-only {
display: block;
}
}

[Casey]

wallyglenn,
Thanks for getting in touch! I suspect what’s happening is that the mobile/responsive view is kicking in at the print resolution and hiding the event titles. Could you send me a screenshot of your print-preview window, so I can confirm and continue troubleshooting?

Thanks! 🙂

-Casey-

[wallyglenn]

I do not see an option to upload a screenshot.
You can visit this web site, try to print and see the result:
http://comedyunderground.com/?post_type=tribe_events

Or you can go to your demo version and see the same result:
http://wpshindig.com/events/

It does seem related to the mobile view.

[Casey]

wallyglenn,
Thanks for the clarification. This does indeed look like a bug with the responsive view, and I’ve logged it as a ticket for our developers to fix in an upcoming version.

In the mean time, you should be able to paste this code snippet into your theme’s functions.php file as a workaround to prevent the mobile stylesheets from kicking in when printing: https://gist.github.com/ckpicker/10293ac66a9486c99fa2

Give that a shot and let me know if it does the trick. Thanks! 🙂

-Casey-

[wallyglenn]

Casey, that solved the problem.

I would like to fine-tune the output to override the grayed out days. Is there a css that handles printing or one that is favored over the other? I am attempting to fine-tune my @Media print type.

[Casey]

wallyglenn,
Your media query for ‘print’ that you pasted above is correct, and should do the trick to customize things for printing. To change the color of the past event day headings, you could use the following CSS in your printing styles:


.tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"], .tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"]>a {
background-color:gray;
color: white;
}


Obviously, you’d want to change the colors/styles to match your own needs, but that should do the trick to style up the grayed out days. Thanks! 🙂

-Casey-

[wallyglenn]

Thank you for the class information. The change might actually be not the color but changing the opacity to opacity: 1;.

Casey, I think the original issue is resolved for now.

However, I am still working on fine-tuning the print.css or in this case @media print. Should we close out this ticket and start a new one just on print.css?

I would like the ability to style the print version of the grid calendar. Right now it does not look as pretty as the web page and I would like to better style the look for my site and offer the result to others.

[Casey]

wallyglenn,
We can go ahead and keep this thread open, and you can just share your print.css file here for others when you complete your changes. Thanks for your willingness to share your customizations with the community! 😀

[Leah]

Hi there,

I just wanted to drop in and update you on the status of this issue. We are working on a fix, but we were not able to include it in our upcoming release (3.7). Correcting this problem is still important to us and we hope to have a fix done for a future maintenance release. We will do our best to keep you updated here on our progress. Thank you for your patience and understanding while we work on this.

Best,
Leah

[Laura Menze]

I have the same problem as WallyGlenn. I would like to be able to print my calendar with the events shown on the specific dates rather than an empty calendar. I see the fix you posted however, I am a novice user and don’t see where to paste: https://gist.github.com/ckpicker/10293ac66a9486c99fa2

I’ve been able to get to my ‘function.php’ page on my custom theme on my WordPress site, but have no idea where to paste this… Could you please guide me a little?

Thanks,

Laura

[Casey]

Laura,
You should be able to just paste that code right after the PHP opening tag ( <?php ). Give that a try and let me know if it does the trick. Thanks! 🙂

-Casey-

[Laura Menze]

Not working…probably human error. I updated the Functions page, and refreshed my event calendar page. When I went to print the calendar, nothing changed.

[Casey]

Imenze,
Could you start a new thread of your own and share the link with me here, so we can troubleshoot the issue there? Thanks! 🙂

-Casey-

[Leah]

Hi there,

I just wanted to let you know that we were able to work on this issue for our upcoming 3.8 release. Keep an eye out on your site for an update announcement! If you update and are still seeing this problem, please post a new thread so we can check it out. Thank you for your patience while we got this fix in place.

Best,
Leah
and the team at Modern Tribe

[Author]

Posts