Calendar

This guide will help you add events to the user's calendar using .ics files and embedded calendar links. This feature is particularly useful for client service and shift scheduling apps. The Calendar add-on provides a built-in UI that displays event details and a button for users to add the event to their calendar.

Adding Events using .ics Files

Step-by-Step Instructions

1. Host the .ics File: Ensure that the .ics file containing the event details is hosted on your website. An .ics file is a standard format for calendar files that can be imported into most calendar applications.

2. Link to the .ics File: Provide a link to the .ics file on your website. When the user clicks this link, their device will automatically detect the .ics file and prompt them to add the event to their calendar.

Here's an example of how to link to an .ics file:

<a href="https://www.yourwebsite.com/event.ics">
   Add Event
</a>

Creating an .ics File

An .ics file contains event details in a standard format. Below is an example of the contents of an .ics file:

BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
URL:https://www.webtonative.com/
DTSTART:20251210T120000
DTEND:20251210T122500
SUMMARY:Webtonative Event
DESCRIPTION:Webtonative Party
END:VEVENT
END:VCALENDAR

Adding Events using Embedded Calendar Links

Step-by-Step Instructions

1. Embed the .ics Calendar Invitation: Use an HTML link to embed the calendar invitation directly into your webpage. When the user clicks this link, it will prompt them to add the event to their calendar.

Here's an example of an embedded calendar link:

<a href="data:text/calendar;charset=utf-8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:https://www.webtonative.com/%0ADTSTART:20251210T120000%0ADTEND:20251210T122500%0ASUMMARY:Webtonative%20Event%0ADESCRIPTION:Webtonative%20Party%0AEND:VEVENT%0AEND:VCALENDAR">
   Add Event
</a>

Explanation of the Calendar Link

• BEGIN:VCALENDAR and END:VCALENDAR: Marks the beginning and end of the calendar file.
• VERSION:2.0: Specifies the version of the iCalendar standard.
• BEGIN:VEVENT and END:VEVENT: Marks the beginning and end of an event.
• URL: URL associated with the event.
• DTSTART: Start date and time of the event in the format YYYYMMDDTHHMMSS.
• DTEND: End date and time of the event in the format YYYYMMDDTHHMMSS.
• SUMMARY: A brief summary of the event.
• DESCRIPTION: A detailed description of the event.

Summary

By following these steps, you can easily add events to a user's calendar using .ics files and embedded calendar links. This feature enhances user experience by allowing them to seamlessly add events from your website to their personal calendars. If you encounter any issues, refer to the documentation or support resources for additional assistance.