A simple request: we need an ‘Add to Calendar’ widget to add our events to Google Calendar, iCal, and Outlook. Simple (once I had completed it!).
markconroy
Tue, 01/08/2019 – 21:11
There’s a module for that. There is, it’s called, obviously, addtocalendar. It works very well, if you:
- want to use the addtocalendar.com service,
- want to pay for this service
If you don’t want to use an external service for something as simple as adding an event to a calendar, then it looks like you’ll need a custom solution. Their smallest plan only allows 2 events per month.
The PatternLab Part
Here’s the custom solution I came up with (in the future, I’ll look at creating a module for this with a settings/UI page for site builders). Note, it’s a PatternLab implementation; if you don’t use PatternLab and just want to work directly in your Drupal theme, it would be even easier.
Here’s the code for the ‘Add to Calendar’ pattern in PatternLab (some classes and things are removed to make it easier to read):
{% "add-to-calendar" ] %} {% set ical_link = 'data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0ADTSTART:' ~ atc_start_date|date("Ymd\THi00\Z") ~ '%0ADTEND:' ~ atc_end_date|date("Ymd\THi00\Z") ~ '%0ASUMMARY:' ~ atc_title ~ '%0ADESCRIPTION:' ~ atc_details|striptags ~ '%0ALOCATION:' ~ atc_location|replace({'
': ' ', '
': ' ', ''
: ' ', '': ''}) ~ '%0AEND:VEVENT%0AEND:VCALENDAR' %} {{ attributes.addClass(classes) }}>
What does the above code do?
- Creates a Google Calendar variable and creates an iCal variable. Outlook will also use iCal.
- Uses these variables as links to add the event to their respective calendars.
Within the variables, we have some more variables (start date, end date, etc), which we should probably wrap in conditional statements so that their clauses don’t print unless they are present in Drupal (some fields might be optional on your event content type, such as end time).
These variables are:
- atc_start_date: Start Date and time
- atc_end_date: End Date and time
- atc_title: the name of the event
- atc_details: description for the event
- atc_location: place of event
In our Event pattern in PatternLab, we then have a variable called ‘add_to_calendar’ so that events have the option to have this widget or not. In event.twig, we simply print:
The Drupal Part
In Drupal we create a boolean field on our event content type field_event_add_to_calendar, if this is ticked, we will display the Add to Calendar widget.
Here’s the code from node–event–full.html.twig
{# Set the Add to Calendar Variables #} ...
To explain:
If the ‘Add to Calendar’ boolean is on, we set the add to calendar variable as true
This in turn tells patternlab to render the Add to Calendar component.
We then check if each field we might use has a value in it – such as a start date and end date
If so, we map the values from each of those fields to variables in our Add to Calendar component (such as atc_start, atc_title, etc)
Now, when you view a node, you will see your Add to Calendar widget on any nodes that the editors choose to put it. You can see a sample of the Add to Calendar widget in my PatternLab.
Simple, once I figured it out.
Got an improvement for this? The comments are open.