Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

webpage comes out blank when print in firefox, prints fine in google chrome?

  • 4 replies
  • 5 have this problem
  • 21 views
  • Last reply by leslielell

This is the url of what I am trying to print

http://selfhelpcpc.org/calendar/action~month/exact_date~1391230800/

It prints everything EXCEPT for the data in the calendar! Which is what I need! I can see everything in print preview. but when I print it either to a printer or to a pdf, the data in the calender is blank!

This does not happen in Google Chrome, but I prefer firefox! And don't want to use 2 different browsers.

thanks any help would be great!

This is the url of what I am trying to print http://selfhelpcpc.org/calendar/action~month/exact_date~1391230800/ It prints everything EXCEPT for the data in the calendar! Which is what I need! I can see everything in print preview. but when I print it either to a printer or to a pdf, the data in the calender is blank! This does not happen in Google Chrome, but I prefer firefox! And don't want to use 2 different browsers. thanks any help would be great!

Chosen solution

Sometimes it's hard to let go of a problem...

The events in the calendar are set to 85% opacity, meaning 15% transparency. For some reason, this is causing them not to print. Setting the opacity of those items to 100% (0% transparency) fixes it.

To test, you can use Firefox's Web Console.

First, select and copy the following long line of script:

var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);

Next, while viewing the calendar in month view, press Ctrl+Shift+k to open the Web Console. Paste next to the caret (») and press Enter to run it. Then print (I've been testing by printing to PDF). Does it work for you, too?

In my opinion, you can get a more useful printed result with two other tweaks:

  • Allowing the full descriptions to show instead of truncating them
  • Adding page breaks before and after the calendar

This is the longer script incorporating those changes:

var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);

Those changes will be visible in Print Preview in case you only want to print the actual calendar page(s) and not the before and after parts.


If you find that you need to apply this hack often, you can save it as a bookmarklet, which is a bookmark that runs a script. Here's the slightly modified script:

javascript:var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s); void 0;

Right-click the Bookmarks Toolbar or Bookmarks Menu (wherever you want to add the "button") and choose New Bookmark. Paste into the Location field, then assign a name (e.g., PrintCal) and click Add Bookmark to save it.

Alternately, since these are purely style rules, you could use the Stylish extension or the userContent.css file to apply them any time you visit the page. But it's late so that will have to be a subject for a different post.

Hope this helps.

Read this answer in context 👍 1

All Replies (4)

I don't think I've seen such a slick calendar before. Or one so difficult to print...

The site is using the latest version of the All-in-One Event Calendar Plugin for WordPress, so it's not like they've failed to keep up-to-date.

The style rules are very complex and it could take quite a while to track down the problem.

At this point, I don't have any suggestions for printing the Month, Stream, or Posterboard views. However, perhaps you can make some use of the (much longer) Agenda view?

I know...and the people who created the plugin are not so willing to find a resolution either. Unfortunately I need the month view to print, for each of my staff :-( Thanks for taking a look though!! Appreciate it! May have to just have staff use chrome to get the print done!

Chosen Solution

Sometimes it's hard to let go of a problem...

The events in the calendar are set to 85% opacity, meaning 15% transparency. For some reason, this is causing them not to print. Setting the opacity of those items to 100% (0% transparency) fixes it.

To test, you can use Firefox's Web Console.

First, select and copy the following long line of script:

var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);

Next, while viewing the calendar in month view, press Ctrl+Shift+k to open the Web Console. Paste next to the caret (») and press Enter to run it. Then print (I've been testing by printing to PDF). Does it work for you, too?

In my opinion, you can get a more useful printed result with two other tweaks:

  • Allowing the full descriptions to show instead of truncating them
  • Adding page breaks before and after the calendar

This is the longer script incorporating those changes:

var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s);

Those changes will be visible in Print Preview in case you only want to print the actual calendar page(s) and not the before and after parts.


If you find that you need to apply this hack often, you can save it as a bookmarklet, which is a bookmark that runs a script. Here's the slightly modified script:

javascript:var r="@media print{.ai1ec-month-view a.ai1ec-event-container{opacity: 1.0!important;} .ai1ec-month-view .ai1ec-event{height:auto!important; white-space:normal!important;} #ai1ec-calendar-view-container{page-break-before:always; page-break-after:always;}}"; var s=document.createElement("style"); s.type="text/css"; s.appendChild(document.createTextNode(r)); document.body.appendChild(s); void 0;

Right-click the Bookmarks Toolbar or Bookmarks Menu (wherever you want to add the "button") and choose New Bookmark. Paste into the Location field, then assign a name (e.g., PrintCal) and click Add Bookmark to save it.

Alternately, since these are purely style rules, you could use the Stylish extension or the userContent.css file to apply them any time you visit the page. But it's late so that will have to be a subject for a different post.

Hope this helps.

You are Brilliant!!! I am forwarding your fix to the plugin developer, to see if they can edit their code, to create a permanent fix! I will definitely use the console, for now, to print my staff calendars (this would be beyond my staffs ability to do).....Thank you soo much for being as obsessive as me!!!!