kendoui scheduler change header color
up vote
0
down vote
favorite
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
Anyone can help me please?
Thanks in advance
kendo-ui
asked Nov 21 at 14:11
advapi
1,00311130
add a comment |
up vote
0
down vote
favorite
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
Anyone can help me please?
Thanks in advance
kendo-ui
asked Nov 21 at 14:11
advapi
1,00311130
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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
Anyone can help me please?
Thanks in advance
kendo-ui
asked Nov 21 at 14:11
advapi
1,00311130
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
Anyone can help me please?
Thanks in advance
kendo-ui
kendo-ui
asked Nov 21 at 14:11
advapi
1,00311130
asked Nov 21 at 14:11
advapi
1,00311130
asked Nov 21 at 14:11
advapi
1,00311130
asked Nov 21 at 14:11
advapi
1,00311130
asked Nov 21 at 14:11
advapi
1,00311130
1,00311130
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
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>answered Nov 21 at 14:45
Shai
1,6272622
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
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>answered Nov 21 at 14:45
Shai
1,6272622
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
add a comment |
up vote
1
down vote
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>answered Nov 21 at 14:45
Shai
1,6272622
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
add a comment |
up vote
1
down vote
up vote
1
down vote
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>answered Nov 21 at 14:45
Shai
1,6272622
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><!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><!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>answered Nov 21 at 14:45
Shai
1,6272622
edited Nov 25 at 10:45
answered Nov 21 at 14:45
Shai
1,6272622
answered Nov 21 at 14:45
Shai
1,6272622
answered Nov 21 at 14:45
Shai
1,6272622
1,6272622
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
add a comment |
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
Thanks for your answer, but what if I want to keep the exact layout (your button respect to kendo are smaller )
– advapi
Nov 21 at 15:01
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
The size of the buttons isn't affected by the applied style. Did you try adding this style to your code? If you do, you'll see that the size doesn't change, only the color does.
– Shai
Nov 22 at 8:10
Did you try this solution?
– Shai
Nov 25 at 10:45
Did you try this solution?
– Shai
Nov 25 at 10:45
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413959%2fkendoui-scheduler-change-header-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
