Hey #Trailblazers,

In this blog post we will discuss how we can implement the Lightning Calendar in Lightning Web Component using Full Calendar V3 Library.

Full Calendar library has many features that we can use to display the event information. To read more about this Visit https://fullcalendar.io/

Now, let’s say that business wants to display the information about the events inside a particular record page, home page or app page and that have the ability to display the event information in a modal and can drag & drop the event.

So let’s start implementation.

Download the V3 Full calendar Js from https://fullcalendar.io/ and upload as static resource in Salesforce Environment.

Create a Lightning Web Component and use below code

Now, Create Apex Class and use below code. Apex Class is used to get the Event from the Salesforce Event object

You can find the full code here including static resource

https://github.com/amitastreait/full-calendar-js

Add your component inside any record page, home page or app page and see the demo

Thanks for reading 🙂

Sharing is caring 🙂 If you have any query please feel free to put down into the comment section.

#Salesforce #SFDCPanther #DeveloperGeeks

14 thoughts on “Full Calendar Js in Lightning Web Component”

  1. Love you brother!! After almost two weeks I landed onto this blog and finally I am able to load/see calendar. Thank you so much brother! 🙂

  2. I have implemented your blog and now I want to change that to resource timeline. Can you please tell me where I have to make changes and what changes should I make. Thanks

  3. Hi,
    I have downloaded and uploaded fullcalender 3.10.0 version ,uploaded in static resource and added the LWC and Apex class codes above, but resources are not accessible in the LWC, not sure why. could please let me know what could be the reason
    Failed to load resource: the server responded with a status of 404 (Not Found) -/resource/1602750041000/FullCalendarJS/jquery.min.js
    /resource/1602750041000/FullCalendarJS/moment.min.js
    /resource/1602750041000/FullCalendarJS/fullcalendar.min.css

  4. Thanks a lot buddy. This helped me a lot. I have previously implemented the Calender using Aura Component. If anyone wants that I can share the code.

    In Lwc one problem still I am facing is ex: in event click you are assigning the event to LWC @track variable selectedEvent. But that is not getting assigned.

    My requirement: I need to call LWC js methods on event click and eventResize. but when we use this.somelwcmethod, this will not work since this is being assumed as Calendar`s related.

    So I have created another module in js and made it to work. But I want to know how that conflict of this can be resolved.

  5. Hi Amit,
    Getting below error:
    FullCalendarJS/fullcalendar.min.css net::ERR_ABORTED 404 (Not Found)
    FullCalendarJS/theme.js 404 (Not Found)
    /FullCalendarJS/moment.min.js 404 (Not Found)
    /jquery.min.js 404 (Not Found)
    FullCalendarJS/fullcalendar.min.js 404 (Not Found)

Leave a Reply