Documentation
Display a feature-rich events calendar in your Experience Cloud site! Color-code events at the detail level, scope the date range of what events to show, filter events on who/what/owner Id...
Events Calendar for Experience Cloud
As of: Summer '23
Authored By: George Abboud
Last Updated: 07/20/2023
Table of Content
Description
Display a feature-rich events calendar in your Experience Cloud site! Color-code events at the detail level, scope the date range of what events to show, filter events on who/what/owner Id, configure timezones and offer users real-time event date/time conversion into their selected timezone, control what views to display, and much more!
Disclaimer:
This package is free to use, but is not an official salesforce.com product, and should be considered a community project. The functionality is not officially tested or documented, and does not come with any support, warrantees, or updates. It is offered as-is.
AppExchange Listing URL
https://appexchange.salesforce.com/appxListingDetail?listingId=a0N4V00000GXgLZUA1
Open-Source Code
https://github.com/salesforce-experiencecloud/EventsCalendar
Features
Select the number of months in the past and future, as well as the number of events to retrieve within that range.
Filter events on Related To (WhatId), Name (WhoId), and Assigned To (OwnerId).
Configure what timezones to display and their labels.
Control and display button links to your events (up to three including the detail page of the event).
Hide or display weekend days, and calendar views (Month, Week, Day, List).
Color-code your events and event series
Choose images and icons to display in the details of your event
Display the local timezone in the details of your event
LWR-Ready
Usage and Configuration
Create Events from Lightning Experience’s Calendar Tab
The Calendar for Experience Cloud component is based entirely on the native Salesforce Event/Activity object. From lightning experience, access the Calendar tab, and click “New Event” to start creating events for your calendar!
This app contains an Events object record type called “CC Calendar Event” and an accompanying page layout called “CC Calendar Event Layout”. Using these is optional, but highly recommended, since they do provide a good organization method to differentiate the events displayed in your site’s calendar vs other uses of the Event object in your org. The page layout also provides all the fields necessary to fully control the features provided by the calendar component.
Note: Ensure that the “Public” checkbox is visible on the page layout and the event detail page, as this checkbox is required to be checked for external users (authenticated and unauthenticated) to be able to view that event.
Configure Profile Access and Field-level Security
The profiles for users who need to be able to view the calendar from the site, will need to be configured with access to activities and Event fields. The profile permission “Access Activities” under “General User Permissions” will need to be checked.
Also, the profile must be configured with Read field-level security for all the fields on the Event object.
In addition to the above, you will need to grant access to this Apex Class “cccalendar.cccalendarController” for every profile that will be accessing this component and will need to render the calendar on an Experience Cloud page.
Configure Record Access / Sharing for Events
Events do not have their own sharing capabilities, they follow records that they are related to, like the “Related To“ lookup to any object/record or “Name” field which relates an Event to a Lead or a Contact. Assigning an event to a user also grants them access to the Event, if that works for your requirements.
Typically, we see the pattern of relating Events to a record via the “Related To” field to be the one that solves most of the use cases. So for example, I might have a custom object called Custom_Object__c and I might create a record in that Custom Object called “Calendar for Community Users”. Then I would related my Events to the “Calendar for Community Users” record, and share that record with my Community Users via sharing rules or sharing sets, or any sharing mechanism. As soon as my users have access to the “Calendar for Community Users” record, they will gain access to all Events related to that record.
Guest User / Unauthenticated Sites Configuration
If you want to use the calendar component to expose events to the public in an unauthenticated experience, you can basically follow the same configuration as outlined in the previous sections. Grant the Guest User profile access to the apex controller “cccalendar.cccalendarController”, and share the Custom Object record via Guest User Sharing Rules with your site’s Guest User. When the guest user of your site gains access to the Custom Object record that all Events are related to, they will also gain access to the Events.
Explanation of Event Custom Fields and Other Key Fields
Subject: Title of the event
Type: (Optional) If set, the type is prepended to the event subject as a title.
Public: For events to be visible to external users (both unauthenticated and authenticated), this checkbox needs to be checked on those events.
Event URL Text: (Optional) You can show up to three buttons on the event detail page/modal. The first is a link to the detail page of the event. The second and third are links defined in the event details. This field controls the text of second button.
Event URL: (Optional) You can show up to three buttons on the event detail page/modal. The first is a link to the detail page of the event. The second and third are links defined in the event details. This field controls the URL of second button.
Event URL Text 2: (Optional) You can show up to three buttons on the event detail page/modal. The first is a link to the detail page of the event. The second and third are links defined in the event details. This field controls the text of third button.
Event URL 2: (Optional) You can show up to three buttons on the event detail page/modal. The first is a link to the detail page of the event. The second and third are links defined in the event details. This field controls the URL of third button.
Image URL: (Optional) URL for the image to display in the event details component or modal.
Event Icon Name: (Optional) SLDS Icon name to display to the left of the event subject/title on the details component or modal.
Display Event's Local Timezone: If checked, the date/time of the event will be displayed in Local Timezone, under the title on the details component or modal.
Local Timezone: The local timezone to display under the event title if that option is checked.
Location: (Optional) Location of event is displayed on the details component or modal.
Calendar Text Color: The color of the title text of the event in the calendar component.
Calendar Background Color: The color of the background of the event title in the calendar component.
Calendar Rendering: Event rendering in calendar - leave set to Normal.
Calendar Border Color: Border color of the event title in the calendar component.
Calendar for Experience Cloud component for Experience Builder
Calendar for Experience Cloud Component Information
Component Label: Calendar for Experience Cloud
Component Aura API Name: cccalendar
Component LWC API Name: cccalendar
Component Namespace: cccalendar
Calendar for Experience Cloud Component Properties
Number of past months
Aura Property API Name: pastMonths
LWC Property API Name: past-months
Type: Integer
Description: (required) Set the number of months in the past to retrieve events for.
Number of future months
Aura Property API Name: pastMonths
LWC Property API Name: past-months
Type: Integer
Description: (required) Set the number of months in the past to retrieve events for.
Range Frequency
Aura Property API Name: rangeFrequency
LWC Property API Name: range-frequency
Type: String
Description: (required) Select the past/future range frequency (MONTH or DAY).
Max number of events to retrieve
Aura Property API Name: eventLimit
LWC Property API Name: event-limit
Type: Integer
Description: (required) Set the maximum number of events to retrieve.
What Id / Related To Filter
Aura Property API Name: whatId
LWC Property API Name: what-id
Type: String
Description: If set, the events will be filtered on the What Id / Related To field.
Who Id / Name Filter
Aura Property API Name: whoId
LWC Property API Name: who-id
Type: String
Description: If set, the events will be filtered on the Who Id / Name field.
Owner Id / Assigned To Filter
Aura Property API Name: ownerId
LWC Property API Name: owner-id
Type: String
Description: If set, the events will be filtered on the Owner Id / Assigned To field.
Timezone Labels JSON
Aura Property API Name: timezoneLabelsJSON
LWC Property API Name: timezone-labels-j-s-o-n
Type: String
Description: JSON String representing a map of labels of timezones. Example:
{"America/Los_Angeles":"US Pacific Time","America/Chicago":"US Central Time","America/Denver":"US Mountain Time","America/Indianapolis":"US Eastern Time","GMT":"GMT","Asia/Jakarta":"Western Indonesian Time","Asia/Makassar":"Central Indonesian Time","Asia/Jayapura":"Eastern Indonesian Time","Asia/Kolkata":"India Standard Time","Asia/Tokyo":"Japan Time","Australia/Sydney":"Australian Eastern Standard Time","Australia/Darwin":"Australian Central Standard Time","Australia/Perth":"Australian Western Standard Time","Europe/London":"British Time","Europe/Paris":"Central European Time"}
Override List of Timezones
Aura Property API Name: overrideTimezoneList
LWC Property API Name: override-timezone-list
Type: Boolean
Description: If set, supply a comma separated list of timezone values in the next property to override the timezone list with.
List of Timezones Override
Aura Property API Name: listofTimezonesOverride
LWC Property API Name: listof-timezone-overrides
Type: String
Description: If Override List of Timezones is checked, pass comma separated values of timezones to override with. Example: America/Los_Angeles,America/Chicago,America/Denver,America/Indianapolis,GMT,Europe/London,Europe/Paris,Asia/Jakarta,Asia/Makassar,Asia/Jayapura,Asia/Kolkata,Asia/Tokyo,Australia/Sydney,Australia/Darwin,Australia/Perth
Hide Event Detail Button
Aura Property API Name: hideEventDetailButton
LWC Property API Name: hide-event-detail-button
Type: Boolean
Description: Hide Event Detail (More Info) Button
Display Buttons at the Bottom
Aura Property API Name: buttonsOnBottom
LWC Property API Name: buttons-on-bottom
Type: Boolean
Description: Check to display the buttons at the bottom instead of above the content. Defaults to false.
Event Detail Button Text
Aura Property API Name: eventDetailButtonText
LWC Property API Name: event-detail-button-text
Type: String
Description: Text for the event detail button, defaults to 'More Info'.
Hide Timezone Picklist
Aura Property API Name: hideTimezonePicklist
LWC Property API Name: hide-timezone-picklist
Type: Boolean
Description: Hide the Timezone picklist. Timezone will default to user's browser settings
Show Weekends
Aura Property API Name: showWeekends
LWC Property API Name: show-weekends
Type: Boolean
Description: Show Saturday/Sunday weekend days.
Hide Month View
Aura Property API Name: hideMonthView
LWC Property API Name: hide-month-view
Type: Boolean
Description: Hide Month view on calendar.
Hide Week View
Aura Property API Name: hideWeekView
LWC Property API Name: hide-week-view
Type: Boolean
Description: Hide Week view on calendar.
Hide Day View
Aura Property API Name: hideDayView
LWC Property API Name: hide-day-view
Type: Boolean
Description: Hide Day view on calendar.
Hide List View
Aura Property API Name: hideListView
LWC Property API Name: hide-list-view
Type: Boolean
Description: Hide List view on calendar.
Truncate Event Title and Body Help
Aura Property API Name: truncate
LWC Property API Name: truncate
Type: Boolean
Description: Truncate Event Title and Body" description="Check to truncate event title and body (location and description).
Truncate Each Line Separately in Event Description
Aura Property API Name: truncateEachLine
LWC Property API Name: truncate-each-line
Type: Boolean
Description: Check to truncate each line separately within the event Description.
Number of Lines Shown Before Truncation
Aura Property API Name: truncateNumberOfLinesToDisplay
LWC Property API Name: truncate-number-of-lines-to-display
Type: Integer
Description: Specify the number of lines to display before truncation. Only takes effect when Truncate Each Line Separately in Event Description is false.
Calendar Event Details component for Experience Builder
Calendar Event Details Component Information
Component Label: Calendar Event Details for Experience Cloud
Component Aura API Name: cceventDetails
Component LWC API Name: ccevent-details
Component Namespace: cccalendar
Calendar Event Details Component Properties
Event Record Id
Aura Property API Name: recordId
LWC Property API Name: record-id
Type: String
Description: (required) Event record Id. Set to {!recordId} on the event detail page to dynamically pass the value in.
Hide Event Detail Button
Aura Property API Name: hideEventDetailButton
LWC Property API Name: hide-event-detail-button
Type: Boolean
Description: Hide Event Detail (More Info) Button
Event Detail Button Text
Aura Property API Name: eventDetailButtonText
LWC Property API Name: event-detail-button-text
Type: String
Description: Text for the event detail button, defaults to 'More Info'.
Hide Header Border
Aura Property API Name: noHeaderBorder
LWC Property API Name: no-header-border
Type: Boolean
Description: Hide the header border
Display Buttons at the Bottom
Aura Property API Name: buttonsOnBottom
LWC Property API Name: buttons-on-bottom
Type: Boolean
Description: Check to display the buttons at the bottom instead of above the content. Defaults to false.
Truncate Event Title and Body Help
Aura Property API Name: truncate
LWC Property API Name: truncate
Type: Boolean
Description: Check to truncate event title and body (location and description).
Truncate Each Line Separately in Event Description
Aura Property API Name: truncateEachLine
LWC Property API Name: truncate-each-line
Type: Boolean
Description: Check to truncate each line separately within the event Description.
Number of Lines Shown Before Truncation
Aura Property API Name: truncateNumberOfLinesToDisplay
LWC Property API Name: truncate-number-of-lines-to-display
Type: Boolean
Description: Specify the number of lines to display before truncation. Only takes effect when Truncate Each Line Separately in Event Description is false.
Calendar Upcoming Events component for Experience Builder
Calendar Upcoming Events Component Information
Component Label: Calendar Upcoming Events
Component Aura API Name: ccUpcomingEvents
Component LWC API Name: cc-upcoming-events
Component Namespace: cccalendar
Calendar Upcoming Events Component Properties
Max number of events to retrieve
Aura Property API Name: eventLimit
LWC Property API Name: event-limit
Type: Integer
Description: (required) Set the maximum number of events to retrieve.
What Id / Related To Filter
Aura Property API Name: whatId
LWC Property API Name: what-id
Type: String
Description: If set, the events will be filtered on the What Id / Related To field.
Who Id / Name Filter
Aura Property API Name: whoId
LWC Property API Name: who-id
Type: String
Description: If set, the events will be filtered on the Who Id / Name field.
Owner Id / Assigned To Filter
Aura Property API Name: ownerId
LWC Property API Name: owner-id
Type: String
Description: If set, the events will be filtered on the Owner Id / Assigned To field.
Event Detail Button Text
Aura Property API Name: eventDetailButtonText
LWC Property API Name: event-detail-button-text
Type: String
Description: Text for the event detail button, defaults to 'More Info'.
Timezone Labels JSON
Aura Property API Name: timezoneLabelsJSON
LWC Property API Name: timezone-labels-j-s-o-n
Type: String
Description: JSON String representing a map of labels of timezones. Example:
{"America/Los_Angeles":"US Pacific Time","America/Chicago":"US Central Time","America/Denver":"US Mountain Time","America/Indianapolis":"US Eastern Time","GMT":"GMT","Asia/Jakarta":"Western Indonesian Time","Asia/Makassar":"Central Indonesian Time","Asia/Jayapura":"Eastern Indonesian Time","Asia/Kolkata":"India Standard Time","Asia/Tokyo":"Japan Time","Australia/Sydney":"Australian Eastern Standard Time","Australia/Darwin":"Australian Central Standard Time","Australia/Perth":"Australian Western Standard Time","Europe/London":"British Time","Europe/Paris":"Central European Time"}
Hide Event Detail Button
Aura Property API Name: hideEventDetailButton
LWC Property API Name: hide-event-detail-button
Type: Boolean
Description: Hide Event Detail (More Info) Button
Display Buttons at the Bottom
Aura Property API Name: buttonsOnBottom
LWC Property API Name: buttons-on-bottom
Type: Boolean
Description: Check to display the buttons at the bottom instead of above the content. Defaults to false.
Truncate Event Title and Body Help
Aura Property API Name: truncate
LWC Property API Name: truncate
Type: Boolean
Description: Check to truncate event title and body (location and description).
Truncate Each Line Separately in Event Description
Aura Property API Name: truncateEachLine
LWC Property API Name: truncate-each-line
Type: Boolean
Description: Check to truncate each line separately within the event Description.
Number of Lines Shown Before Truncation
Aura Property API Name: truncateNumberOfLinesToDisplay
LWC Property API Name: truncate-number-of-lines-to-display
Type: Integer
Description: Specify the number of lines to display before truncation. Only takes effect when Truncate Each Line Separately in Event Description is false.
Screenshots
