Create Custom Calendar Using Lightning Web Components in Salesforce

In Salesforce, we need a calendar to manage events, meetings, deadlines, and tasks directly within the platform. Instead of switching between external tools like Google Calendar or Outlook, users can track everything in one place using a custom reusable LWC calender, where it can be deployed on any lightning page.

The most efficient way to create an LWC calendar is by using the FullCalendar Js library. Let’s see how to create a custom calendar using the Lightning web component in Salesforce.

Create a Custom Calendar Using Lightning Web Components

We will create a custom reusable calendar using the FullCalendar Js library. For that, we will first download the FullCalndar library as a static resource.

Download the zip file from the FullCalendar JS library from the link https://fullcalendar.io/docs/v5/initialize-globals.

In this, I have downloaded version 5 of the JS library, and it was throwing an error while rendering the component. Even though by defining the right path, FullCalender zipped > library files, I was getting the below error:

To avoid this error after implementation, extract the zipped folder and open the lib file.

In the main.js file, you see the code:

var FullCalendar = (function (exports) {

Replace this code with the code block below:

function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ?
factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.FullCalendar = {}));
}(this, function (exports) {

Now, save the changes in the main.js file. After this, compress the lib file as separate zipped folder as name it as FullCalendar.

To use this library in the LWC, create a static resource in Salesforce following the steps below.

1. Navigate to the setup page and search, then select Static Resource from the quick find.

2. In the Static resource setup, create a new static resource and name it as FullCalendar, then upload the zipped folder FullCalendarJs.

Ensure to set the Cache Control to Public, then click on the Save button.

With the static resource uploaded, we will now refer to this JS library in the Lightning Web Component to add the calendar.

3. Create the LWC component customCalendar and enter the code below in the HTML file.