Event Calendar Listing Web Part (SharePoint 2010)
[A SharePoint 2013 version is available here.]
For use in Microsoft SharePoint 2010, this Event Calendar Listing Web Part displays events (or any calendar list) in a compact widget style calendar. It supports views and offers ajax support with rollover tooltip behaviour.
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.
EventCalendarListWebPart Web Part calls two custom Web controls,
EventListing, to render events.
EventCalendar is a custom Web control that inherits from
EventCalendar, events are fetched from a calendar list using a
SPQuery as follows:
<span id="ArticleContent"><Where> <DateRangesOverlap> <FieldRef Name="EventDate" /> <FieldRef Name="EndDate" /> <FieldRef Name="RecurrenceID" /> <Value Type="DateTime"><Month /></Value> </DateRangesOverlap> </Where> </span>
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. When a custom calendar view is specified, the view’s query will be used instead. This custom view should be based on the Calendar view type. 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:
<span id="ArticleContent"><Where> <DateRangesOverlap> <FieldRef Name="EventDate" /> <FieldRef Name="EndDate" /> <FieldRef Name="RecurrenceID" /> <Value Type="DateTime"><Now /></Value> </DateRangesOverlap> </Where> <OrderBy> <FieldRef Name="EventDate" /> </OrderBy> </span>
Again when a custom listing view is specified, the view’s query will be used instead. This custom view should be created based on the OOTB “Current Events” view.
EventCalendarListWebPart functions as a wrapper for
EventListing. It also wraps an
<a href="http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx">UpdatePanel</a> around
EventCalendar so clicking previous or next month does not cause the entire page to refresh. The web part has the following
SiteUrl– (Site URL) Server relative URL of the site. If left blank, current site is used.
ListTitle– (List Title) Name of a calendar list. Default is
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.
EnableAsyncUpdate– (Enable Asynchronous Update) Enabling this option will make month navigation work without full page refreshes. Experimental, may not work in all pages or browsers. Default is
ShowCalendar– (Show Calendar?) Default is
CalendarViewTitle– (Calendar View Name) Name of view based on Calendar view type.
FirstDayOfWeek– (First day of week) Default is
Default, i.e. as specified in system setting.
CssClassCalendar– (CSS class name for calendar control) This is the CSS class for the outermost calendar table.
CssClassTitle– (CSS class name for the title heading) This is the CSS class for the part where it says March, 2014 in the title.
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)
ShowListing– (Show Listing?) Default is
ListingViewTitle– (Listing View Name) Name of view based on Current Events view.
NumDaysInEventListing– (Number of days to show in event listing) Default is
3. Please note days with no events do not count.
CssClassEventListing– (CSS class name for event listing)
The web part comes with following default property values which reflect the same look and feel as shown in the preview screenshot shown at the top:
The Web Part also uses resource files to store all messages and property attribute UI strings. It calls a custom class that inherits
CategoryAttribute and returns a localized
string from your own Resource Manager.
The sample Visual Studio 2013 Update 1 solution includes all the support files you need to build and deploy this Web Part, minus the strong name key file. 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.
If you are upgrading from a previous version, please refer to Version History for any special upgrade instructions.
Open SharePoint 2010 Management Shell, add solution file QuestechSystems.SharePoint.EventCalendarList.wsp using
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.
Tips: To control the width of the calendar, specify a fixed width to the web part in the web part properties under Appearance.
- V2.0 – 2014.07.04
- Upgrade instructions from V1.1
- Delete all instances of old web parts.
- Retract old solution using PowerShell or via SharePoint 2010 Central Administration.
- Follow installation instructions as described in Installation section.
- Supports views.
- Experimental Ajax support so clicking previous or next month will not refresh the entire page. Turn on Enable Asynchronous Update to enable this feature. May not work in all pages/browsers.
- Built-in CSS on styling and rollover tooltip behaviour so no more dependence on external CSS.
- Upgrade instructions from V1.1
- 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