Embedded calendar invites for events

Embedding calendar invites directly into your Power Pages portal enhances user engagement and convenience. It allows visitors to quickly add events like webinars, training sessions, appointments, or product launches to their personal calendars (Google, Outlook, iCal, etc.) with a single click.

Here’s a complete step-by-step guide to implementing embedded calendar invites in Power Pages:

Step 1: Define Event Details

Determine what event data needs to be included:

Event Title
Description
Start and End DateTime
Location (online or physical)
Time Zone
Event Host Name and Contact
Event URL (for joining or learning more)

You can store these in Dataverse, SharePoint, or directly in Liquid/JavaScript if dynamic loading isn’t required.

Step 2: Generate Calendar Invite Links

You’ll offer three main types of calendar links:

A. Google Calendar URL

<a href="https://www.google.com/calendar/render?action=TEMPLATE&text=EVENT_TITLE&dates=START_TIME/END_TIME&details=EVENT_DESCRIPTION&location=EVENT_LOCATION&sf=true&output=xml" target="_blank">
  Add to Google Calendar
</a>

START_TIME/END_TIME format: YYYYMMDDTHHmmssZ/ (UTC time format)
Replace spaces and special characters using encodeURIComponent()

B. Outlook (Web) Calendar URL

<a href="https://outlook.office.com/calendar/0/deeplink/compose?subject=EVENT_TITLE&body=EVENT_DESCRIPTION&startdt=START_TIME&enddt=END_TIME&location=EVENT_LOCATION" target="_blank">
  Add to Outlook Calendar
</a>

C. iCal (.ics) File Download

Create an .ics file and make it downloadable.

Example .ics content:

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Your Company//NONSGML Event//EN
BEGIN:VEVENT
UID:{{ unique_id }}
DTSTAMP:{{ current_utc_time }}
DTSTART:{{ event_start_time }}
DTEND:{{ event_end_time }}
SUMMARY:{{ event_title }}
DESCRIPTION:{{ event_description }}
LOCATION:{{ event_location }}
END:VEVENT
END:VCALENDAR

Generate this .ics file dynamically using a custom Liquid script or generate and store it ahead of time in Azure Blob or SharePoint and use a download link like:

<a href="/custom_files/event123.ics" download>Add to iCal</a>

Step 3: Render Links in Power Pages

You can use Liquid templates to render buttons dynamically based on event data stored in Dataverse or SharePoint.

<a href="{{ event.google_calendar_url }}" target="_blank">Add to Google Calendar</a>
<a href="{{ event.outlook_calendar_url }}" target="_blank">Add to Outlook</a>
<a href="{{ event.ics_file_url }}" download>Add to iCal</a>

Or embed buttons using HTML/JavaScript for better styling.

Step 4: Use JavaScript for Dynamic Date Formatting

If the date/time is fetched from a dynamic source, use JavaScript to generate and encode URLs correctly.

function formatToCalendarLink(title, start, end, location, description) {
  let googleUrl = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&dates=${start}/${end}&details=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}`;
  return googleUrl;
}

Bind it to a button click using DOM events or framework logic.

Step 5: Mobile-Friendly Design

Ensure calendar buttons:

Are easily clickable
Use responsive design for mobile views
Open in new tabs to prevent portal interruption

Use button styles with target="_blank" and rel="noopener" for security.

Step 6: Automate with Power Automate (Optional)

Use Power Automate to:

Auto-generate .ics files when a new event is created
Store them in Blob Storage or SharePoint
Send email confirmations with calendar links included

Step 7: Security & Expiration

If you’re embedding links for private events:

Use access tokens or expiring URLs for links
Validate against the logged-in user’s session
Disable links after event ends

Example Use Case: Webinar Registration Confirmation

User registers via the portal
Power Automate sends them an email with embedded calendar buttons
User adds the event to their calendar instantly

Benefits

Seamless user experience
Boosts event attendance
Avoids no-shows through calendar reminders
Works across Google, Outlook, Apple
Low-code, customizable solution