Build A Custom Calendar Web Part for SharePoint 2010

Reference:

http://jerryyasir.wordpress.com/2009/10/12/using-asp-calendar-control-to-show-sharepoint-events/

http://www.codeproject.com/Articles/78532/Event-Calendar-Listing-Web-Part-SharePoint-2010

Project:

A calendar web part which will show monthly events in a compact view with a list of all monthly events under the calendar.

Since neither the OOTB SharePoint calendar nor any existing online solutions can meet our requirements, I decided to build a custom calendar web part using ASP.NET calendar control.

As you can see from the following screenshots which were taken from the finished portal site, the date with events are highlighted in the monthly view. The event list under the web part shows all events in the current monthly view of the calendar.

 

When user mouses over any specific day in the calendar, the day will be highlighted with different color. When user clicks on the date, if there are any events for that day, the event list will be filtered to show only events from that day.

When user navigants to the other month, the caledar view will change accordingly.

Clicking on "Add an event" and any event in the event list will trigger a modal dialog window which will let user to add a new event or view the event just as working with the OOTB calendar.

Implementation:

The calendar web part is implemented using Visual Studio 2010 visual web part.

The ascx file contains the ASP.NET calendar control and a literal control for the event list.

<asp:Calendar ID="SPCalendar" CssClass="ECal" TitleStyle-CssClass="ECalTitle" TodayDayStyle-CssClass="ECalToday" OtherMonthDayStyle-ForeColor="#AAAAAA" TodayDayStyle-BackColor="#F6F4CC" DayStyle-ForeColor="#676767" runat="server" OnDayRender="SPCalendar_DayRender" OnSelectionChanged="SPCalendar_SelectionChanged" OnVisibleMonthChanged="SPCalendar_VisibleMonthChanged">
        </asp:Calendar>

<asp:Literal ID="EventList" runat="server"></asp:Literal>

Query the Calendar List

The most noticeable differences between querying a ordinary list and a SharePoint calendar list is the query. The CAML query used to query a calendar list has difference syntax. Using the ordinary CAML query to query a calendar list may not cover the special situation such as recurrence events.

     SPWeb web = SPContext.Current.Site.RootWeb;
            SPList calendarList = web.Lists.TryGetList(WebPart.EventListName);
            if (calendarList == null)
                throw new SPException("Events list is not found");
 
            SPQuery query = new SPQuery();
            query.ExpandRecurrence = true;
            query.CalendarDate = dateTime;
            query.Query = @"
<Where>
    <DateRangesOverlap>
        <FieldRef Name='EventDate' />
        <FieldRef Name='EndDate' />
        <FieldRef Name='RecurrenceID' />
        <Value Type='DateTime'><Month /></Value>
    </DateRangesOverlap>
</Where>
<OrderBy><FieldRef Name='EventDate' Ascending='True' /></OrderBy>
";
            query.ViewFields = "<FieldRef Name=\"EventDate\" /><FieldRef Name=\"EndDate\" /><FieldRef Name=\"Title\" />";
 
            SPListItemCollection items = calendarList.GetItems(query);
            int count = 0;
            if (items.Count > 0)
            {
                foreach (SPListItem item in items)
                {...

The above query gets all events for the current monthly view which includes a few days from the previous month and a few days from next months.
To get the events for a particular day, use this query

            query.Query = @"
<Where>
    <DateRangesOverlap>
        <FieldRef Name='EventDate' />
        <FieldRef Name='EndDate' />
        <FieldRef Name='RecurrenceID' />
        <Value Type='DateTime'><Today /></Value>
    </DateRangesOverlap>
</Where>
<OrderBy><FieldRef Name='EventDate' Ascending='True' /></OrderBy>
";

After querying the calendar list for events, save the event's start date and end day in a data structure such as List<KeyValuePair<DateTime, DateTime>> eventsInMonth; for use when render the day's background color in the "DayRender" event of the ASP.NET calendar.

Implement the following ASP.NET calendar events to render the calendar and update the calendar corresponding to different events such as when using clicking on a date or navigating to next month.

protected void SPCalendar_DayRender(object sender, DayRenderEventArgs e)
{}

protected void SPCalendar_SelectionChanged(object sender, EventArgs e)
{}

protected void SPCalendar_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{}

Happy SharePointing!