# Add to calendar

Turn event details into Google Calendar and Outlook links, plus an .ics download for Apple Calendar and other calendar apps. Dates carry an explicit time-zone offset.

Version: 1.0.0
Page: https://tools.stuffonscreen.com/add-to-calendar
Script: https://tools.stuffonscreen.com/widgets/v1.0.0/add-to-calendar.js
Integrity: sha384-jwbTUlT+OEf3Kpdwe7MusIqoYieAQBeJ8euGBztNEQpHBBU9P1q8lEBIK15YsLpS
Self-host ZIP: https://tools.stuffonscreen.com/widgets/v1.0.0/add-to-calendar.zip
Licence: https://tools.stuffonscreen.com/licence

## Install

```html
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/add-to-calendar.js" defer></script>
<sos-add-to-calendar data-config="{&quot;title&quot;:&quot;Studio open day&quot;,&quot;start&quot;:&quot;2027-05-14T09:00:00+08:00&quot;,&quot;end&quot;:&quot;2027-05-14T11:00:00+08:00&quot;,&quot;location&quot;:&quot;Corner Studio, Perth&quot;,&quot;description&quot;:&quot;Drop in, meet the team and see what we’re working on.&quot;}"></sos-add-to-calendar>
```

Keep the built-in visible credit (nofollow is allowed). The licence does not require a credit on exported files. Include scripts once per page.

## Configuration

The data-config attribute is a JSON object containing string values. When writing HTML, escape the JSON as an HTML attribute. Do not interpolate raw untrusted text. When creating an element in JavaScript, use element.setAttribute('data-config', JSON.stringify(config)).

- title: Event title. 
- start: Start date and time. ISO date with time-zone offset, e.g. 2027-05-14T09:00:00+08:00.
- end: End date and time. Include the offset for this date. +08:00 is Perth; Z is UTC.
- location: Location or meeting URL. 
- description: Description. 

Default configuration:

```json
{
  "title": "Studio open day",
  "start": "2027-05-14T09:00:00+08:00",
  "end": "2027-05-14T11:00:00+08:00",
  "location": "Corner Studio, Perth",
  "description": "Drop in, meet the team and see what we’re working on."
}
```

## Behaviour and limits

- Use the correct UTC offset for each event date, including daylight saving where applicable. The visitor’s calendar converts the event to their time zone.
- This version supports single timed events. Recurring and all-day events are not supported.
- Calendar links open a draft for the visitor to save. They do not send invitations or subscribe anyone to a calendar.
- Invalid configurations show an error instead of a partial result. Updating data-config rerenders the component.
- Styling is isolated with Shadow DOM. There are no tracking cookies, paid API calls or remote configuration requests.
- Browser JavaScript is required. Essential business/event information should also be in normal HTML for indexing and no-JS users.

Framework/CSP instructions: https://tools.stuffonscreen.com/docs/implementation.md