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/
Features
- Show the Events in Monthly, Daily, and Weekly view
- Show the Event Details when clicked on Event Title
- Show the Created Record wizard when user clicks on any day area
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
Output when clicked on event title
Output when clicked on any day
Thanks for reading 🙂
Sharing is caring 🙂 If you have any query please feel free to put down into the comment section.
#Salesforce #SFDCPanther #DeveloperGeeks
38 comments
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! 🙂
I have task and event both need to show on calender but task is appearing before Event while i want Event to come before Task do any one know is it standard behaviour
I have no idea on this part.
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.
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
Try with the static resource that I have provided into the Repo.
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.
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)
Hey,
Please check if you have the static resource in place if not then use the same as I have given in Repo.
Hi Amit,
Will this work in mobile ? Can we create events from mobile to calendar part?
Hi Sundar,
I have not tried this but you can give this a try.
Hi,
This works great! But, how can I put in a different theme for the calendar that is more updated looking.
Thanks!
Hi Jay,
Thanks!
Try to check the Full Calendar API for the theme and then try the same in the code.
I am still getting Errors… I put everything repo you provided into static resources
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)
You have to deploy all the components to Salesforce before running the code.
Hi, My calendar is working but I am very stuck. I want to use NavigationMixin on the eventclick to navigate to record page. I can make this work outside the calendar, but inside it always comes up as function undefined. How can I call a function within eventclick that uses NaviagtionMixin? Thanks for your help! This one is killing me…. I cannot seem to reference any function as “this” does not seem to reference my class.
You can use the below code as this will not work inside that method.
let url = 'https://'+location.host+'/'+event.id;
var eventRecord = window.open(url, "eventRecord");
eventRecord.location.reload(true);
Thank you, this worked!
Is there any blog or post the same thing can be implemented in lightning component?
There must be many blogs. All you need to do is search for the same.
StackExchange
BlogPost
Hi Amit,
I have done as you mentioned but it is not working. The root files are missing from the Zip folder and i am getting the following errors. I would be grateful if you can share those files to my email id.
fullCalendarJs.js:4 Object
eval @ fullCalendarJs.js:4
/resource/1608632982000/FullCalendarJS/jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/resource/1608632982000/FullCalendarJS/theme.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/resource/1608632982000/FullCalendarJS/moment.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
/resource/1608632982000/FullCalendarJS/fullcalendar.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fullcalendar.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Thank you Gaurav!
Here is the link from where you can get all the fiels
FullCalendar JS
Hi Amit,
I was facing same issue, resource 404 not found, ended up uploading all files individually.
But would like to know why facing problem with the zip file. tried with namespace as well but no luck.
Steps I took:
-Created all 6 files in local from your drive, copy pasted
-Moved all files in a new folder, renamed and zipped it
-Uploaded in static resource, rechecked the label and use it in LWC js file.
Thanks for awesome work
Thank You 🙂
A note for everyone here, just failed security review due to the jquery version that Calendar 3.10 uses. Hope I can save you some time, you need to go to a higher version, and that plays nowhere near as nice with LWC.
Just a heads up, if you are building this for app exchange you will probably need v4 or v5. I have been using this for a number of years and my latest package was bounced from security review due to vulnerabilities in v3 and the jquery version it uses. Would love to see this updated to v4 or if you are up for a serious challenge v5. I have been banging my head against that all morning and it looks like a lot of people are struggling with it.
Thanks for the update.
Got this all setup on my org without an issue. Just one thing that I cannot get working is the event click to show the modal pop up. I have the this.selectedEvent = event but the modal never shows. I printed out the track values but those never seem to change either. Have you seen any issues with this or any idea on how to solve this? Thats my only roadblock so far. Thanks!
Hi John,
I am also trying the same but not able to make it to work. I believe there is something wrong and I am still trying to figure this out.
Any luck on this yet and thanks again for the awesome work!
Unfortunately I was not able to look into this due to some health issue.
Hi John & NK,
Please find the latest code which include the Modal Popup and the Created Record as well when user click on any day.
Here is the Link for the same – https://github.com/amitastreait/full-calendar-js/tree/master/latest
[…] displays all the Tasks for the Logged In Users in the form of a Calendar. You can take help from This Blog Post. And Add this Component to Home Page. Also, Give the Ability to Select the Project as […]