BasicCalendar

The BasicCalendar control displays a calendar with events, news and other date-based pages specified by a data source. Provides advanced formatting capabilities and allows you to display additional information for individual days.

You can use the BasicCalendar with any bindable data source — not only Kentico data and objects.

Getting started

The following is a step-by-step tutorial that shows how to use the BasicCalendar control to display a calendar with links to news items (CMS.News pages) on days when news items were released:

1. Create a new Web form somewhere in your web project.

2. Drag the BasicCalendar control from the toolbox onto the form.

3. Add the following code marked by the BasicCalendar templates comments between the <cms:BasicCalendar> tags. The overall code of the BasicCalendar control should look like this:

   Copy

   
   
   
    <cms:BasicCalendar ID="BasicCalendar1" runat="server">
   
        <%-- BasicCalendar templates -------------------------------------------------------- --%>
        <ItemTemplate>
            <br/>
            <a href='<%# ResolveUrl(CMS.DocumentEngine.DocumentURLProvider.GetUrl(Convert.ToString(Eval("NodeAliasPath")), Convert.ToString(Eval("DocumentUrlPath")))) %>'>
                <%# Eval("NewsTitle") %>
            </a>
        </ItemTemplate>
   
        <NoEventsTemplate>
            <br>
            No Event
        </NoEventsTemplate>
   
        <%-- BasicCalendar templates -------------------------------------------------------- --%>
   
    </cms:BasicCalendar>
   
   
    

   This sets the template that specify the layout of days with and without news releases. For days with news releases, the control dynamically loads the values of the news pages from the data source.

4. Switch to the web form’s code behind and add the following references:

   Copy

   
   
   
    using CMS.DocumentEngine;
   
   
    

5. Add the following code to the Page_Load method:

   Copy

   
   
   
    // Retrieves all news items from the Kentico database as a DataSet, and assigns them as the data source of the BasicCalendar control
    BasicCalendar1.DataSource = TreeHelper.SelectNodes("/%", false, "cms.news", null, "NewsReleaseDate", -1, true);
   
    // Tells the control from which data field to load the date/time values
    BasicCalendar1.DayField = "NewsReleaseDate";
   
    BasicCalendar1.DataBind();
   
   
    

6. Save the changes to the web form and its code behind file.

7. Right-click the web form in the Solution explorer and select View in Browser.

The resulting page displays a calendar.

Configuration

You can set the following properties for the BasicCalendar control:

Appearance and styling

You can modify the appearance of the BasicCalendar control by setting the standard properties inherited from the ASP.NET Calendar control.

A common way to set the appearance of Calendar controls is to assign a skin through the SkinID property. You can define skins in .skin files under individual themes in the App_Themes folder. See the .NET Skins and Themes documentation for more information.

The design of day cells is determined by the code of the templates defined within the tags of the BasicCalendar control. The following templates are available: