Neil McDonald's Dynamics CRM Blog

Add a CRM Calendar to a dashboard

with 9 comments

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).

1_cycle_through_pages

Stop the profiler and take a look at the results

2_profiler

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’

3_edit_dashboard.jpg.scaled1000

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.

4_add_resource

Click on ‘Save’ and then ‘Preview’. You should now see a working preview of the calendar page.

5_preview

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

6_complete_form

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!

7_finished

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.

Written by neilmcd

May 10, 2011 at 4:00 pm

Posted in CRM 2011

Tagged with , , ,

9 Responses

Subscribe to comments with RSS.

  1. 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

    June 5, 2012 at 2:24 pm

  2. 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

    August 14, 2012 at 10:10 am

  3. 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

    August 14, 2012 at 1:20 pm

  4. Is it possible to show a different CRM users calendar. The example here only displays the logged in users calendar.

    Allen Campbell

    February 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

      February 18, 2013 at 11:58 pm

  5. This doesn’t work. I just loads the html code in the dashboard. hmmmf

    Jason

    August 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

      September 19, 2013 at 11:32 am

      • Any new updates to this Feature, possibly for CRM 2015/2016?

        Jon

        July 14, 2016 at 8:39 pm

  6. Any updates to this great feature for CRM 2015/2016?

    Jon

    July 14, 2016 at 8:50 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: