Add a CRM Calendar to a dashboard
Dashboards in Dynamics CRM 2011 are a great way to visualize data. Did you know that they can also be used to view pretty much any other web content?
I’ve recently had a requirement to add the CRM Calendar to a dashboard. I could have simply added a list of appointment activities to the dashboard, but the actual calendar control looks a lot nicer.
To do this, first we need to get the URL of the Calendar page. Load up the IE developer tools (F12 in IE9) and start a profiler. Now navigate to the calendar in CRM and click on ‘Month’, ‘Week’ and ‘Day’ (we want the URL for each page).
Stop the profiler and take a look at the results
As you can see, we’ve got the URLs of the 3 calendar views needed for the dashboard. The URL seems to contain a parameter for the current date in ISO8601 format (YYYY-MM-DDThh:mm:ss). We’ll have to deal with that inside of our web resource.
Now we need to create the web resource which we’ll add to the dashboard. We’ll create a simple HTML page with an iframe containing the calendar. We’ll also provide some simple navigation to choose between the daily, weekly or monthy calendars.
Edit: Some of the onclick code in the links is refusing to display properly below. You can either copy and paste it using the ‘Copy to clipboard’ link or view the real code here.
Edit 2: It’s been pointed out in the comments that some people are getting javascript errors. If you get them also, try this version of the web resource.
<html>
<head>
<script type="text/javascript">
function ISODateString(d){
function pad(n){return n<10 ? '0'+n : n}
return d.getUTCFullYear()+'-'
+ pad(d.getUTCMonth()+1)+'-'
+ pad(d.getUTCDate())+'T'
+ pad(d.getUTCHours())+':'
+ pad(d.getUTCMinutes())+':'
+ pad(d.getUTCSeconds())+'Z'}
function loadCal(calType){
var today = new Date();
var formattedDate = ISODateString(today);
var objFrame = document.getElementById("calendar_iframe");
var calSource = "/calendar/" + calType.toString() +".aspx?date=" + formattedDate;
objFrame.src=calSource;
}
</script>
</head>
<body "loadCal('Month')">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<a href="#">Day </a>
<a href="#">Week </a>
<a href="#">Month</a>
<td>
</td>
</tr>
<tr id="topTR" >
<td>
<table class="ms-crm-Home-Cal-Body" width="100%" height="100%" style="table-layout:fixed;" cellspacing="0" cellpadding="0">
<col /><col width="0" />
<tr height="0" class="ms-crm-Home-Cal-Header">
<td class="ms-crm-Home-Cal-Header ms-crm-Bold-Header"><span id="CalendarTitle"></span></td>
<td class="ms-crm-Home-Cal-Refresh"></td>
</tr>
<tr height="100%">
<td colspan="2">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<col /><col width="0" />
<tr>
<td class="ms-crm-Home-Cal-View">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
</tr>
</table>
</td>
<td style="padding:0px;" width="0" align="center" valign="top">
<div id="MiniCalendar" class="ms-crm-Home-Cal-MiniCal" style="display: none"></div>
<br />
<div class="ms-crm-Home-Cal-Views-Title ms-crm-Bold-Header" style="display: none"></div>
<table id="CalendarViews" class="ms-crm-Home-Cal-Views-Items" width="0%" cellspacing="0" cellpadding="0">
<tr id="MonthView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
<tr id="WeekView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
<tr id="DayView">
<td class="ms-crm-CalendarViews"><span class="ms-crm-AlignTo16Image"></span></td>
</tr>
</table>
<br />
<div id="CreateNewArea" class="ms-crm-Home-Cal-CreateNew-Title ms-crm-Bold-Header" style="display: none">
<table width="100%" cellspacing="1" cellpadding="0" class="ms-crm-Home-Cal-CreateNew-Items">
<tr id="CreateAppointmentRow">
<td class="ms-crm-CalendarViews"><nobr></nobr></td>
</tr>
<tr>
<td class="ms-crm-CalendarViews"><nobr></nobr></td>
</tr>
</table>
</div>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The loadCal() JavaScript function allows us to pass in the calendar type and changes the iframe according to the selected type. When the dashboard first loads, the monthly calendar will be displayed. 3 links appear above the iframe allowing the user to choose which calendar they want to view.
The ISODateString() function has been borrowed from Mozilla in order to get the date into the correct format.
Now we need to add our HTML page to the web resource. Edit your dashboard and click on Insert ‘Web Resource’
Now click on the lookup and select ‘New’ from the popup window. Give your resource a name, an optional description and a type of ‘Web Page (html)’.
Click on the Upload File ‘Browse’ button and select the HTML file which we’ve just created.
Click on ‘Save’ and then ‘Preview’. You should now see a working preview of the calendar page.
Close the preview and click on Publish. Once the Publish has completed, just Save and Close the window.
Now just fill in the rest of the web resource form and click Ok
You should now be back at the Dashboard designer where you can position and resize your web resource as required.
Save and Close when done and take a look at your new dashboard!
As you can see, using the IE developer tools, some simple HTML and JavaScript, you can add a number of items to a dashboard which may not be obvious when using the dashboard designer.
Neil McDonald's Dynamics 365 Blog 
Hi Neil!I tried your example above, and all looks as it should except that I don’t see the appointment on the calendar object itself. And when I try to navigate to the other object (Day, Week or Month), I get a JScript error message. At the bottom of this comment is the error report that is built to be sent to Microsoft. It seems to me that there’s a missing link: how does the object knows to hook up with the activities?Thanks for your time!Error report:Microsoft Dynamics CRM Error Report Contents <CrmScriptErrorReport> <ReportVersion>1.0</ReportVersion> <ScriptErrorDetails> <Message>Unable to get value of the property ‘parentElement’: object is null or undefined</Message> <Line>1</Line> <URL>/_static/calendar/calendar.js?ver=1828130457</URL> <PageURL>/calendar/Month.aspx?date=2012-06-05T14%3a13%3a25Z</PageURL> <Function></Function> <CallStack> </CallStack> </ScriptErrorDetails> <ClientInformation> <BrowserUserAgent>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)</BrowserUserAgent> <BrowserLanguage>en-us</BrowserLanguage> <SystemLanguage>en-us</SystemLanguage> <UserLanguage>en-us</UserLanguage> <ScreenResolution>1920×1200</ScreenResolution> <ClientName>Web</ClientName> <ClientTime>2012-06-05T10:13:26</ClientTime> </ClientInformation> <ServerInformation> <OrgLanguage>1033</OrgLanguage> <OrgCulture>1033</OrgCulture> <UserLanguage>1033</UserLanguage> <UserCulture>1033</UserCulture> <OrgID>{A4A4B096-7D76-481A-8A5E-2840FA92F6D1}</OrgID> <UserID>{28A84D3E-F3B7-E011-828F-000C2965EDF5}</UserID> <CRMVersion>5.0.9690.2165</CRMVersion> </ServerInformation></CrmScriptErrorReport>
Anonymous
Jun 5, 2012 at 2:24 pm
Hey Neil, I really like this solution, but when I leave the Dashboard or Change the view of the Calendar, I’ll always get this Error: (It’s the same as mentioned by mdgauthier before)SCRIPT5007: F??r die Eigenschaft "parentElement" kann kein Wert abgerufen werden: Das Objekt ist Null oder undefiniert calendar.js?ver=-1889612295, Zeile 1 Zeichen 314Translated:Unable to get value of the property ‘parentElement’: object is null or undefinedcalendar.js?ver=-1889612295, Line 1 Char 314Can you help me with that?
bike_bird
Aug 14, 2012 at 10:10 am
Hey, It appears to be failing in the built in calendar.js file on this line: -oHomeCalendarBody=window.frameElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElementI’ve updated the web resource so that it spoofs all of the elements expected and that seems to have fixed the error for me. I’ve linked to it above but you can also get it here – http://pastebin.com/5kcesRxyI'm not sure when this started happening and it may well happen again after future update rollups, but hopefully this helps!Neil.
Anonymous
Aug 14, 2012 at 1:20 pm
Is it possible to show a different CRM users calendar. The example here only displays the logged in users calendar.
Allen Campbell
Feb 18, 2013 at 2:30 pm
I don’t think that this is possible. I’ve had a quick look at the various calendar .aspx pages on the server and the functions within them do not accept a parameter for ‘userid’ unfortunately.
neilmcd
Feb 18, 2013 at 11:58 pm
This doesn’t work. I just loads the html code in the dashboard. hmmmf
Jason
Aug 28, 2013 at 9:51 pm
It was an unsupported trick, so I wouldn’t be surprised if it stopped working after UR 12. If I get a chance, I’ll stop being lazy and come up with a supported solution!
neilmcd
Sep 19, 2013 at 11:32 am
Any new updates to this Feature, possibly for CRM 2015/2016?
Jon
Jul 14, 2016 at 8:39 pm
Any updates to this great feature for CRM 2015/2016?
Jon
Jul 14, 2016 at 8:50 pm