2019-19 - Add to calendar

• Edit this page
• Revision history
• Questions or comments?

Project lead: Eric Guitard

Add to calendar functionality

Requirements

• As a publisher, I would like to have a new widget to allow visitors to save event details to their devices’ calendars, so they can access information related to events from their personal devices.
• As a visitor to a GoC website I would like to be able to save event details, specifically: Title, Start time, End time, Location and Description to my device’s calendar so that I can access them from my device.
• As a visitor, I would like this feature to be compatible with Google calendar, Outlook, Apple and Android devices, so that multiple devices are able to save events.
• Support Schema.org vocabulary for Event thing marked by using RDFa Lite

Existing tools reviews

carlsednaoui OuiCal

• OuiCal on github
• working example:
  • Add-to-calendar buttons/example

Visual

• Clickable expandable collapsable item to preview the calendar link options

iCal Event Maker

• iCal Event Maker - Create iCalendar .ics to share your event

Related standard and references

• rfc5545 - Internet Calendaring and Scheduling Core Object Specification
• iCalendar.org - iCalendar Resources, Specifications and Tools
• Shhema.org - Envent
• W3c - Date and Time Formats
• Google Calendar URL Structure
• Making a Google Calendar Link

Discussions and findings

• Initial thougth was for authors to create the ics file and Google link manually and add event details using RDFa markup of schema.org/Event pattern.
• For grouping and having the expand/collapse functionality for the 3 calendar links (Google, Apple and Other), 2 solutions were considered:
  • Using a checkbox input type with the aspect of a button.
  • Using list items inside a details summary tag.
• After few discussions and testing, a recommandation for creating a blob for the .ics file via the wb.download functionality from the existing action manager WET pluggin as been considered.
• In the CSS we have used display: inline-block instead of max-width: max-content since it’s working in both IE and FireFox
• According to the rfc5545, the following 3 parameters are mandatory:
  1. UID (This property specifies the persistent, globally unique identifier for the iCalendar object).
  2. PRODID (This property specifies the identifier for the product that created the iCalendar object).
  3. DTSTAMP (This property specifies the date and time that the information associated with the calendar component was last revised in the calendar store

  Ref: rfc5545 - 3.6, rfc5545 - 3.6.1)

1. Unique Identifier (UID)

Since it MUST be a globally unique in the “VEVENT” calendar component, we have decided to build it as follow: the page URL (path)-the event start date/time-last modified date of the page (mysitefolderpagehtml-20200428T140000-20200423T0830). From a security and privacy standpoint, using the host names, IP addresses, and domain names to construct the value is not recommended. Presently, the event information that will be provided are public information. However, we will think in the best approach to provide that UID in a more private manner. I’m presenlty looking at using hash functionality…more to come.

Ref:

• rfc5545 - 3.8.4.7
• rfc7986 - 5.3

2. Product Identifier (PRODID)

This property specifies the identifier for the product that created the iCalendar object. It represents the owner identifier which indicates the issuer (1st part) and the text identifier (2nd part) which indicates the particular document. The two parts are seperated by a double slash. Owner identifiers that are prefixed with “-//” indicate unregistered owners. Registered identifiers are prefixed with “+//”

The PRODID will be creates as follow: -//WET-BOEW//Add to Calendar v4.0//

Ref:

• rfc5545 - 3.7.3
• Formal Public Identifier (FPI) on Wikipedia
• iCalendar.org - 3.7.3. Product Identifier

3. Date-Time Stamp

We have decided to use the date last modified from the page/document to construct this value.

Ref:

• rfc5545 - 3.8.7.2

Wireframe and template

• Prototype 1 - Include 2 initial design patterns:
• Prototype 2 - created using details summary:
• Prototype 3 - cleaner script using JQuery:
• Prototype 4 - Latest version - new class “wb-addcal-location” / no “property location” element:

Prototype 4 Optimization

• Use append JQuery function in order to create content and insert it into several elements at once and to simplify the script
• Remove value “false” from variable “place” since the value is false by default.
• Building the event details string is in the switch case to avoid getting empty/undefined values
• Relocate following variables to change their scopefrom global to local scope: googleLink, icsLink, eventData, place
• Update variable “url” to something more meanful such as: “eventData”
• Thinking of removing the “Apple” selection and combine it with “Other” since they are provinding the same information and rename the option to something more generic and understandable by users: “Format iCal (ex: iPhone, Outlook…)”
• Removal of the schema decrlaration (vocab=”http://schema.org/”) since only one declaration is needed and it’s already declared in the body element.
• Removal of the 2 div and one section elements with class: container, row and col-md-12 since they are useless and unefficient
• Test multiple events on one page