Customize the Colors inside the DatePicker Popup

Environment

Product Version	3.0.1
Product	Progress® 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 must 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:

html

<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>

Change Theme

Theme

Loading ...