Style the Calendar Header by Using CSS
Environment
Product Version | 2019.2.619 |
Product | Progress® Kendo UI® Calendar for jQuery |
Description
How can I configure the style of the header in the Kendo UI Calendar? Additionally, how can I change the color of the text and the icon in the header when hovering over them?
Solution
Here is an example of how to make custom changes in the header of the Calendar:
.k-calendar > .k-header {
border-color: #e0e0e0;
color: #ffffff;
background-color: #20a0ff;
}
To add styling to the text and the icon in the header when hovering over them, use the following CSS selector:
.k-link.k-nav-fast:hover,
.k-link.k-nav-prev:hover,
.k-link.k-nav-next:hover {
color: purple;
}
<style>
.k-calendar > .k-header {
border-color: #e0e0e0;
color: #ffffff;
background-color: #20a0ff;
}
.k-link.k-nav-fast:hover,
.k-link.k-nav-prev:hover,
.k-link.k-nav-next:hover {
color: purple;
}
</style>
<div id="calendar"></div>
<script>
$("#calendar").kendoCalendar();
</script>