Styling the Kendo UI Calendar header using CSS

Environment

Product Version 2019.2.619
Product Calendar for ProgressĀ® Kendo UIĀ®

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>

In this article
Not finding the help you need? Improve this article