Creating an ‘Add to Calendar’ Widget in WordPress maintenance support plans
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/2021 – 21:11
There’s a plugin 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 plugin 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 WordPress maintenance support plans 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):
{%set classes = [ “add-to-calendar”]%} {% set ical_link = ‘data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0ADTSTART:’ ~ atc_start_date|date(“YmdTHi00Z”) ~ ‘%0ADTEND:’ ~ atc_end_date|date(“YmdTHi00Z”) ~ ‘%0ASUMMARY:’ ~ atc_title ~ ‘%0ADESCRIPTION:’ ~ atc_details|striptags ~ ‘%0ALOCATION:’ ~ atc_location|replace({”: ‘ ‘, ”: ‘ ‘, ”: ‘ ‘, ”: ”}) ~ ‘%0AEND:VEVENT%0AEND:VCALENDAR’ %} {% set google_link = ‘https://www.google.com/calendar/r/eventedit?text=’ ~ atc_title ~ ‘&dates=’ ~ atc_start_date|date(“YmdTHi00Z”) ~ ‘/’ ~ atc_end_date|date(“YmdTHi00Z”) ~ ‘&details=’ ~ atc_details|striptags ~ ‘&location=’ ~ atc_location|replace({”: ‘ ‘, ”: ‘ ‘, ”: ‘ ‘, ”: ”}) %} <div{{ attributes.addClass(classes) }}> <a href=”{{ google_link }}”>Add to Google Calendar <a href=”{{ ical_link }}”>Add to iCal <a href=”{{ ical_link }}”>Add to Outlook
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 WordPress maintenance support plans (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:
{% if add_to_calendar %} {% include ‘@site-components/add-to-calendar/add-to-calendar.twig’ %}{% endif %}
The WordPress maintenance support plans Part
In WordPress maintenance support plans 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 #} {% if node.field_add_to_calendar.value %} {% set add_to_calendar = true %}{% endif %} {% if node.field_event_date.value %} {% set atc_start_date = node.field_event_date.value %}{% endif %} {% if node.field_event_date.end_value %} {% set atc_end_date = node.field_event_date.end_value %}{% endif %} {% if node.title.value %} {% set atc_title = node.title.value %}{% endif %} {% if node.field_event_intro.value %} {% set atc_details = node.field_event_intro.value %}{% endif %} {% if node.field_event_location.value %} {% set atc_location = node.field_event_location.value %}{% endif %} … {% include “@content/event/event.twig” %}
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.
Source: New feed