Click here to Skip to main content
11,645,349 members (72,349 online)
Click here to Skip to main content

Event Calendar Listing Web Part (SharePoint 2013)

, 5 Jul 2014 CPOL 29.2K 1.6K 13
Rate this:
Please Sign up or sign in to vote.
A SharePoint compact widget style calendar

 

Introduction

For use in Microsoft SharePoint 2013, 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.

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.

EventCalendar is a custom Web control that inherits from System.Web.UI.WebControls.Calendar. Days with events are rendered in Selected style with rollover tooltip showing a list of events on that particular day. The tooltip uses Dynamic Web Coding's JavaScript Tooltips. 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:

<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 EventCalendar and EventListing. It also wraps an UpdatePanel around EventCalendar so clicking previous or next month does not cause the entire page to refresh. The web part has the following public properties:

  • 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 Calendar.
  • 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 false.
  • ShowCalendar - (Show Calendar?) Default is true.
  • 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 true.
  • 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)

All JavaScript files are referenced through the use of ScriptLink while all CSS files are referenced through the use of CssRegistration.

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:

  • CssClassCalendar - ecl-calendar
  • CssClassDay - ecl-day
  • CssClassEvent - ecl-event
  • CssClassToday - ecl-today
  • CssClassWeekend - ecl-weekend
  • CssClassOtherMonth - ecl-other-month
  • CssClassEventListing - ecl-listing

The Web Part also uses resource files to store all messages and property attribute UI strings. It calls a custom class that inherits WebDescriptionAttribute, WebDisplayNameAttribute or 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.

Installation

If you are upgrading from a previous version, please refer to Version History for any special upgrade instructions.

Open SharePoint 2013 Management Shell, add solution file QuestechSystems.SharePoint.EventCalendarList.wsp using Add-SPSolution like

Add-SPSolution 
"C:\_deployment\QuestechSystems.SharePoint.EventCalendarList.wsp"

Go to SharePoint 2013 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.

Please note that though this Web Part is licensed under The Code Project Open License, JavaScript Tooltips is licensed separately under its own Terms of Use.

History

  • V1.2 - 2014.07.05 - Switched to Dynamic Web Coding's JavaScript Tooltips for better tooltip placement.
  • V1.1 - 2014.05.18 - Added option to turn on/off Ajax support.
  • V1.0 - 2014.03.29 - 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.

You may also be interested in...

Comments and Discussions

 
QuestionMuchas gracias! Pin
Member 1182906214-Jul-15 8:57
memberMember 1182906214-Jul-15 8:57 
QuestionI cant get this to work in Prod.When i click the webpart in th webpart gallery i get error :An unexpected error has occurred. Pin
Patrick Olurotimi Ige28-Jun-15 20:59
memberPatrick Olurotimi Ige28-Jun-15 20:59 
QuestionWebpart throwing error Pin
Sheik Mohamed Dhanish.M27-May-15 20:50
memberSheik Mohamed Dhanish.M27-May-15 20:50 
QuestionI want something more ... Pin
Hector Ignacio Varon Serrato19-May-15 10:24
memberHector Ignacio Varon Serrato19-May-15 10:24 
GeneralWorks like a charm Pin
darshanakula25-Mar-15 3:51
memberdarshanakula25-Mar-15 3:51 
QuestionHow to display events list based on chosen month Pin
Member 111509198-Jan-15 20:04
memberMember 111509198-Jan-15 20:04 
AnswerRe: How to display events list based on chosen month Pin
shalin113-Apr-15 3:02
membershalin113-Apr-15 3:02 
QuestionUnable to deploy solution - SharePoint 2013 Pin
Member 1132298019-Dec-14 6:22
memberMember 1132298019-Dec-14 6:22 
GeneralMy vote of 3 Pin
Rajat Sahani13-Dec-14 0:33
memberRajat Sahani13-Dec-14 0:33 
QuestionCalendar is not displayed,after adding a webpart Pin
Member 1029114221-Sep-14 21:22
memberMember 1029114221-Sep-14 21:22 
QuestionMini Calendar Pin
alvmad10-Sep-14 3:07
memberalvmad10-Sep-14 3:07 
QuestionSharePoint Online Pin
Member 110574463-Sep-14 18:47
memberMember 110574463-Sep-14 18:47 
QuestionInstall method was different than documented and having trouble linking to calendar Pin
Mirona (Mia) Constantinescu13-Aug-14 13:55
memberMirona (Mia) Constantinescu13-Aug-14 13:55 
AnswerRe: Install method was different than documented and having trouble linking to calendar Pin
Mirona (Mia) Constantinescu13-Aug-14 14:04
memberMirona (Mia) Constantinescu13-Aug-14 14:04 
BugOne or more field types are not installed properly. Go to the list settings page to delete these fields. Pin
Member 109932405-Aug-14 5:01
memberMember 109932405-Aug-14 5:01 
GeneralRe: One or more field types are not installed properly. Go to the list settings page to delete these fields. Pin
Stephen Huen9-Aug-14 5:58
memberStephen Huen9-Aug-14 5:58 
Questionwhen i mouse over on dates in calendar...i am not able to click on events in the box which is popup...this is moving too fast.. Pin
Member 1083726913-Jun-14 8:22
memberMember 1083726913-Jun-14 8:22 
AnswerRe: when i mouse over on dates in calendar...i am not able to click on events in the box which is popup...this is moving too fast.. Pin
Stephen Huen5-Jul-14 17:04
memberStephen Huen5-Jul-14 17:04 
QuestionNot showing calendar..After adding webpart to the page Pin
Member 1083726923-May-14 5:05
memberMember 1083726923-May-14 5:05 
AnswerRe: Not showing calendar..After adding webpart to the page Pin
Stephen Huen23-May-14 11:12
memberStephen Huen23-May-14 11:12 
GeneralRe: Not showing calendar..After adding webpart to the page Pin
Member 1083726924-May-14 8:42
memberMember 1083726924-May-14 8:42 
GeneralRe: Not showing calendar..After adding webpart to the page Pin
Stephen Huen28-May-14 10:19
memberStephen Huen28-May-14 10:19 
GeneralRe: Not showing calendar..After adding webpart to the page Pin
Member 1083726929-May-14 5:53
memberMember 1083726929-May-14 5:53 
Questionis it possible to develop the same solution as sand box solution ? Pin
Ravish Verma20-May-14 19:15
memberRavish Verma20-May-14 19:15 
QuestionChange month buttons Pin
Member 1061450612-May-14 4:06
memberMember 1061450612-May-14 4:06 
AnswerRe: Change month buttons Pin
Stephen Huen17-May-14 17:18
memberStephen Huen17-May-14 17:18 
GeneralRe: Change month buttons Pin
Dustin S21-May-14 9:19
memberDustin S21-May-14 9:19 
GeneralRe: Change month buttons Pin
Member 1061450622-May-14 0:26
memberMember 1061450622-May-14 0:26 
Questionclicking previous or next Pin
Member 108021747-May-14 10:13
memberMember 108021747-May-14 10:13 
AnswerRe: clicking previous or next Pin
Stephen Huen17-May-14 17:19
memberStephen Huen17-May-14 17:19 
GeneralMy vote of 2 Pin
Member 196287621-Apr-14 21:13
memberMember 196287621-Apr-14 21:13 

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 | Terms of Use | Mobile
Web04 | 2.8.150731.1 | Last Updated 5 Jul 2014
Article Copyright 2014 by Stephen Huen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid