How To Create A Custom Calendar In Salesforce

Anonymous August 23, 2020 - 3:48 PM

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! 🙂

chandan January 15, 2021 - 3:05 AM

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

bhaskar August 6, 2021 - 12:03 PM

In this full calendar code you have written.. How to optimize the calendar view based on browser decrease and increase the screens or How to show the full calendar for desktop, tablet,ipad ? let me know how can I do

SFDC Panther August 10, 2021 - 10:54 AM

You can use either lightning layout or you can use media screen css

Rajdev Parth Dineshkumar August 23, 2020 - 6:20 PM

SFDC Panther August 24, 2020 - 3:26 AM

When you say Salesforce Lightning(not in LWC), What are you referring to?

Arsi August 31, 2020 - 5:37 AM

SFDC Panther August 31, 2020 - 5:40 AM

Hi,

I have checked the link that you have mentioned and can see the codepen code for the same. Are you facing any problem?

Arsi August 31, 2020 - 6:35 AM

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

SFDC Panther September 1, 2020 - 4:52 AM

You need to read the document of full calendar and then make the changes accordingly.

Karthi Xavi October 15, 2020 - 8:37 AM

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

SFDC Panther October 16, 2020 - 8:51 AM

Try with the static resource that I have provided into the Repo.

Rajkiran Thummepalli October 18, 2020 - 4:06 AM

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.

Anu November 2, 2020 - 11:30 AM

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)

SFDC Panther November 7, 2020 - 1:39 PM

Hey,

Please check if you have the static resource in place if not then use the same as I have given in Repo.

Sundar November 18, 2020 - 5:27 AM

Hi Amit,

Will this work in mobile ? Can we create events from mobile to calendar part?

SFDC Panther November 22, 2020 - 6:23 AM

Hi Sundar,

I have not tried this but you can give this a try.

Jay Stahlman December 13, 2020 - 10:20 PM

Hi,

This works great! But, how can I put in a different theme for the calendar that is more updated looking.

Thanks!

SFDC Panther December 14, 2020 - 5:13 AM

Hi Jay,

Thanks!

Try to check the Full Calendar API for the theme and then try the same in the code.

Monet December 15, 2020 - 12:40 AM

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)

SFDC Panther December 15, 2020 - 6:15 AM

You have to deploy all the components to Salesforce before running the code.

Jay Stahlman December 16, 2020 - 3:17 PM

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.

SFDC Panther December 17, 2020 - 5:30 AM

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);

Jay Stahlman December 21, 2020 - 1:19 PM

monicaa December 21, 2020 - 12:11 PM

Is there any blog or post the same thing can be implemented in lightning component?

Gaurav Singh December 22, 2020 - 10:59 AM

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!

Sunny Singh December 27, 2020 - 2:12 PM

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

Anonymous December 26, 2020 - 2:55 AM

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.

Hugh December 26, 2020 - 4:02 AM

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.

John Pernock March 5, 2021 - 5:59 PM

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!

SFDC Panther March 17, 2021 - 8:15 AM

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.

NK March 30, 2021 - 3:34 PM

Any luck on this yet and thanks again for the awesome work!

SFDC Panther April 1, 2021 - 11:24 AM

Unfortunately I was not able to look into this due to some health issue.

Anonymous April 22, 2021 - 10:09 AM

Win #SFDCPanther swags 15K Special – SFDCPanther May 22, 2021 - 8:47 AM

[…] 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 […]

Kalpesh Gohil July 13, 2021 - 8:03 AM

Hi Amit

It's working fine for me but I wnat to display Holidays in different color.

is there any way to display holiday in different colors?

Thanks In Advanced!

SFDC Panther July 14, 2021 - 8:43 AM

If you see the full calendar document you will find there is an attribute to define the colours

Dhanush July 29, 2021 - 10:51 AM

Hi
am getting an error like this
'Invalid reference FullCalendarJS of type resourceUrl in file fullCalendarJs.js'

SFDC Panther July 29, 2021 - 10:58 AM

You have not uploaded the static resource to Salesforce.

Dhanush August 3, 2021 - 1:17 PM

No i have already uploaded the static Resource with the name as FullCalendarJS and still getting the same error.

SFDC Panther August 6, 2021 - 8:25 AM

You can check below comments by a blog reader

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.

Thanks for awesome work

Chethan Sabbani July 29, 2021 - 1:06 PM

Hello Amit Sir ,
Can you please guide us how to use moment timezone plugin in the lwc since we wanted to show according to the timezone as per the logged in user and if I am using the below link reference it is showing us the below error
TypeError: t.createPlugin is not a function
from the following main.global.min.js

The link which I am using as a reference for Moment time zone is below
https://fullcalendar.io/docs/moment-timezone-plugin

SFDC Panther July 30, 2021 - 6:04 AM

You have a timezone field where you can provide the timezone like below – timeZone: 'America/New_York'

Ayush August 5, 2021 - 6:22 AM

Hi, I followed all the steps, unfortunatly my LWC is only showung All Calender word. Except that no calender is showing, may I know how can I fix that?

SFDC Panther August 5, 2021 - 1:09 PM

You need to check if there is any error in the javascript.

Amit Jadhav August 31, 2021 - 6:19 AM

Hello Amit

After clicked on event title pop up modal not open.

Parveen kumar September 2, 2021 - 9:08 AM

Parveen kumar September 3, 2021 - 11:02 AM

Parveen kumar September 7, 2021 - 12:58 PM

Thanks a lot Amit. The issue is resolved. But when we click on the calendar then a pop should opened so that we can create the events. So will it be feasible in it?

Parveen Kumar September 7, 2021 - 2:02 PM

No I have tried the code but only the events(Appointments) that are created in salesforce are reflecting there but what I want that on clicking any time there should be a pop up to create the events.

SFDC Panther September 7, 2021 - 2:04 PM

Yes. You have to implement onclick method to open the popup and create the record. This is what I can help you with

Parveen Kumar September 7, 2021 - 2:36 PM

Yes please can you guide how to create that onclick method. It will be very helpful for me.
Thanks

SFDC Panther September 8, 2021 - 4:00 AM

That is already there in the code.

Anonymous September 7, 2021 - 2:07 PM

Hi, I want test class for Event Calendar .. If I provide the code can you help me with test class?

SFDC Panther September 7, 2021 - 2:10 PM

It is a very simple class and the test class is very very easy. So, you have to write on your own.

Anonymous September 7, 2021 - 2:12 PM

Hi Amit,not this code, I will provide different code I am facing some issues in that

SFDC Panther September 8, 2021 - 4:01 AM

Unfortunately, we do not write code on behalf of you.

Ivan Garcia September 17, 2021 - 1:35 AM

I tried everything but the "fullcalendar" css sends an error and wont display the calendar.
I have read the comments and tried multiple options and haven't had any luck, any suggestions?

Anonymous October 18, 2021 - 3:10 PM

Hi Amith,

Thanks for the blog and it so informative

I have a requirement need to create a custom component to create Event calendar for Accounts
On Calendar- Other Calendar settings – ability to create an event calendar for an Account or other objects(instead People).

Component to include:
List of today and future events related to an account
User filter required to select single or multiple accounts
How to achieve this?

Many Thanks,
Latha

SFDC Panther October 19, 2021 - 6:32 AM

Hi Laths,

This is the customize requirement that you are talking about. You need to create a multi select lookup component which will search for accounts and then upon clicking on find events then you need to call the Apex Class Method which will accept List and then filter the events based on WhatId.

Latha October 28, 2021 - 10:27 AM

Hi Amith,
Thanks for the quick response…
I could able to create custom lookup to select an Account…