---
title: BasicCalendar
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
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.
> **Info:** **Derived from**: [ASP.NET Calendar](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.calendar)
> **Tip:** **Tip**: If you want to display pages from Kentico in a calendar, you can use the [CMSCalendar](https://docs.kentico.com/k10/references/kentico-controls/cms-controls/cms-controls-listings-and-viewers/cmscalendar.md) control, which has built-in support for loading Kentico pages.
## 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 __ tags. The overall code of the BasicCalendar control should look like this:
```html
<%-- BasicCalendar templates -------------------------------------------------------- --%>
<%# Eval("NewsTitle") %>
No Event
<%-- BasicCalendar templates -------------------------------------------------------- --%>
```
> **Info:** 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:
```csharp
using CMS.DocumentEngine;
```
5. Add the following code to the **Page\_Load** method:
```csharp
// Retrieves all news items from the Kentico database, and assigns them as the data source of the BasicCalendar control
BasicCalendar1.DataSource = DocumentHelper.GetDocuments("CMS.News").Path("/", PathTypeEnum.Children).OrderBy("NewsReleaseDate").TypedResult;
// Tells the control from which data field to load the date/time values
BasicCalendar1.DayField = "NewsReleaseDate";
BasicCalendar1.SelectedDate = DateTime.Now;
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:
| Property name | Description | Sample value |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| CustomTimeZone | Assigns a custom [time zone](https://docs.kentico.com/k10/configuring-kentico/configuring-time-zones.md) to the control as a _TimeZoneInfo_ object. | |
| DataMember | Name of the table when a DataSet is used as the DataSource. | |
| DataSource | Data source with calendar events - either a DataSet or DataTable object. | |
| DayField | Name of the field in the data source that contains the date/time value. | "NewsReleaseDate" |
| DayWithEventsStyle | Style of days that have an event. | |
| DisplayOnlySingleDayItem | Indicates whether only one item is displayed per day. | |
| HideDefaultDayNumber | Indicates whether the control displays the day numbers. If true, the used template fully fills the day cells. | |
| RelatedData | Custom data connected to the object. | |
| TimeZone | Specifies the [time zone](https://docs.kentico.com/k10/configuring-kentico/configuring-time-zones.md) type. | "Custom"
"Inherit"
"Server"
"User"
"WebSite" |
> **Note:** **Note**: The BasicCalendar inherits from the ASP.NET Calendar control, so you can also set any of the [base properties](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.calendar#properties).
## 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](http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx) 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:
| Template name | Description |
| ---------------- | ------------------------------------------------ |
| ItemTemplate | Template for displaying days with events. |
| NoEventsTemplate | Template for displaying days without any events. |