Getting Started with the MultiViewCalendar
This guide demonstrates how to get up and running with the Kendo UI for jQuery MultiViewCalendar.
After the completion of this guide, you will achieve the following end result:
<div id="multiviewcalendar"></div>
<script id="footer-template" type="text/x-kendo-template">
Today - #: kendo.toString(data, "d") #
</script>
<script>
$("#multiviewcalendar").kendoMultiViewCalendar({
format: "yyyy/MM/dd",
value: new Date(2023, 09, 12),
footer: kendo.template($("#footer-template").html())
});
</script>
1. Create an Empty Div Element
First, create an empty div element from which the MultiViewCalendar will be initialized. The element will also serve as a main container for the component.
<div id="multiviewcalendar"></div>
2. Initialize the MultiViewCalendar
In this step, you'll initialize the MultiViewCalendar component from the empty <div> element.
<div id="multiviewcalendar"></div>
<script>
$("#multiviewcalendar").kendoMultiViewCalendar();
</script>
3. Set the Date Format
The format option allows you to specify the format of the date when using the value method.
<div id="multiviewcalendar"></div>
<script>
$("#multiviewcalendar").kendoMultiViewCalendar({
format: "yyyy/MM/dd"
});
</script>
4. Set the Selected Date
You can preselect a date by using the value option.
<div id="multiviewcalendar"></div>
<script>
$("#multiviewcalendar").kendoMultiViewCalendar({
format: "yyyy/MM/dd",
value: new Date(2023, 09, 12)
});
</script>
5. Configure a Footer Template
You can set a footer for the MultiViewCalendar by using the footer option.
<div id="multiviewcalendar"></div>
<script>
$("#multiviewcalendar").kendoMultiViewCalendar({
format: "yyyy/MM/dd",
value: new Date(2023, 09, 12),
footer: kendo.template($("#footer-template").html())
});
</script>