CODEWITHSUNDEEP
kendo-ui
advapi
advapi

Reputation: 3907

kendoui scheduler change header color

I need to change those blu button color but I'm not able to find the correct selector (in my application I've got a site.css file that has all the custom css rules)

I've also search on the telerik's online reference for the kendoui scheduler but with no luck

enter image description here

Anyone can help me please? Thanks in advance

Upvotes: 0

Views: 373

Answers (1)

Shai
Shai

Reputation: 3882

You can use the following selectors:

Views:

.k-scheduler-views .k-link { // For all the views
    background: blue;
}

.k-view-day .k-link { // For day view only
    background: blue;
}

.k-view-week .k-link { // For week view only
    background: blue;
}

.k-view-month .k-link { // month-view-only
    background: blue;
}

Date navigation:

.k-scheduler-navigation .k-link { // For all date navigation controls, including arrows, "Today" and the date picker
    background: blue;
}

.k-nav-today .k-link { // For the "Today" button only
    background: blue;
}

.k-nav-prev .k-link { // For the previous arrow only
    background: blue;
}

.k-nav-next .k-link { // For the next arrow only
    background: blue;
}

.k-nav-current .k-link { // For the date picker only
    background: blue;
}

Note that you can find all of these selectors in the "Elements" tab of the Dev Tools of any browser.

Check out the snippet below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
  
    <style>
        .k-scheduler-navigation .k-link {
            background: blue;
        }

        .k-nav-today .k-link {
            background: green;
        }

        .k-nav-prev .k-link {
            background: red;
        }

        .k-nav-next .k-link {
            background: yellow;
        }

        .k-nav-current .k-link {
            background: cyan;
        }
      
        .k-scheduler-views .k-link {
            background: blue;
        }

        .k-view-day .k-link {
            background: green;
        }

        .k-view-week .k-link {
            background: red;
        }

        .k-view-month .k-link {
            background: yellow;
        }
    </style>
</head>
<body>
  
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: ["day", "week", "month", "agenda"],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    },
    {
      id: 2,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Meeting"
    }
  ]
});
</script>
</body>
</html>

Upvotes: 1

Related Questions