ASP.NET Core Calendar Overview
The Calendar is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Calendar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Calendar widget.
The Calendar renders a graphical calendar that provides navigation and selection functionalities.
Initializing the Calendar
The following example demonstrates how to define the Calendar by using the Calendar HtmlHelper.
@(Html.Kendo().Calendar()
.Name("calendar") // The name of the Calendar is mandatory. It specifies the "id" attribute of the Calendar.
.Min(new DateTime(2010, 1, 1, 10, 0, 0)) // Set the min time of the Calendar.
.Max(new DateTime(2020, 1, 1, 20, 0, 0)) // Set the min date of the Calendar.
.Value(DateTime.Now) // Set the value of the Calendar.
)
<kendo-calendar name="calendar"
min="new DateTime(2010, 1, 1, 10, 0, 0)"
max="new DateTime(2020, 1, 1, 20, 0, 0)"
value="DateTime.Now">
</kendo-calendar>
Functionality and Features
- Date ranges—You can set a predefined selection range.
-
Day template—The Calendar enables you to customize the rendered day for the
monthview. - Week numbers
- Selection
- Disabled dates—The Calendar allows you to disable certain days which are not intended to be selected by the end user such as weekends, national holidays, and others.
- Accessibility—You can take advantage of the accessibility capabilities provided by the Calendar component.
- Century cells format—The component exposes two formats for the century cells.
- Reverse selection—The component allows you to pick an end date which is before the start date.
- Show other month days—The component allows you to control if the days from the previous/next months will be displayed.
Events
You can subscribe to all Calendar events. For a complete example on basic Calendar events, refer to the demo on using the events of the Calendar.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().Calendar()
.Name("calendar")
.Events(e => e
.Change("calendar_change")
.Navigate("calendar_navigate")
)
)
<script>
function calendar_navigate(e) {
// Handle the navigate event.
var calendar = e.sender;
}
function calendar_change(e) {
// Alerts the selected date with kendo.alert().
var calendar = e.sender;
kendo.alert(calendar.value());
}
</script>
<kendo-calendar name="calendar"
on-change="calendar_change"
on-navigate="calendar_navigate">
</kendo-calendar>
<script>
function calendar_navigate(e) {
// Handle the navigate event.
var calendar = e.sender;
}
function calendar_change(e) {
// Alerts the selected date with kendo.alert().
var calendar = e.sender;
kendo.alert(calendar.value());
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().Calendar()
.Name("calendar")
.Events(e => e
.Change(@<text>
function(e) {
// Handle the change event inline.
console.log(e.sender.value());
}
</text>)
.Navigate(@<text>
function(e) {
// Handle the navigate event inline.
console.log(e.sender);
}
</text>)
)
)
<kendo-calendar name="calendar"
on-change='function(e)
{
// Handle the change event inline.
console.log(e.sender.value());
}'
on-navigate='function(e)
{
// Handle the navigate event inline.
console.log(e.sender);
}'>
</kendo-calendar>
Referencing Existing Instances
To reference an existing Telerik UI Calendar instance, use the jQuery.data() configuration option. Once a reference is established, use the Calendar client-side API to control its behavior.
// Place the following after your Telerik UI Calendar for ASP.NET Core declaration.
<script>
$(function() {
// The Name() of the Calendar is used to get its client-side instance.
var calendar = $("#calendar").data("kendoCalendar");
});
</script>