WSS Event Calendar Listing Web Part

• Download WssCalendarList - 126.1 KB

Introduction

For use in Microsoft Windows SharePoint Services (WSS) 3.0, this Event Calendar Listing web part displays events (or any calendar list) in a compact widget style calendar.

Background

I was inspired by Kapoorisha's article Calendar Web Part for Sharepoint that displays & Give Details of Events from an Event List in building this web part. It is based on the same idea that SharePoint calendar events are shown in a custom calendar web control that inherits from the standard ASP.Net Calendar web control. My design goal is to make the web part more flexible, efficient and visually appealing.

Description

The EventCalendarListWebPart web part calls two custom web controls, EventCalendar and EventListing, to render events. Each of these two web controls can be used independently of the web part which functions more as a wrapper.

EventCalendar is a custom web control that inherits from System.Web.UI.WebControls.Calendar. Days with events are rendered in Selected style with rollover pop-up showing a list of events on that particular day. The pop-up uses dynamic html instead of Ajax and is based on Dynamic Drive's Rich HTML Balloon Tooltip. When user mouse hovers an event title, a tooltip showing the event start and end time is shown.

In EventCalendar, events are fetched from a calendar list using a SPQuery as follows:

<Where>
    <DateRangesOverlap>
        <FieldRef Name="EventDate" />
        <FieldRef Name="EndDate" />
        <FieldRef Name="RecurrenceID" />
        <Value Type="DateTime"><Month /></Value>
    </DateRangesOverlap>
</Where> 

The above query retrieves all events that occur on days shown in the current calendar view, not just the current or selected month. So it may includes the last few days of the previous month and/or the first few days of the next month. In the overridden event OnDayRender, the control will check if any of the retrieved events fall on the day and render the necessary child controls appropriately.

EventListing is a custom web control that shows upcoming events in a list format. It fetches events from a calendar list using a SPQuery as follows:

<Where>
    <DateRangesOverlap>
        <FieldRef Name="EventDate" />
        <FieldRef Name="EndDate" />
        <FieldRef Name="RecurrenceID" />
        <Value Type="DateTime"><Now /></Value>
    </DateRangesOverlap>
</Where>
<OrderBy>
    <FieldRef Name="EventDate" />
</OrderBy> 

EventCalendarListWebPart functions as a wrapper for EventCalendar and EventListing. It has the following public properties:

• ListName - (List Name) Name of a calendar list in the current site. Default is Events.
• ShowCalendar - (Show Calendar?) Default is true.
• ShowListing - (Show Listing?) Default is true.
• NumDaysInEventListing - (Number of days to show in event listing) Default is 3. Please note days with no events do not count.
• SiteRelativeEventItemUrl - (Site Relative Url for Event Detail Page) On some situations like in a publishing site where you have calendar lists, you may want to direct user to a custom event detail page with a consistent look and feel to the rest of the publishing site. If provided, when a user clicks on the event title, the user will be redirected to this custom page with the event item ID automatically appended to the url as a querystring.
• CssClassEventListing - (CSS class name for event listing)
• CssClassCalendar - (CSS class name for calendar control) This is the CSS class for the outermost calendar table. If provided, you must also specify CssClassTitle because of quirks in System.Web.UI.WebControls.Calendar.
• CssClassTitle - (CSS class name for the title heading) This is the CSS class for the part where it says July, 2008 in the title.
• TitleBackColor - (Background color for title heading) Though you can specify the title background color in CssClassTitle, you should do it in this property instead because of quirks in System.Web.UI.WebControls.Calendar, again.
• CssClassHeader - (CSS class name for the section that displays the day of the week)
• CssClassNextPrev - (CSS class name for the next and previous month navigation elements)
• CssClassDay - (CSS class name for the days in the displayed month)
• CssClassEvent - (CSS class name for the days with event(s))
• CssClassToday - (CSS class name for today's date)
• CssClassWeekend - (CSS class name for the weekend dates)
• CssClassOtherMonth - (CSS class name for the days that are not in the displayed month)
• OnMouseOverBackgroundColor - (Background color (e.g. "#FFE1BB") when mouse over a day)

The rollover pop-up functionality in EventCalendar requires supporting files balloontip.js and balloontip.css. balloontip.js has been customized from Dynamic Drive's version to delay hiding the pop-up when mouse is over the pop-up. It is treated as Embedded Resources in Visual Studio. In code, reference the javascript file using Page.ClientScript.GetWebResourceUrl. You will need to pass in the file in the form of [Assembly of project].[Folder containing resource].[Filename of resource]. In AssemblyInfo.cs, include ballontip.js in the same format like:

[assembly: System.Web.UI.WebResource
    ("QuestechSystems.SharePoint.ballontip.js", "text/javascript")]

The web part also uses a resource file to store all messages and property attribute UI strings. It demonstrates how to develop a custom class that inherits WebDescriptionAttribute, WebDisplayNameAttribute or CategoryAttribute and returns a localized string from your own Resource Manager.

Installation

The sample Visual Studio 2005 SP1 solution includes all the support files you need to build and deploy this web part, minus strong name key files (*.snk). (The supplied Visual Studio 2005 solution contains Web Application projects supported only by SP1 or after.) It contains three projects: Deployment, Features and SharePoint. The SharePoint project contains source codes for the web part and the two web controls. The Features project contains all the features to support the SharePoint project. The Deployment project contains a pre-build script to aggregate all the files needed for deployment. It contains a Solution directory where a WSP file is generated and deployed by a post-build script.

This structure of Visual Studio solution and projects is scalable to full blown MOSS/WSS development and deployment. You could add additional projects like SharePoint.Publishing for MOSS publishing development or SharePoint.ApplicationPages for customization of administrative layout pages. Within your projects, you could have other custom components like user controls, custom fields, feature receivers etc.

Of course you can install the web part as is without further customization. Using stsadm, install the solution file QuestechSolution.wsp in \Deployments\Solution\:

stsadm -o addsolution -filename QuestechSolution.wsp

Then go to SharePoint Central Administration/Operations/Global Configuration-Solution Management and deploy the solution to selected web applications. In the site collection where the solution is deployed, activate the Site Collection feature "Questech Systems Web Parts". After that, the Event Calendar Listing web part (listed under Questech Systems) should be available for you to add to pages.

As mentioned the rollover pop-up functionality depends on balloontip.css (you can find it in the root of the SharePoint project). If you have a custom CSS file for your site already, you could just copy the content out from balloontip.css and paste it into your custom CSS. If you do not have a custom CSS file, you would need to either add it through the SharePoint UI Site Settings interface or insert it in your custom master page or page layout (for MOSS). At the minimum, you would need the first CSS class definition balloonstyle in balloontip.css.

To achieve the same look and feel as shown the preview screenshots shown at the top, I specify the following values in the web part properties:

• CssClassEventListing - EList
• CssClassCalendar - ECal
• CssClassTitle - ECalTitle
• TitleBackColor - #BBD367
• CssClassToday - ECalToday
• OnMouseOverBackgroundColor - #E6935E

Please note that though this web part is licensed under The Code Project Open License, the Rich HTML Balloon Tooltip is licensed separately under its own Terms of Use.

References

1. CodeGuru: Write Custom WebParts for SharePoint 2007
2. Eric Stallworth: How To Build a Solution Pack (WSP)
3. Code Project: Calendar Web Part for Sharepoint that displays & Give Details of Events from an Event List
4. Dynamic Drive: Rich HTML Balloon Tooltip

History

• V1.1 - 2008.07.16 - Fixed incorrect event item url when web part is added to a sub site.
• V1.0 - 2008.07.12 - Base