Click here to Skip to main content
Click here to Skip to main content

WSS Event Calendar Listing Web Part

, 25 May 2009
Rate this:
Please Sign up or sign in to vote.
Displays SharePoint events (or any calendar list) in a compact widget style calendar
Screenshot - preview1.gif Screenshot - preview2.gif

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 & Gives 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 include 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:

  • SiteUrl - (Site URL) Server relative URL of the site. If left blank, current site is used.
  • 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.
  • FirstDayOfWeek - (First day of week) Default is Default, i.e. as specified in system setting.
  • 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) In some situations like in a publishing site where you have calendar lists, you may want to direct users 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.ClientScripts.balloontip.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.

The sample Visual Studio 2008 solution includes all the support files you need to build and deploy this Web Part, minus strong name key files (*.snk). 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.

Installation

Using stsadm, install solution file QuestechEventCalendarList.wsp in \Deployments\Solution\:

stsadm -o addsolution -filename QuestechEventCalendarList.wsp

Go to SharePoint Central Administration/Operations/Global Configuration-Solution Management. Deploy the installed solution to selected Web applications. In the site collection where the solution is deployed, activate the Site Collection Feature Questech Systems Event Calendar Listing Web Part. 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 (in \SharePoint\Styles). 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 in 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. The Code Project: Calendar Web Part for Sharepoint that Displays & Gives Details of Events from an Event List
  4. Dynamic Drive: Rich HTML Balloon Tooltip

History

  • V1.4 - 2009.05.22
    • Converted Visual Studio solution projects to version 2008
    • Added SiteUrl property
    • New SharePoint Solution QuestechEventCalendarList.wsp and assembly QuestechSystems.SharePoint.EventCalendarList.dll. This allows my other sample solutions in CodeProject to co-exist with this Web Part.
    • Renamed feature from QuestechWebParts to QuestechEventCalendarListWebPart
  • V1.3 - 2009.01.04
    • Added FirstDayOfWeek property
    • Fixed error when calendar contains items sent by e-mail
  • V1.2 - 2008.09.20
    • Fixed incorrect pop-up events when more than one Web part is added to a page and each is associated with a different calendar list
  • 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Stephen Huen
Software Developer (Senior)
Canada Canada
A Microsoft Certified Professional Developer and Technology Specialist.
 
Experience and expertise in SharePoint 2013 / 2010 / 2007.
 
Role ranges from a developer in a multi-person team to a solution consultant with expert-level skills, leading a project to completion status.
 
Proven experience working effectively in a team environment and a self-managed environment.
Follow on   LinkedIn

Comments and Discussions

 
QuestionElist not displaying PinmemberRpulcino22-Aug-12 8:48 
QuestionHow to display location? Pinmemberelee53211-Nov-11 16:24 
QuestionDisplay in dialog Pinmemberelee5328-Oct-11 16:48 
Questionwss 2.0 compatabity Pinmembertmarina2-Aug-11 0:49 
Questioncategory wise css display of baloon tip... Pinmemberp yadav10-Jul-11 16:35 
GeneralBalloontip.css PinmemberChristopher H. Schulz11-May-11 6:44 
GeneralRe: Balloontip.css PinmemberStephen Huen19-May-11 7:59 
GeneralRe: Balloontip.css PinmemberChristopher H. Schulz19-May-11 10:01 
Generalupdate resource PinmemberDespa2210-Dec-10 22:08 
GeneralMy vote of 5 PinmemberAndrewSmith15-Nov-10 3:26 
GeneralWSS Event Calendar Listing Web Part shows up as jsuta title but no mini calender with events Pinmemberhitu210018-Aug-10 7:20 
GeneralRe: WSS Event Calendar Listing Web Part shows up as jsuta title but no mini calender with events PinmemberStephen Huen18-Aug-10 7:41 
QuestionCan you get a filtered view on the calendar? PinmemberBoise - Jackson12-Aug-10 11:19 
QuestionCan't get calendar to show as widget PinmemberBoise - Jackson11-Aug-10 4:33 
AnswerRe: Can't get calendar to show as widget PinmemberStephen Huen11-Aug-10 21:21 
GeneralRe: Can't get calendar to show as widget PinmemberBoise - Jackson12-Aug-10 3:51 
GeneralRe: Can't get calendar to show as widget PinmemberStephen Huen12-Aug-10 7:25 
GeneralRe: Can't get calendar to show as widget PinmemberBoise - Jackson12-Aug-10 10:38 
GeneralDLL License Pinmembermuthe.ashok30-Jul-10 0:10 
GeneralTime Question PinmemberMember 247097014-Jul-10 11:29 
GeneralMy vote of 5 Pinmemberssaurabhdhingra27-Jun-10 19:46 
QuestionSharePoint 2010 PinmemberTimohthy J. Carlson25-Jun-10 8:19 
AnswerRe: SharePoint 2010 PinmemberStephen Huen25-Jun-10 16:49 
GeneralRe: SharePoint 2010 PinmemberTimohthy J. Carlson29-Jun-10 15:25 
GeneralRe: SharePoint 2010 PinmemberStephen Huen30-Jun-10 7:09 
GeneralRe: SharePoint 2010 PinmemberTimothy J. Carlson12-Jul-10 6:57 
GeneralRe: SharePoint 2010 PinmemberStephen Huen13-Jul-10 7:59 
QuestionChange in Web Part? Pinmemberssaurabhdhingra24-Jun-10 23:06 
QuestionUsing with Updatepanel Pinmemberfurrykhan16-Mar-10 22:16 
GeneralPopUp on hover event is not working. Pinmemberkalyan_MOSS17-Feb-10 6:16 
GeneralRe: PopUp on hover event is not working. Pinmemberkalyan_MOSS17-Feb-10 8:38 
QuestionShow event in day appears in two months view PinmemberMedo4Ever26-Jan-10 22:40 
GeneralMy vote of 1 PinmemberDavid McCollough21-Dec-09 3:55 
GeneralDelete Resource in resource gallery PinmemberMember 319337015-Nov-09 5:38 
QuestionHow would I make this work against OWA instead of an events list Pinmemberjwgreg19-Oct-09 4:35 
GeneralThere is no web named ... PinmemberAndreas Boehmer14-Oct-09 20:16 
GeneralError: One or more field types are not installed properly PinmemberAndreas Boehmer14-Oct-09 19:28 
AnswerRe: Error: One or more field types are not installed properly PinmemberAndreas Boehmer14-Oct-09 19:40 
GeneralItems are showing in calendar view as well as list PinmemberJill Riesenberg28-Aug-09 4:49 
GeneralRe: Items are showing in calendar view as well as list PinmemberStephen Huen1-Sep-09 5:52 
GeneralRe: Items are showing in calendar view as well as list Pinmembersfernan119-Oct-09 18:17 
QuestionTooltip is not working properly. Pinmemberjain_nitin30-Jul-09 3:23 
QuestionBallontip.css is not applied by default. [modified] Pinmemberjain_nitin26-Jul-09 23:55 
QuestionPopup not working with IE6 PinmemberSydney Le24-Jul-09 5:04 
GeneralThis is an excellent article. Pinmemberjain_nitin24-Jul-09 2:00 
Generalweb part crash if events added without titles PinmemberSydney Le23-Jul-09 8:43 
GeneralRe: web part crash if events added without titles PinmemberSydney Le23-Jul-09 11:03 
QuestionOnly the title came out PinmemberZawawi14-Jul-09 21:34 
Questioncan not see calender in this webpart? PinmemberCHetan20a8-Jun-09 4:04 
AnswerRe: can not see calender in this webpart? PinmemberSgtpham17-Jun-09 7:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 25 May 2009
Article Copyright 2008 by Stephen Huen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid