DatePicker Calendar change background color for Mondays.

4 posts, 1 answers
  1. Masa
    Masa avatar
    5 posts
    Member since:
    Aug 2018

    Posted 17 Oct 2018 Link to this post

    Hi

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

  2. Georgi
    Admin
    Georgi avatar
    574 posts

    Posted 19 Oct 2018 Link to this post

    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.
  3. Masa
    Masa avatar
    5 posts
    Member since:
    Aug 2018

    Posted 19 Oct 2018 in reply to Georgi Link to this post

    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?

  4. Answer
    Georgi
    Admin
    Georgi avatar
    574 posts

    Posted 23 Oct 2018 Link to this post

    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.
Back to Top