Salesforce Calendar Component - SFC

Wednesday, February 6, 2013 by Aslam - The Alexendra
Hi All,
Recently I had a requirement where a client wanted to show complete year calendar on page with following requirements.

1) We can pass any year to calendar and it must print the complete year (12 month) calendar
2) It must have provision to highlight the holidays
3) It must be printed or saved or emailed as PDF also

To achieve it, i first find the jQuery UI DatePicker best fit. But there is a issue with this approach. JS does not work properly when we do RenderAs pdf in vf pages. So, this approach will not work.
Then finally I come up with my own solution by making native salesforce approach -  SFC Component. Feature for this are as below:

1) We can pass the component year and month
2) We can pass the component holidays list as well

Here is the syntax how you can use this:

<c:SFC_MonthComponent month="7" year="2013"/>

Above syntax will print July, 2013 calendar

<c:SFC_MonthComponent month="7" year="2013" holidays="25,30"/>

Above syntax will print July, 2013 calendar. In addition it will also highlight the 25th and 30th of the month as holidays

You can download the code from here:

You can see the working demo here

You can change the year parameter from url to see the calendar for different years on the above demo. For demo purpose i have highlighted few dates as holidays (orange color).

In the code, i have used some styles for printing calendar like holidays highlight. You can simply change those style to match up your theme.

The above code is for version 1. As this is native vf/apex, you can simply use "renderAs=pdf" to get the output in PDF format.

In next version , here is my plan to enhance it with following features.

1) Different preset of themes for styling the calendar component
2) Give Event feature for clicking on any date. You can do different operations on that click of any date

As always, your suggestions are welcome to enhance this tool

Aslam Bari


Abdul Vahid said...

Good One Again :)

Tanuj said...

Nice !!

Unknown said...

Good and very Useful.
Rajendra rathore

Anonymous said...

I like it

Anonymous said...

I was just going through the code and was trying to find from where are you are calling the method getPrintCalendar()?

I couldn't find any reference.


Aslam - The Alexendra said...

Hi Yoafzal,
In salesforce pages, if you do like this


It will call internally getMyMethod() from class automatically.

Check in component , i have used {!printCalendar}

Anonymous said...

Oh yes, I guess I over looked it.


Anonymous said...

Hi ,

Nice work.

One thing you can do is onclick of any date you have to show some object records lets say opportunities..


Anonymous said...

Hi, sir
I am ramesh I was try to execute these but it through error

" System.NullPointerException: Argument 1 cannot be null

Class.SFC_MonthController.getPrintCalendar: line 18, column 1"

Allan said...

Custom Software Development Delhi that mitigate risks, enhance productivity, channelize work flow, and provide early corrective solutions to your problems.

Post a Comment