2.1 KiB
2.1 KiB
| title | description | type | page_title | slug | tags | res_type | category |
|---|---|---|---|---|---|---|---|
| Customize the Colors inside the DatePicker Popup | An example on how you can customize the colors inside the popup of the Kendo UI for Vue Native DatePicker. | how-to | Customize the DatePicker Popup Colors - Kendo UI for Vue Native DatePicker | change-datepicker-popup-color | datepicker, popup, change, customize, color, kendovue | kb | knowledge-base |
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 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>
{% meta id:index height:400 %} {% embed_file change-datepicker-popup-colors/main.vue preview %} {% embed_file change-datepicker-popup-colors/CustomPopup.vue %} {% embed_file change-datepicker-popup-colors/styles.css %} {% embed_file change-datepicker-popup-colors/main.js %} {% endmeta %}