Question

我需要更改那些蓝色按钮的颜色，但是我找不到正确的选择器（在我的应用程序中，我有一个包含所有自定义css规则的site.css文件）

我也在Telerik的在线参考中搜索kendoui调度程序，但是没有运气

有人可以帮助我吗？预先感谢

Answer 1

您可以使用以下选择器：

观看次数：

.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;
}

日期导航：

.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;
}

请注意，您可以在任何浏览器的开发工具的“元素”标签中找到所有这些选择器。

查看下面的代码段。

<!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>

kendoui Scheduler更改标题颜色

1 个答案: