Skip to main content

Responsive Bootstrap Calendar In Visualforce

Making Visualforce work for all forms of devices is common ask these days .Gone are they days when we used plain old school Visualforce with pageblocks and pageblock tables to present data to the User .

The number of mobile devices has dramatically increased these days and technology is moving rapidly to mobile devices.Everyone prefers viewing the information on handheld devices along with viewing on desktops and laptops .

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

There are some cool frameworks out there that ease development of a web page following responsive design patterns .

Some of them I would like to list in case you have not come across them 

With little bit of HTML and CSS knowledge you should be able to start .HTML and CSS and JS skills are primary for any framework .

So this blogpost is sharing how to build a responsive calendar using visualforce .

Before beginning thanks to the author serhioromano for amazing blogpost on how to use bootstrap and  Jquery to build a responsive calendar .Check his below blog that speaks lot about his work

Please kindly note the real rock star is  serhioromano  who has built this .My work is just making it adaptable to Visualforce and platform.

Business Use Case

1)Need a calendar data from custom object and out of box salesforce calendar is not an option then 

2)Building a cool client portal with custom Visualforce and need a calendar to show events and tasks 

3)Building a public website and would like to show your company events on a calendar .

There are lot more Use cases I am sure you will discover ,having a calendar view of data helps lot.

Solution Approach

1)Reuse existing code library from  serhioromano  github repo and build an apex javascript remoting class that feeds the JSON data to the calendar api function .

2)Provide flexibility to the developers and Admin so that they can customize the calendar for any Sobject and any field by simple one liner code change .

Demo Link

I have created a public site to host my page for ease of view and please observe the responsiveness of this calendar.


The entire code for this can be viewed from my github repository

Also I have unmanaged package from where you can install in your org for playing around

Use this URL to install the package into any organization:

Note: If you are installing into a sandbox organization you must replace the initial portion of the URL with

What line of code do I need to change for changing to other objects ?

The above lines are embedded in the component  Responsive_Calendar_View  component and a developer needs to change this line .The definitions of  attribute is provided below

In case of any issue inspect your browser console or contact me or leave a comment below .

Hope you liked this and happy coding :)

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained

TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-

SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.

Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain

Customizing Napili Template Of SFDC For Communities - Community Cloud

Recently I have been busy working with salesforce community cloud platform and I am impressed by the new added features of Spring 16 .

You can watch the Release Readiness webinar for more details on what are added features for community cloud 

Lets talk about something which most of client (Either SI or ISV ) would love to have with the Napili template .The first question that clients ask with Napili is its flexibility to customize and tailor to their specific needs .

The very straight forward questions that people familiar with Napili template ask are as follows 

Can I change the CSS and look and feel ?  

Well yes and No ....The new branding editor you can sparingly use CSS and change look and   feel   and community editor can also help you to some extent to change labels and the color and you can really get closer to what you want .Just note that efforts will be high if we want to change the entire template design.

Will i be able to populate data from custom objects and standard objects a…