Sitefinity 5 – Events Calendar

Jared Johnson, 14 June 2012

In Sitefinity version 3 there was included an Events Calendar widget. However it was not included in Sitefinity 4 onwards.  Here is how you can recreate the Events Calendar in Sitefinity 5.

Sitefinity 3.7 Events Calendar 

Create a web user control called EventsCalendar.

In EventsCalendar.ascx implement this code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EventsCalendar.ascx.cs"    Inherits="SitefinityWebApp.Controls.EventsCalendar" %><telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel" Skin="Default"/>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel">
<telerik:RadScheduler ID="Calendar" runat="server" SelectedView="MonthView"
    DataKeyField="Id" DataStartField="StartTime" DataEndField="EndTime"
    DataDescriptionField="Url" DataSubjectField="Subject" OverflowBehavior="Expand" AllowDelete=false>
    <AppointmentTemplate>
    <a href="%Events page path%<%# Eval("Description") %>"><%# Eval("Subject") %></a>
    </AppointmentTemplate>
</telerik:RadScheduler>
</telerik:RadAjaxPanel>

The RadAjaxLoadingPanel is used so when the calendar is used, instead of reloading the page it displays a loading image while loading the next month for example.

%Events page path% is the path to the page where your events are displayed, open an event if you are unsure of this.

Finally in EventsCalendar.ascx implement this code:

using System;
using System.Linq;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Modules.Events;

namespace SitefinityWebApp.Controls
{
    public partial class EventsCalendar : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PopulateCalendar();
            }
        }

        protected void PopulateCalendar()
        {
            var manager = EventsManager.GetManager();
            var events = manager.GetEvents()
                .ToList()
                .Where(e => e.EventStart >= DateTime.UtcNow && e.Visible)
                .Select(e => new
                {
                    Id = e.Id,
                    StartTime = e.EventStart,
                    EndTime = e.EventEnd,
                    Subject = e.Title,
                    Url = e.Urls[0].Url
                });
            Calendar.DataSource = events;
            Calendar.DataBind();
        }
    } 

The line .Where(e => e.EventStart >= DateTime.UtcNow && e.Visible)  selects events to display on the calendar that are only now or in the future and are visible, you can change this if you wish for all events to be displayed or only events in the past etc.

With this code you will now have a events calendar running in Sitefinity 5, which will look like this: 

Events Calendar in Sitefinity 5