This package contains a Lightning Web Component and other support to display, created, update, and delete Salesforce records of arbitrary Salesforce objects (SObjects) in a calendar.
This component implements a self-contained (no off-platform HTTP references) calendar application that can be used for displaying, creating, updating, and deleting Salesforce records of any arbitrary Salesforce object (SObject) in a variety of formats. The only requirement for the SObjects is that they must include DateTime fields that represent the start and end times of the calendar entries that are to be displayed.
The package uses the FullCalendar JavaScript library for all the heavy lifting but places a Salesforce Lightning interface on it for all of the controls.
This package contains language translations for English, French, German, and Spanish. You must enable Translation Workbench as well as those four languages in the org before you can install this package.
Read the disclaimer below and click on one of the Install the Package links. This will install all the components and other metadata to your Salesforce org. To avoid possible installation errors, pull down the "Advanced Options" twisty and select "Compile only the Apex in the package":
Once the package is installed, you will need to create a Lightning app, home, or record page with the Lightning App Builder (or an Experience Cloud page with Experience Builder) and drag the Lightning Enhanced Calendar custom component onto the page.
Finally, you must assign the Lightning Enhanced Calendar permission set to anyone who will be using the component to enable access to the Apex methods used by the component.
If you want to test the package in a new scratch org using the Salesforce Command-Line Interface (CLI), there is a script called scripts/CreateScratchOrg that can be run from the top-level directory that will create a new scratch org, install all of the components, create the testbed environment with a Lightning app page, generate random calendar entries, and assign all the required permission sets to the default user to make it all work. You must authorize a Dev Hub org before you can run this script. You must also have jq installed for this and the other scripts in the scripts folder to work. If you are lucky enough to develop on a Mac, I highly recommend using Homebrew for jq and many other pre-compiled open source utilities.
Once the component is dragged on the desired page in Lightning App Builder, it will be configured initially to display only records from the standard Salesforce Event object. The following configuration variables are exposed to the Lightning App Builder and Experience Builder:
- Card Title: The title on the Lightning Card (default: "Calendar")
- Default Calendar Duration: The duration (day, week, month, or year) that is loaded into the calendar when it first displays.
- Default Calendar Type: The type of view (calendar, list, or timeline) that is loaded into the calendar when it first displays.
- Objects: A JSON string containing an array of JSON objects describing the Salesforce objects to display (see below for details on the array and its JSON objects).
- Shade Weekends: Check this box to set the background color of Saturdays and Sundays to a light gray color.
- Show Week Numbers: Check this box to show week numbers in the calendar.
- License Key: The Lightning Enhanced Calendar LWC uses several premium plug-ins from FullCalendar which must be licensed if the FullCalendar library is used in a production environment. See the section on Licensing below for details and pointers.
Each JSON array in the Objects configuration string must look something like this:
[
{
"objectApiName": "Event",
"nameFieldApiName": "Description",
"startApiName": "StartDateTime",
"endApiName": "EndDateTime",
"color": "#3A87AD"
},
{
"objectApiName": "Race_Track__c",
"customLabel": "Race Track Alpha",
"startApiName": "Start_Time__c",
"endApiName": "End_Time__c",
"filter": "Name = 'Alpha'",
"color": "#6A9955"
},
{
"objectApiName": "Race_Track__c",
"customLabel": "Race Track Bravo",
"startApiName": "Start_Time__c",
"endApiName": "End_Time__c",
"filter": "Name = 'Bravo'",
"color": "#BA0517"
}
]Each object has the following keys:
- objectApiName: (mandatory) The API name of the SObject whose records are to be displayed.
- customLabel: (optional) A label for the SObject whose records are to be displayed. If not specified, it defaults to the label of the SObject specified by objectApiName. This is useful, for example, if the same SObject is specified in multiple JSON object entries in the JSON string but with different filters (see below).
- nameFieldApiName: (optional) The API name of the field to use for the name of the record displayed in each calendar entry. If omitted, this will default to the name field of the object.
- startApiName: (mandatory) The API name of the
DateTimefield representing the start date and time of the record to be displayed. - endApiName: (mandatory) The API name of the
DateTimefield representing the end date and time of the record to be displayed. - filter: (optional) A Salesforce SOQL WHERE clause expression specifying which records of the given SObject to return. If the component is on a Lightning Record Page, you may use
:recordIdin the expression to reference the record Id of the page being displayed. This can be useful to restrict calendar entries to those directly related to the displayed record, for example:"filter": "StartTime__c > 2005-01-01T01:01:00Z AND OwnerId = :recordId" - color: (optional) A CSS-compatible color representation of the records of this SObject in the display.
IMPORTANT: Each key and each value in the Objects string MUST be surrounded by double-quotes (").
I hope that once the component is configured properly in Lightning App Builder, using it will be fairly intuitive.
To view details of a calendar entry, simply click on the entry in the calendar. You will see the title and the start and end dates for that entry. To see all of the fields in the calendar entry, click on the "Go to Calendar Entry" button and you will be taken to a new tab showing all of the details of that entry.
You can create a new calendar entry by clicking the "New" button in the Lightning Card's action panel or by simply dragging open an area on the calendar itself. Once you do, you will be presented with a modal with a pull-down containing the names of all of the objects you specified in the Objects JSON string in the App Builder configuration panel. Once you select an SObject, the modal will show a form allowing you to fill in the title and start and end times of the new entry. If you dragged out an area on the calendar itself, it will automatically show you the start and end times:
Once you fill out the form and click "Save", the new calendar entry will be displayed on the calendar and the new record will be inserted into the Salesforce database.
To update an existing calendar entry, simply grab the entry on the calendar and drag it to where you wish it to go. A modal will pop up showing the new date and time values, which you can further manipulate if you desire.
To delete a calendar entry, simply click on the entry to bring up an information dialog. Click on the "Delete" button and, after a confirmation message, the calendar entry and corresponding Salesforce record will be removed.
The component includes display labels and toast messages for English, Spanish, French, and German. Google Translate can only get me so far, though, so if you find any corrections or if you wish to help me include additional language translations, please have a look at the translation metadata and send me updates.
I have included an additional component that will intercept and display calendar entry update and deletion events from Lightning Enhanced Calendar using Lightning Dynamic Interactions. At the time of this writing, however, these are only available in Lightning App pages. The component is there to (1) demonstrate how a component can be written and configured in Lightning App Builder to respond to calendar update events from Lightning Enhanced Calendar and (2) help me test the main LWC code.
If you create a scratch org testbed environment using the included CreateScratchOrg script, the Lightning Enhanced Calendar app page will be set up with this component already properly configured and a separate permission set, Lightning Enhanced Calendar Tester, that grants access to the page and custom tab, assigned to the default user. Note that this component will only be installed in a scratch org using this script and is not included in the installable Salesforce package.
- The FullCalendar library version used by this package is 4.3.1, the most recent of the 4.x generation, which is (according to several Internet posts at the time of this writing) the last version that works and plays well with the Salesforce Lightning Web Components framework. One day if I have time before I retire, I may try to get things working with a more recent version, but it's not high on my priority list and 4.3.1 does everything I need it to.
- Although the FullCalendar library can handle all-day and repeating events, the LWC does not provide any interface for managing them.
- The calendar may not display on first load even though no errors are displayed. I believe this is due to a race condition somewhere in loading the FullCalendar JavaScript libraries, but have not been able to locate the problem. A page refresh (or two) usually fixes the problem.
- Creating a new calendar entry will take you to the standard New Action page in another tab rather than a clean modal in the component. This is so that all required fields can be entered appropriately. I could have tried to gather up the required fields and rendered them in a custom modal inside the component, but that's getting to be quite a lot of work. The upshot is that since it will take you to a standard new tab, there's no easy way to alert the calendar component that the record has been inserted and you will have to go back to the original page and refresh it.
- The component will not install: You must have Translation Workbench enabled in the target org with English, German, French, and Spanish activated. If you are getting other errors, try pulling down the "Advanced Options" twisty on the Salesforce installer page and select "Compile only the Apex in the package".
- The component does not display on the page: If a page refresh (or two) does not fix the problem, make sure you have assigned the
Lightning Enhanced Calendarpermission set to the current user. - The component is complaining that my Objects configuration variable is corrupt: There are several possible reasons for this.
- The string is a badly-formed JSON array of objects. The keys must be entered exactly as shown (upper- and lower-case is important). Keys and values must be surrounded by double-quotes("). Also, the string must represent an array, even if there is only one object to display.
- One of the object API names is incorrect (the error message should tell you which one).
- One of the field API names is incorrect or of the wrong type (the error message should tell you which one). The
startApiNameandendApiNamefields must beDateTimes and the optionalnameFieldApiNamemust be text.
- The component displays, but the records from one or more of the objects is not showing: Have a VERY careful look at the JSON string and make sure that the API names are absolutely correct.
- When I try to create a new Salesforce Event record by dragging, the start and end dates show the current date and time: This is a quirk of the Create action for the standard Salesforce
Eventobject. Custom objects don't seem to exhibit this behavior. - I'm getting an error about too many objects: The component does a SOQL query for each of the objects you specify in the
Objectsconfiguration string. Salesforce governor limits limit the number of SOQL queries in a single synchronous transaction to 100, so you may not try to show records from more than 100 objects. You probably will never see this message, but you never know. - I'm getting an error about too many items: Salesforce governor limits limit the number of total rows returned in a single transaction to 50,000. If you have more than 50,000 records in all of the objects in the
Objectsconfiguration string, you will see this message. Hopefully, you will not try to show your users more than this many records on a single component. Try to pare down some of them with filters.
All of the Salesforce code and metadata in this repository are licensed under the GPL open source license. You may freely copy, use, and modify the code and do whatever you want with it, as long as you don't expect to get any support from Salesforce or me. Use and installation of the components are completely at your own risk. Please see the Caveats section above before you deploy it into any production environments.
The FullCalendar and Moment libraries contained in the static resource, however, are licensed differently. Unless you are using it with an open source project (as I am), you must license the code from FullCalendar. This package makes use of several premium plug-ins. Please see FullCalendar's licensing page for details.
I am a pre-sales Solutions Engineer for Salesforce and I develop solutions for my customers to demonstrate the capabilities of the amazing Salesforce platform. This package represents functionality that I have used for demonstration purposes and the content herein is definitely not ready for actual production use; specifically, it has not been tested extensively nor has it been written with security and access controls in mind. By installing this package, you assume all risk for any consequences and agree not to hold me or my company liable. If you are OK with that ...
Install the Package in Production
Install the Package in a Sandbox
John Meyer, Salesforce Solution Engineer
Current Version: 1.0.8
- Mark Lott's Component: thanks to Mark for finding and making the minor tweak necessary in the
main.jsfile to make the FullCalendar library work with the Lightning Web component framework. - Year View: I never could get this to work with Lightning, but I find it intriguing nonetheless.
- AuraEnabled: inspiration