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>