New to Kendo UI for Vue? Start a free 30-day trial

Customize the Colors inside the DatePicker Popup

Environment

Product Version3.0.1
ProductProgress® Kendo UI for Vue Native

Description

How to customize the colors of the different elements inside the popup of the Kendo UI for Vue Native DatePicker?

Solution

Use the popup prop to pass a custom popup template to the DatePicker.

In the custom popup template we should use the Popup component and its popupClass property.

Once the value of the popupClass property is defined, we can use this value to apply styles to the different DOM elements inside the popup. Here are the styles used in the below example:

<style>
/* Set the background of the Popup */
.inner-wrapper .k-calendar,
.inner-wrapper .k-calendar table {
	background-color: #8bc34a;
}

/* Set the text color of the different elements inside the Popup */
.inner-wrapper .k-calendar,
.inner-wrapper .k-calendar table thead,
.inner-wrapper .k-calendar,
.inner-wrapper .k-calendar table td {
	color: #ffff00;
}

/* Style the current date and the "Today" button */
.inner-wrapper .k-calendar table td.k-today span.k-link,
.inner-wrapper .k-calendar div.k-calendar-header span {
	color: #0000ff;
}
</style>
Example
View Source
Change Theme:

In this article

Not finding the help you need?