Create a Calendar View in Salesforce.com

Need to view data in a calendar grid? Follow along to find out how to use a great jQuery plugin to view and data in Salesforce in a day, week or month calendar view

advertisement

The Problem

Ever wanted to show a calendar grid in +Salesforce like you see in Sharepoint, Outlook and other applications? Maybe you want to see calender with events from multiple objects, or show a user their personal events?

The Solution

With a little bit of code and some help from Adam Shaw’s awesome jQuery plugin, FullCalendar, your Salesforce org could rock an awesome calendar grid too!

Here’s what it looks like:

You can view it by month, week or Day!

Part 1 – Getting the fullCalendar plugin into Salesforce

First we need to download the fullCalendar code and add a few files to Salesforce.com as Static Resources.

  1. Go to http://arshaw.com/fullcalendar/download/ and download “fullcalendar-1.6.1.zip”. At the time of writing this post, this is the current version.
  2. Once you have downloaded and un-zipped the file, there are three files that are needed. They are all in the folder called “fullCalendar”.
    • “fullcalendar.min.js”
    • “fullcalendar.css”
    • “fullcalendar.print.css” This is really optional, but if provides a cleaner style if you decide to print the calendar.
  3. For each of these three files, create a new Static Resource in SFDC. Refer to the table below for the resource names. You can use your own names if you wish, just note that you will have to change the references to these resources in the code samples below.Setup > Develop > Static Resources > [New]
    File Name Name in SFDC
    fullcalendar.min.js fullCalendarMinJS
    fullcalendar.css fullCalendarCSS
    fullcalendar.print.css fullCalendarPrintCSS

Part 2 – Adding jQuery and the FullCallendar plugin to our Visualforce Page

  1. First we need to bring in the CSS files from the static resources
  2. Next, add a reference to the google hosted jQuery and jQueryUI libraries. You can optionally download the libraries and add then to your org as a Static Resource.
      The fullCalendar plugin has been tested with jQuery 1.10.1 and jQueryUI 1.10.3 which are not the most current versions. If you choose to use a new version of these libraries, you might get unexpected results.
  3. Now we need to add a reference to the actual fullCalendar plugin
  4. Now we add the JavaScript that will call the fullCalendar method. I’m not going to go over every part of the JavaScript but I did add some comments. To learn more about what is going on here and to play with some more options please refer to the fullCalendar documentation. Here is all the code from above together with the new script tag. This should come right after the opening apex:page tag

    What makes this all work is the apex:repeat tag. By adding this, we are telling SFDC to, at run time, loop through a collection of events and render the actual JavaScript array that fullCalendar will use to build the calendar grids.

  5. Lastly, we need to add the div tag that will hold the calendar. Just add the following line

Part 3 – Creating an Event Class

Adding a custom class to hold event data makes this code really powerful because we can pull in events from all sorts of custom and standard sObjects and store them all in one collection that we can loop through. In the code above, we use a merge field called {!events} which is actually a list of class entities we are about to add.

There is not much to the class; we are just defining some properties. These properties represent values that the fullCalendar plugin is expecting for the Event Objects in the JavaScript. In my example I am just defining this class as a subclass in my Apex controller. However, if you plan to have many calendar view Visualforce pages, you will want to paste this code into a new class file so it is reusable.

You may be wondering why I am using strings for the start and end dates. I just found it was easier to get the time zone/DST offset date times using the format APEX method rather than trying to figure it out in JavaScript. Also, note that there is a string property called “className”. This is optional and can be used to add a CSS class to the event.

Working Example

This is where it all comes together. You can write SOQL for-loops to loop through just about any sObject with date fields and create instances of the calEvent class to add to our {!events} collection. The code below is the full Visualforce page and Apex Controller I used for the example. I am using the controller to get active campaigns, contact’s birthdays and any personal events. I even included an option to toggle personal events on and off. By adding className properties to each event, I am able to define those CSS classes in my Visualforce pages to change the color of each type of event. Finally, I included a legend so I would know what type of event each color represented.

Visualforce Page

Apex Controller

If you are having any issues copying and pasting this code, you can just download it here
Visualforce Page
Apex Controller

One last note. If this solution helped you and you plan to use the fullCalendar plugin, please consider clicking the donate button on fullCalendar Main Page and giving what you feel is appropriate to Adam Shaw.

If you have any questions or run into any problems implementing this solution, please leave me a comment and I will do my best of help you out.

advertisement

Leave a Reply