Add to calendar

Questions or comments?

Unstable feature

To be used at your own risk. This feature described below can be removed in any subsequent minor/major release

Learn more about the design decision around provisional features.

Check other provisional features available.

Purpose

Add an event to a calendar (Google, Apple, Android, Outlook and others).

Working example

Evaluation and report

API (Version 1.0)

Function
Provisional
Configuration
Not applicable
User interface (Template)
Provisional
Data source
Provisional
View and style
Provisional
i18n string
Provisional

Function

(Version 1.0)

Function type Name How to implement What it does
jQuery Event wb-init.wb-addcal Triggered manually (e.g., $( ".wb-addcal" ).trigger( "wb-init.wb-addcal" );). Initializes the .wb-addcal plugin. This plugin will be initialized automatically unless the .wb-addcal element is added after the page load and wet-boew was initialized.
jQuery Event wb-ready.wb-addcal Triggered automatically after the plugin initializes. Used to identify when and where the plugin initializes (target of the event). 
$( document ).on( "wb-ready.wb-addcal", ".wb-addcal", function( event ) {
});
$elm.on( "wb-ready.wb-addcal", function( event ) {
});

Configuration

Not applicable for this plugin.

User interface (Template)

(Provisional)

The Schema.org Event type noted in RDFa is required when implementing this add to calendar widget. It identifies an event happeing at a certain time and location. The followings are Schema.org types and properties:

name (Event)
Required - Short text that defines the event title.
description (Event)
Optional - Short text that provides a brief description of the event.
startDate (Event)
Required - Specifies the start date and or start time of the event. It needs to be used in a <time> element and the value must be defined in text or by adding the datetime attribute either following this pattern: "YYYY-MM-DD HH:MMZ"
endDate (Event)
Required - Specifies the end date and or end time of the event. It needs to be used in a <time> element and the value must be defined in text or by adding the datetime attribute either following this pattern: "YYYY-MM-DD HH:MMZ"
location (Event)
Recommended - Short text that identifies the place of the event or can be refined with type Place to provide a detailed address or VirtualLocation for an online event.
name (Place)
Optional - Short text that identifies the name of a location for the event.
address (Place)
Optional - Short text that identifies the address or can be refined with PostalAddress to initiate a detailed location.
streetAddress (PostalAddress)
Optional - Text that identifies the street address.
addressLocality (PostalAddress)
Optional - Text that specifies the locatily (city).
addressRegion (PostalAddress)
Optional - Text that specifies the region (province) of the event.
postalCode (PostalAddress)
Optional - Text that specifies the postal code.
url (VirtualLocation)
Optional - URL of the online event.

The HTML element time must be used when specifying a date and or time in machine readable format or when adding the datetime attribute when using text. The following ISO date pattern noted in RDFa must be applied when using the machine readable format in the time element or as a value for the datetime attribute: "YYYY-MM-DD HH:MMZ".

The propery "datemodified" must be present in the web page.

View and style

Add to calendar details/summary uses the .max-content utility class, which limits the width of the element to the width of its largest content inside.

Source code

Add to Calendar source code on GitHub

Date modified: