Creating an iCal feed in MODX with mxCalendar

This one isn't for the faint of heart, but I just spent a while getting one up and running and wanted to share the experience. If you're a MODX fiend and want a great feature for your site, read on.

First off, iCal is notoriously finicky for details, so make sure to keep your eye on them as you progress through this. You've been cautioned—now let's go!

Create Your Custom Resource Type

MODX comes with a few pre-defined resource types, but iCal is not one of them. To make one, we're going to head on over to your MODX manager. Go to System > Content Types. Click the button in the top left that says "New Content Type", and in the window that pops up, enter "iCal" as the name, ".ics" as the file extension and "text/calendar" as the MIME type. Now click save.

Create Your iCal Resource

Go to your site tree and create a new resource. This resource should not use Rich Text as the tags will screw with the XML so be sure to turn Rich Text off. While you're there, go ahead and set the content type to iCal. Once you've done both of these things, it's time to enter your XML Wrapper and the mxCalendar call in the content area.

XML Wrapper & mxCalendar call

xml BEGIN:VCALENDAR PRODID:-//YourWebsite//SiteCalendar//EN
VERSION:2.0
METHOD:PUBLISH
BEGIN:VTIMEZONE TZID:America/New_York
X-LIC-LOCATION:America/New_York
BEGIN:DAYLIGHT
TZOFFSETFROM:+0000
TZOFFSETTO:+0100
TZNAME:IST
DTSTART:19700329T010000
RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU
END:DAYLIGHT
BEGIN:STANDARD
TZOFFSETFROM:+0100 TZOFFSETTO:+0000
TZNAME:GMT DTSTART:19701025T020000
RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU
END:STANDARD
END:VTIMEZONE
[[!mxCalendar? &addJQ=`0` &displayType=`list` &eventListlimit=`1000` &elEndDate=`+1 year` &tplListItem=`tplListItemICAL` &tplListHeading=`tplListHeadingICAL` &tplListWrap=`tplListWrapICAL` &tplDetail=`tplDetailICAL` &debug=`0` &sort=`startdate` &dir=`ASC`]]
END:VCALENDAR

Ok - that's a decent amount of code, so let's walk through it, shall we? Pretty much everything before the beginning of the mxCalendar call is standard iCal header information. The only things you should look at changing are the first line (change "YourWebsite" to something else...obviously) and the lines that reference your timezone. If you're not on Eastern Time (USA) then those will need to change to your timezone. The rest of the information is referencing daylight savings time, so you should probably leave that be.

Now, let's look at the mxCalendar call. You'll have to create 4 custom chunks for this call, as well as using a few basic mxCalendar properties. Your custom chunks are tplListItemICAL, tplListHeadingICAL, tplListWrapICAL and tplDetailICAL.

First off, tplListHeadingICAL is a blank chunk. We don't want any months listed in between our events, so it is blank to eliminate a stock functionality from the mxCalendar list view. On to the next: tplListItemICAL and tplDetailICAL are the exact same chunk. One will be used to output the full list (tplListItemICAL), and one is for if you need to render an individual event in iCal format (tplDetailICAL). A for instance would be having an "Add this Event to your Calendar" button in your event details. Lastly, the tplListWrapICAL chunk contains only the mxCalendar event list placeholder ( [[+eventList]] ).

tplListItemICAL & tplDetailICAL chunks

xmlBEGIN:VEVENT
UID:[[+id]][[+startdate]]@example.com
DTSTAMP:[[!ical_datestamp]]T[[!ical_timestamp]]
DESCRIPTION:[[+description:replace=`<br />==\n`:replace=`http://http://==http://`]]
DTSTART:[[+startdate:date=`%Y%m%dT%H%M%S`]]
DTEND:[[+enddate:date=`%Y%m%dT%H%M%S`]]
LOCATION:[[+location_name]]
SUMMARY:[[+title]]
END:VEVENT

A few important things about the code above. First, it uses some output modifiers to edit the content flowing into it. In the Description, it strips out any <br/> and replaces them with a newline XML character ( /n ). It also eliminates an error with double http:// prefixes that I was noticing. Lastly, it references two tiny custom snippets ( ical_datestamp & ical_timestamp ) that are necessary to make sure that the date and time stamps are correct when a user downloads the feed/event for the first time. These snippets are below.

ical_datestamp snippet:

php<?php echo date("Ymd");

ical_timestamp snippet:

php<?php echo date("His");

And there we have it! I've kept the walkthrough to a minimum, as most people who choose to attempt something like this will have an idea what they're doing beforehand. If you have any questions, ask away in the comments below!

For reference, feel free to refer to the mxCalendar documentation as well!

Did I help you out?

Read More

←  My Toolbox Dead Simple Dropdown Menu  →

There are 4 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. ChaarlesMx

    ChaarlesMx

    Mar 11, 2013

    Very good tutorial, thanks for putting such a helpful guide for this. It will certainly be used.

    Cheers

    Reply to ChaarlesMx

    1. Jesse

      Jesse

      Mar 12, 2013

      Thanks Charles! Always try to give back to the MODX community when I can.

  2. Menno Pietersen

    Menno Pietersen

    Apr 15, 2013

    Great tut, did not know this one...

    Reply to Menno

    1. Jesse

      Jesse

      Apr 15, 2013

      Yeah, I don't usually try to re-do something that someone else has already done. Like to be as original as I can!