Omicron Llama

Coding all day, every day.

SharePoint: Year to View of a Calendar with Data List View Web Part

Cross-Posted from

This is a follow up post to a previous article I had written on creating a year to view web part of a Sharepoint Calendar List in C#, nearly a year ago. Back then, C# was what I knew and I was building good knowledge on the object model, so solving the issue of building a Year Overview of the items in a Sharepoint Calendar using C# seemed the best way at the time. But developing solutions like this in C# does have its problems. For one, there is the problems of having a manageable look and feel to the web part; to let it fit in within the current theme. Then there are the problems of maintaining Code Access Security, accessing web.config, the GAC or bin deployment dilemma. All of these issues have in common the fact that they require administrative access on the Sharepoint server.

Since then I’ve been picking up what is actually possible using the Data List View Webpart in Sharepoint Designer, largely with help from Marc D Anderson and Laura Rogers and their respective blogs. Solving the issue of displaying this Year view is easily done with none of the issues listed above. In this article, I’ll describe how to create this Year View in Sharepoint Designer. You’ll need a good understanding of HTML, a basic grounding in XSL and you’ll need to be familiar with Sharepoint Designer. The view will display the titles of the entries for the current year in the first column, and the date of each event listed in a column which represents the respective month. If an event spans 2 days, it will show the date’s to and from separated by a dash. The full requirements and example output samples can be seen in my previous post.

To start off, create a bog standard Calendar List and populate with some details. No custom columns are needed, but if you already have a Calendar with custom columns, you won’t need to make any modifications for this to work.

This Web Part can take up a fair amount of screen real estate, so I tend to have this view sit in its own Web Part Page. Go a ahead and create a single-column web part page in your Sharepoint Web (which contains the Calendar) and save it in a Document Library. Open this file up in Sharepoint Designer.

Select the placeholder asking you to add a Web Part, and from the Data View menu select Insert Data View. Locate your Calendar in the Data Source Library and click Show Data from the drop-down arrow. Drag over the Title Column into the blank Web Part and immediately you should see a list of Events. Add a filter to extract only events for the current year. Add 12 columns to this table using the Sharepoint Designer interface or, if you’re brave enough, add the mark-up directly to the XSL. Add to each column header the text for each month (Jan, Feb, Marc, etc.). If you add the columns the fast way via the Sharepoint Designer interface (Table Menu -> Insert -> Rows or Columns) then you’ll notice the markup contains “runtime” non-breaking spaces. These can be removed in the next step.

Now locate the rowview template within the XSL mark-up. We will be testing each row of the calendar List to find out which month it relates, and slot the date of that event into the appropriate month. To do this, we’ll need 2 XSL variables, one for the event’s day, and one for its month.

Note: in these code snippets I am using Locale ID “2057” to represent en-GB. You may wish to use “1033” for en-US. A good list of Locale IDs can be found here: Remember to use the decimal representation.

Spend a few moments to reformat the auto-generated mark-up, then add in our variables before the first of the twelve Table Data elements which represent the months.

Inside each of the twelve Table Data elements, we’ll call a template which will test the dates of the event and output the appropriate detail.

Our template will take as parameters a month number, which represents the column we are rendering, and will either return a number which represents the day of the event, or two numbers (the start day and end day) separated by a dash, depending if said event spans two or more days (or not). We’ll create a “choose” clause, the first “when” node tests if the end date is greater than the start date. This determines if the event spans more than one day or not. If it does, print the start day followed by a dash and then the end day. The xsl “otherwise” node will print only the the start day of this event.

This template is called within each column’s table data cell. Notice how the parameter “ThisMonth” is passed each time, and we change the value which is passed (the value assigned with “select”) to represent the column we are rendering. So, 1 for Jan, 2 for Feb, 3 for Mar, etc.

With this mark-up added, let’s go back to Design view and see how this looks, and work out any kinks.

This should be a good start for further enhancements to Year to View layouts. You may want to add a border to the table (and set the border collapsing) to make it slightly more readable. To further enhance user experience, you could also make the “Title” text a hyperlink to the Calendar List Item view to see more detail. You could also highlight the current month’s column using Conditional Formatting to enhance UX.

From this post I hope you have not only picked up some further inspiration as to what’s possible with Data View Web Parts, but also seen how choosing development of web parts this way (where possible) can be beneficial for time to deployment, as troubleshooting, bug-busting and compliance with the environment’s branding can all be simplified. Time is spent on developing functionality rather than compliance (which should already be in place).

One thought on “SharePoint: Year to View of a Calendar with Data List View Web Part

Leave a Reply

Your email address will not be published. Required fields are marked *