Getting Started with the Calendar
This guide demonstrates how to get up and running with the Kendo UI for jQuery Calendar.
After the completion of this guide, you will achieve the following end result:
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true,
month: {
content: ({ value }) => {
if(value > 20) {
return `<div class='k-bg-primary k-rounded-md k-text-white'>${value}</div>`;
}
return value;
}
}
});
</script>
1. Create an Empty Div Element
First, create an empty div element from which the component will be initialized.
<div id="calendar"></div>
2. Initialize the Calendar
In this step, you'll initialize the Calendar component from the empty <div> element.
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();
</script>
3. Enable Selection
You can enable the selection functionality by setting the selectable property of the Calendar to true.
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
selectable: true
});
</script>
4. Enable Week Numbers
You can enable the week column by setting the weekNumber property of the Calendar to true.
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true
});
</script>
5. Configure the Month Template
You can change the appearance of the dates by using the month configuration.
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar({
selectable: true,
weekNumber: true,
month: {
content: ({ value }) => {
if(value > 20) {
return `<div class='k-bg-primary k-rounded-md k-text-white'>${value}</div>`;
}
return value;
}
}
});
</script>