ASP.NET Core MultiViewCalendar Overview
The MultiViewCalendar 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 MultiViewCalendar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI MultiViewCalendar widget.
The MultiViewCalendar renders a graphical Gregorian calendar with multiple horizontal views.
Initializing the MultiViewCalendar
- Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET Core.
-
Create a new action method which renders the view.
public ActionResult Index() { return View(); }
-
Add a MultiViewCalendar.
@(Html.Kendo().MultiViewCalendar() .Name("MultiViewCalendar") // The name of the MultiViewCalendar is mandatory. It specifies the "id" attribute of the widget. .Min(new DateTime(2010, 1, 1, 10, 0, 0)) // Set the min time of the MultiViewCalendar. .Max(new DateTime(2010, 1, 1, 20, 0, 0)) // Set the min date of the MultiViewCalendar. .Value(DateTime.Now) // Set the value of the MultiViewCalendar. )
<kendo-multiviewcalendar name="multiviewcalendar" min="new DateTime(2010, 1, 1, 10, 0, 0)" max="new DateTime(2010, 1, 1, 20, 0, 0)" value="DateTime.Now"> </kendo-multiviewcalendar>
Functionality and Features
Events
You can subscribe to all MultiViewCalendar events.
Handling by Handler Name
The following example demonstrates how to subscribe to events by a handler name.
@(Html.Kendo().MultiViewCalendar()
.Name("MultiViewCalendar")
.Events(e => e
.Change("calendar_change")
.Navigate("calendar_navigate")
)
)
<script>
function calendar_navigate() {
// Handle the navigate event.
}
function calendar_change() {
// Handle the change event.
}
</script>
<kendo-multiviewcalendar name="multiviewcalendar"
on-change="calendar_change"
on-navigate="calendar_navigate">
</kendo-multiviewcalendar>
<script>
function calendar_navigate() {
// Handle the navigate event.
}
function calendar_change() {
// Handle the change event.
}
</script>
Handling by Template Delegate
The following example demonstrates how to subscribe to events by a template delegate.
@(Html.Kendo().MultiViewCalendar()
.Name("MultiViewCalendar")
.Events(e => e
.Change(@<text>
function() {
// Handle the change event inline.
}
</text>)
.Navigate(@<text>
function() {
// Handle the navigate event inline.
}
</text>)
)
)
<kendo-multiviewcalendar name="multiViewCalendar"
on-change='function() {
//Handle the change event inline.
}'
on-navigate='function() {
//Handle the navigate event inline.
}'>
</kendo-multiviewcalendar>