Developing Custom Web Part using SPCalendarView

If you are looking to develop a web part that shows events in Calendar format, you can use SPCalendarView control. SPCalendarView uses SPCalendarItem. If you want to add display additional column in calendar you can create your own class and inherited from SPCalendarItem. SPCalendarItem is more like SPListItem. The only difference is that you have to create a SPCalendarItem Collection and then bind it to SPCalendarItem object. There is an alternative method that uses SPCalendarDataSource class but I have not looked into that.

SPCalendarView uses SharePoint Default Template that are defined in ControlTemplates\DefaultTemplates.ascx file. This file contains various templates used at different places in SharePoint. These templates are used to show various sections like “TextField” etc. These templates are loaded by SharePoint at Application Load and are saved in memory. To make any changes in these template and test you must Recycle application pool and refresh the browser. These templates are developed by the same principle as GridView Column Template that we use to create columns that are not supported in GridView. It involves creating and class that inherits from ITemplate and then overriding certain methods.

SPCalendarView has many Chrome templates to display information. These chromes include V3, V4, Asynchronous or custom. SPCalendar View control load the template based on SharePoint Version. The SharePoint 2010 Calendar List view uses V4 view. SharePoint 2007 uses V3Chrome. To make your own chrome you must make a copy of these chromes and templates and placed them in the root of ControlTemplate folder in SharePoint Root. You must also copy the various Item Templates with it. I have learned that leaving these templates names same as default does not affect the existing sites but I have not tested it after creating a new site. Best practice would be to rename the chrome and template and then use it inside the code based on the example below.

Chrome & Templates

There are three types of ChromeTemplates.

  • Daily
  • Weekly
  • Monthly

Each chrome has 3 templates assigned to it.

  • DayItemTemplate
  • DayItemAllDayTemplate
  • DayItemMultipleDayTemplate

The 3 style of templates are assigned inside the chrome.

The templates are strictly HTML so you can modify the styles and HTML using the Binding method that is easily identifiable.

 

If you compare this with Default template you can see that we have added EventType before the anchor tag and added a row in the last table which shows Start Date and End Date. You can compare these templates which default template to get better understanding. A major change here was href tag of anchor where we are opening the link in Dialog rather than link. This was done because without it the item was opening in page.

Same Templates are repeated for Weekly and Daily Events.

Calendar Type

The Calendar type is controlled by Query String. It is added automatically by the SPCalendarView control when user click at different places. It is also controlled by the Templates. We have a property that gets the value and assign it to the control. The default value of calendar type is Monthly.

The calendar view will change when you will use either Ribbon or Monthly, Weekly Daily links on the page or click on any day inside.

CalendarDate

When a user click on a date value in the calendar the view is switched to daily view and set the date to the value. It is controlled by CalendarDate.

The value is automatically added to Query String.

Start and End time Calculation

Start and End dates are calculated based on view type. For monthly view 1st and last day or month, weekly view 1st and last day of week.

E.g. If view is monthly we need events from 1st of month to last day of month. You can also redirect user to your web part page if you add the CalendarDate to the Query string where SPCalendarView Webpart is placed. The calendar will show events of that day.

Filling up Events is on your own. In case of my web part we were getting them from database because we had an event receiver that saved, update and delete events in the table. You can use SPListItem with SPQuery but your Query object might become complex. Make sure you pass start and end date properly to your SPQuery or stored procedure so that only limited events are fetched.

There is much more in CalendarView that can be done. You might have to do some Research using .NET Reflector extension to Visual Studio 2010 and search for SPCalendarView or SPCalendar to find all related classes and code. It will help you finding some of the properties and methods that you need to get things done. I am posting this blog because I did not find any good blog post that clearly defines it.

I hope this will help someone.

Advertisements

3 thoughts on “Developing Custom Web Part using SPCalendarView

  1. We have a requirement where we have to show custom Column Values against each event in the Calendar View. Currently it shows Title and Location, but we would like to show custom value in the view.

    How can we achieve that?

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