"Add to Outlook" option for individual events in SPO site

Question

We have an Events/Calendar list in SPO site.

The user wanted an option to add individual events to their Outlook calendar(not the entire Event list)

That is each event should have a column called "Add to Outlook" clicking on which that particular event/item should be added to the users' outlook calendar.

This way, the users can add only the events/items they are interested in to their outlook calendar.

Answer 1

In the classic view, there is a button in the ribbon under Custom Commands that will download an ICS file for a specific event:

In a modern view, this is gone. But you can still generate the link in the same way. The link is in the format:

[WebURL]/_vti_bin/owssvr.dll?CS=109&&Cmd=Display&List={[ListGUID]}&CacheControl=1&ID=[EventListItemID]&Using=event.ics

You can create that link in a variety of ways but here's an example using column formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "iconName": "AddEvent",
    "class": "ms-fontSize-xxl ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover",
    "title": "Add to my calendar",
    "href": "=@currentWeb + '/_vti_bin/owssvr.dll?CS=109&Cmd=Display&List={0544b2e4-0101-4c19-ac53-b7839c91b025}&CacheControl=1&ID=' + [$ID] + '&Using=event.ics'"
  },
  "style": {
    "cursor": "pointer",
    "text-decoration": "none"
  }
}

Unfortunately, we don't have access to the List GUID in list formatting, so that bit is hardcoded.