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

Event Calendar Listing Web Part (SharePoint 2010)

By , 29 Mar 2014
Rate this:
Please Sign up or sign in to vote.
SPFCalendarList/1.gif SPFCalendarList/2.gif

Introduction

[A SharePoint 2013 version with enhanced functionality is available here.]

For use in Microsoft SharePoint Foundation 2010 and SharePoint Server 2010, this Event Calendar Listing Web Part displays events (or any calendar list) in a compact widget style calendar. This is adapted from my WSS 3.0 version to work in SharePoint 2010.

Background

I was inspired by CodeProject 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 Calendar.
  • 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 May, 2010 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. Modification has also been made to use relative positioning rather than absolute positioning for greater flexibility. The JavaScript file is treated as Embedded Resources in Visual Studio, i.e. it is automatically included and referenced in the web part. In code, the JavaScript file is referenced using Page.ClientScript.GetWebResourceUrl in the form of [Default namespace].[Folder containing resource].[Filename of resource]. In AssemblyInfo.cs, ballontip.js is included in the same format:

[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 2010 solution includes all the support files you need to build and deploy this Web Part, minus the strong name key file (key.snk). It makes full use of the built-in SharePoint integration. No more third party tools or custom pre and post build scripts are needed to build the SharePoint solution file.

Installation

Open SharePoint 2010 Management Shell, add solution file QuestechEventCalendarList.wsp using Add-SPSolution like

Add-SPSolution 
"C:\QuestechSystems.EventCalendarList\bin\Release\QuestechEventCalendarList.wsp"

Or using stsadm, add solution file QuestechEventCalendarList.wsp like:

stsadm -o addsolution -filename 
"C:\QuestechSystems.EventCalendarList\bin\Release\QuestechEventCalendarList.wsp"

Go to SharePoint 2010 Central Administration/System Settings/Manage farm solutions. 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 \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 add it either through the SharePoint UI Site Settings interface or insert it in your custom master page or page layout (for SharePoint Server 2010). At the minimum, you would need class definitions balloonContainer, balloontrigger and 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.

History

  • V1.1 - 2010.06.29
    • Made Event Calendar Ajax compatible. (If the calendar web part or web control is wrapped in an UpdatePanel, tooltips will continue to work post asynchronous postback. Thanks jules_anime for code tip.)
  • V1.0 - 2010.05.02 - Base

License

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

About the Author

Stephen Huen
Web Developer Questech Systems
Canada Canada
No Biography provided

Comments and Discussions

 
QuestionEvent Listing Font Size PinmemberMember 937516216-Oct-12 9:05 
AnswerRe: Event Listing Font Size PinmemberMember 937516222-Oct-12 8:50 

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
Web04 | 2.8.140415.2 | Last Updated 29 Mar 2014
Article Copyright 2010 by Stephen Huen
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid