This is a migrated thread and some comments may be shown as answers.

DatePicker Calendar change background color for Mondays.

3 Answers 744 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Masa
Top achievements
Rank 1
Masa asked on 17 Oct 2018, 06:58 PM

Hi

Is there any way to change the background color of all Mondays of the calendar of a MVC datepicker?

3 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 19 Oct 2018, 10:38 AM
Hello Masa,

A possible solution is to create a custom template via the month.content configuration as in the below demo:


Below you will find a small sample which demonstrates the above approach:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Masa
Top achievements
Rank 1
answered on 19 Oct 2018, 05:00 PM

Thank you for your response. It works on the text level background.

I should have been more specific but looking for a way to do it by modifying the 'td' element's class, the parent class of the cell's text (span) element.

such as:

<td class="k-other-month yellow">

<a>30</a>

</td>

is the td's class element accessible?

0
Accepted
Georgi
Telerik team
answered on 23 Oct 2018, 12:59 PM
Hello Masa,

Currently the date picker does not have a configuration for setting a class to the cell element. However, you could style the template to cover the whole cell.

e.g.

.yellow {
    background-color: yellow;
    width: 100%;
    height: 100%;
}
 
.k-calendar-container [data-role="calendar"] .k-link,
.k-calendar-container [data-role="calendar"] td,
.k-calendar-container [data-role="calendar"] tr {
    margin: 0;
    padding: 0;
}

Below you will find a small sample which demonstrates the above approach:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Date/Time Pickers
Asked by
Masa
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Masa
Top achievements
Rank 1
Share this question
or