How do I make the Modern Tribe Events Calendar print friendly?

by | Jun 17, 2019 | Tutorials

[print-me]
Making a printable calendar with the event calendar pro

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 run by one of the most popular WordPress calendar plugins on the market, The Events Calendar Pro by Modern Tribe. The client has paid for the pro license and has enabled some of the add-ons including the filter bar, and custom category colors.

After looking in the usual corners of the web as well as spending a couple of hours looking at 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.

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

After much searching I found two possible solutions. The first would be to 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.

The second option and the one I ultimately went with was to install the Events Calendar Extension: Advanced iCal Export and a really cool plugin which would actively pull an advanced iCal feed from the Events Calendar plugin called The AMR Event Lists with iCal Files Plugin, neither of which I was previously aware.

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.

/******************************
**** AMR EVENT LIST STYLES ****
******************************/
/* Hide Event Excerpt */
#events_wrap > table > tbody > tr > td > div.excerpt {
    display: none;
}
/* Hide Event Duration */
#events_wrap > table > tbody > tr > td > div.duration {
    display: none;
}
/* Set Day Background Color*/
#events_wrap > table > tbody > tr.trigger.group.Day {
    background: #f2f2f2;
}
#events_wrap > table > tbody > tr > td > div > a {
    font-weight: 600;
}
/* Change Event Location to Italic */
#events_wrap > table > tbody > tr > td > div.location {
    font-style: italic;
}
/* Reduce padding for each line */
#events_wrap table.ical th, #events_wrap table.ical td, #events_wrap table.ical tr {
    padding: 4px 0px 4px 0px;
}
/* Set color for Calendar 0 Events */
#cal0Label, .cal0 > td > div > a{
    color: #891f03;
    font-weight: 600;
    padding-left: 4px;
}
/* Set color for Calendar 1 Events */
#cal1Label, .cal1 > td > div > a{
    color: #29623e;
    font-weight: 600;
        padding-left: 4px;
}
/* Set color for Calendar 2 Events */
#cal2Label, .cal2 > td > div > a{
    color: #39a0bf;
    font-weight: 600;
        padding-left: 4px;
}
/* Set color for Calendar 3 Events */
#cal3Label, .cal3 > td > div > a{
    color: #e7a723;
    font-weight: 600;
        padding-left: 4px;
}

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

/******************************
******** PRINT STYLES *********
******************************/
@media print {
/* Genereic class to assign to items I don't want printed */
.noPrint {
display: none;
}
/* Items found on the page that I don't want to print but can't assign a class to. Use your page number in place of 12345 */
.page-id-12345 #sidebar, .page-id-12345 #main-header, .page-id-12345 #main-footer, .page-id-12345 #events_wrap > div.calendar_navigation, .page-id-12345 .entry-title{
display: none;
}
}

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.

/******************************
******** CONTROL STYLES *******
******************************/
.calPrintBtn {
  color: #444;
  background: #fff;
  font-family: helvetica, arial, sans;
  font-size: 14px;
  font-weight: 400;
  padding: 6px 12px;
  border: 1px solid #444;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.calPrintBtn:hover{
  color: #008800;
  border-color: #008800;
}

Bonus: Turn on and off categories for print

Modify the shortcode to include multiple calendars separated by category.
Add HTML and JQuery for selection boxes to turn on and off multiple calendars.

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