How do I print my calendar?

I recently had a client ask me if they could print the calendar hosted on their website. The calendar is powered by one of the most popular WordPress calendar plugins on the market, The Events Calendar Pro by Modern Tribe. In addition to the pro license, the client also enabled some of the add-ons including the filter bar, and custom category colors.

Searching…

After looking in the usual corners of the web as well as spending a couple of hours browsing Modern Tribe’s support forums, I came to the conclusion there wasn’t a built-in method for printing the calendar. It also appears that Modern Tribe, though they have received many requests for the feature, haven’t seen enough value or demand to prioritize it over other more popular feature requests.

OK.  Now What?

My next thought was “If they don’t have a print option, certainly I could use Google Calendar to import the iCal feed of the calendar and print it from there”. Wrong! The Modern Tribe Events Calendar Pro plugin does offer an iCal Export feature, however, this is a one time export and won’t update a subscribed calendar as new events are added. Relying on the client to import the calendar over and over and over was not a great option.

Solutions or More Problems?

Continuing my search, I found two possible solutions.

  1. Create a new “View” for the Modern Tribe Calendar plugin. While Modern Tribe does offer documentation on where to find the files and how to add them to your theme, the documentation for manipulating those files is very limited and the time for such an endeavor would have been way out of scope for the feature request.
  2. (This is the option I used) Install the Advanced iCal Export extension and The AMR Event Lists with iCal Files Plugin.  Before this endevor, I was unaware of either of these.

The step by step process.

Let me break down the nitty gritty of how this all pieced together.

1. Install and configure the following plugins.

2. Create a new page and add the shortcode.

  • Create a new page by navigating to Pages > Add New in the admin console of your WordPress website. Give the page a name that makes sense like “Print Calendar”. This page will hold the printable calendar feed. For my client, I added a link to this page in the sidebar of their staff portal, but you could add a link to the page just above or below your main calendar, or anywhere else you like.
  • Add the AMR Event List shortcode to the new page in the text editor using the parameters documented on the plugin’s support site. The shortcode requires the URL of the iCal feed being generated by the Events Calendar Advanced iCal Export add-on. You can learn more about the various feed url options available on Modern Tribe’s related support page.
  • Your shortcode should look something like:
    [iCal https://yourdomain.com/calendar/?ical=1&tribe_display=custom&nocache=true listtype=12 grouping=day show_month_nav=1 calendar_properties=0 months=1 events=400 pagination=0]
    The shortcode includes the URL of your calendar feed and the AMR Events list type we selected in step 1. We also include parameters to tell the shortcode to group events by day, show the month navigation, hide the calendar properties, display 1 month per page, limit the event count load to 400 and turn off pagination. If you have fewer or more events per month on average, you can adjust the events=400 parameter to the number of events you want to load per month.
  • Because I ended up bringing in multiple categories as independent feeds, my shortcode ended up looking like this:
    [iCal https://wesleywillows.org/calendar/category/peterson-meadows/?ical=1&tribe_display=custom&nocache=true https://wesleywillows.org/calendar/category/wesley-willows-castle-town-center/?ical=1&tribe_display=custom&nocache=true https://wesleywillows.org/calendar/category/wesley-willows-fitness/?ical=1&tribe_display=custom&nocache=true https://wesleywillows.org/calendar/category/willows-arbor/?ical=1&tribe_display=custom&nocache=true listtype=12 grouping=day show_month_nav=1 calendar_properties=0 months=1 events=400 pagination=0]

3. Use CSS to modify the display of the event feed.

Add the following CSS to your theme’s style sheet or to the Custom CSS box in the WordPress theme customizer.

With media queries we can use the following CSS to modify the styles applied to the page when we go to print the calendar.

4. Add a print button.

Add the following HTML to the location you where you want your print button to go. We have added the calPrintBtn class for styling and the noPrint class to prevent the button from displaying on the print out.

Next we can add some style to the print button.

Bonus: Turn on and off categories for print

If you are bringing in multiple calendar feeds with the shortcode we can add some HTML and JQuery to give us the ability to turn on and off the various calendars, so we can control what we want to print.

Add the following HTML to display the category checkboxes.

  Assuming your site already has JQuery loaded, add the following script so the selection boxes turn on and off multiple calendars feeds.

Final Thoughts

While this isn’t the most elegant solution to the problem, it definitely worked for the client and their needs. Ideally, in the future, the Modern Tribe team will take the time to develop a “Print” view and add it to the various view options already shipped with the plugin eliminating the need for workarounds and extra plugins. If you think this would be helpful head on over to Modern Tribe’s features thread and cast a vote.

Grab the Code

You can grab all of the HTML, CSS, and JS included in this post from our CodePen.

See the Pen AMR Event List Styles by Aaron Biby (@aaronbiby) on CodePen.dark

Pin It on Pinterest

Share This