Create a VF Calendar page for any object

This article is about creating a VisualForce calendar. If you want to create Lightning calendars, or want more information about the differences, see this article: Calendar Differences


With Booker25, you can create a calendar to plot Reservations related to any Standard or Custom object in Salesforce.

1. Create a Dimension record

To be able to create a VisualForce calendar for an object, you will need to link it to a Dimension record. If no Dimension record exists yet for the object, you will need to create one. This article explains how to create a Dimension record.

2. Create Calendar records

  1. Go to the Calendars tab
  2. Click the New button to create a new Calendar record.
  3. Select a Record Type for the calendar. Do not select the Schedule Calendar record type, as this is intended exclusively for the Scheduler feature.

  4. Give the calendar a meaningful name, you can leave the rest of the fields as default. The Reservation Field field is deprecated, you can fill in any of the available values.
  5. Make sure to fill the Dimension field with the correct Dimension (see the previous section).
  6. Under the Calendar Views related list, create links to each View you want to show on the calendar. This is described below in section 4.

3. Create the Visualforce page and Tab to view the calendar

  1. Go to Setup > Visualforce Pages
  2. Create a new Visualforce page with below code snippet.

    Calendar code snippet
    <apex:page showHeader="true" sidebar="false" applyBodyTag="false">
        <style>
            html,body{height:100%}iframe.page-iframe{height:100%;width:100%;position:absolute;top:0;bottom:0;left:0;right:0}html body.sfdcBody{padding:0 !important}#contentWrapper{height:calc(100% - 152px)}.outerNoSidebar{height:100%;padding:0 !important}.noSidebarCell{padding:0 !important}.bodyDiv{overflow:hidden !important}
        </style>
        <iframe id='page-iframe' class="page-iframe" src="" frameborder="0"></iframe>
        <script>
            var calendarName = "<calendar_name>";
            var baseUrl = "{!$Page.B25__MultiResourceCalendar}";
            var d=function(){var r={};var e=document.location.search.substring(1);if(!e){return r}var a=e.split("&");a.forEach(function(e){var a=e.split("=");if(a.length===1){r[a[0]]=""}else{r[a[0]]=decodeURIComponent(a[1])}});return r};var f=function(e){var a="";for(var r in e){if(e.hasOwnProperty(r)){a+=a?"&":"?";a+=r+"="+encodeURIComponent(e[r])}}return a};var r=function(e,a){if(c()||typeof history==="undefined"||typeof history.replaceState==="undefined"){return}if(window.location!=window.parent.location&&typeof window.parent.postMessage==="function"){var r={cmd:"B25::updateParameter",parameter:e,value:a};window.parent.postMessage(r,"*")}var t=d();t[e]=a;var n=f(t);var o=document.location.pathname;var i=o+n;history.replaceState({},"",i)};var c=function(){return typeof sforce!=="undefined"&&typeof sforce.one!=="undefined"};var t=function(e){if(e.origin!==window.location.origin){return}if(typeof e.data!="object"||e.data.cmd!=="B25::updateParameter"){return}r(e.data.parameter,e.data.value)};window.addEventListener("message",t,false);var n=d();n.calendar=calendarName;var o=f(n);var i=document.getElementById("page-iframe");i.src=baseUrl+o;
        </script>
    </apex:page>
  3. Make sure Available for Lightning Experience, Lightning Communities, and the mobile app is selected
  4. Replace <calendar_name> with the name of the Calendar record you just created (remove the <brackets> but leave the "quotes").

  5. If you have selected the Single Resource Calendar record type in the previous section, replace the line:
    var baseUrl = "{!$Page.B25__MultiResourceCalendar}";
    with the following line:
    var baseUrl = "{!$Page.B25__SingleResourceCalendar}";
  6. Go to Setup > Tabs 
  7. Create a VisualForce Tab for the page you just created
  8. Add it to the Menu bar
  9. (Optional) You can extend the functionality of the calendar by passing certain parameters: Multi resource calendar parameters and embedding

4. Link views to the calendar

If you set up your own Calendar and View records, you need to connect them as follows.

  1. Go to the Calendars tab and select the calendar you want to link to the View.
  2. On the Related subtab, find the Calendar Views related list.
  3. Click New to create a new record.


  4. For View, select the View object you want to link to this Calendar
  5. If this view should be selected by default, check Default View. (Only one view should ever by marked as Default. If a different view is already marked as Default, do not forget to uncheck it on that View)
  6. Enter a number to specify the order of this button on the calendar. The buttons on the calendar page are ordered from left to right, from lowest to highest
  7. Click Save

5. Configure the Reservation Colors

How to configure reservation colors on the calendar is described in this article: Reservation Colors.

6. Create tab

  1. Go to Setup > Tabs
  2. Scroll down to the VisualForce section and click New
  3. Select the VisualForce page you just created and give the tab a meaningful name
  4. Assign the tab to Apps and Profiles as required

On this page