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
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! 🙂
Hi, can you please post Resources and Events – Fullcalendar scheduler – https://fullcalendar.io/docs/timeline-custom-view-demo in Salesforce Lightning(not in LWC) ? Or you can guide me how to do that in salesforce lightning ?
When you say Salesforce Lightning(not in LWC), What are you referring to?
Hi,
Thanks for the wonderful blog 🙂
can you please help me with implementing this or post a blog on it
https://fullcalendar.io/docs/timeline-custom-view-demo
TIA 🙂
Hi,
I have checked the link that you have mentioned and can see the codepen code for the same. Are you facing any problem?
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
You need to read the document of full calendar and then make the changes accordingly.