How to style Kendo Scheduler's weekend

Question

I have kendo scheduler below, is there any way to set different background style for weekends.

 @(Html.Kendo().Scheduler<CalenderTaskModel>()
            .Name("scheduler")
            .Footer(false)
            .Editable(false)
            .EventTemplateId("eventTemplate")
            .Timezone("Etc/UTC")
            .Views(views =>
            {
                views.AgendaView(view => view.Title("Week"));
                views.MonthView(view => view.Selected(true).EventHeight(15).Title("Month"));
            })
            .Resources(resource =>
            {
                resource.Add(m => m.ResourceID)
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new[] {
                        new { Text = "Resource 1", Value = "Resource1"} ,
                        new { Text = "Resource 2", Value = "Resource2"}
                        });
            })
            .DataSource(d => d
            .Read("GetCalenderSummary", "Home"))
        )


       <script id="eventTemplate" type="text/x-kendo-template">
            # if(ResourceID === 'Resource1') { #
                <a class='t-resource1'>#: title #</a>
            # } else if (ResourceID === 'Resource2') { #
                <a class='t-resource2'>#: title #</a>
            # } #
        </script>

I am not looking to set background style of the event on weekend but i want to set the background of the day (weekend) itself.

So below is the sample picture i got from telerik's demo. The highlighted portion should be in different background color

Did you try any of the solutions below? – Shai Aug 16 '18 at 12:33 — Shai, Aug 16 '18 at 12:33

score 2 · Answer 1 · answered Apr 08 '18 at 12:57

You can use dayTemplate:

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

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/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.1.221/js/kendo.all.min.js"></script>
  
  <style>
    .k-scheduler-content td {
      padding: 0;
    }
    
    .weekend {
      background-color: red;
      height: 100%;
      padding: 5px;
    }
  </style>
  
</head>
<body>
  
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "month",
      dayTemplate: (e) => "<div" + (e.date.getDay() === 0 || e.date.getDay() === 6 ? " class='weekend'>" : ">") + e.date.getDate() + "</div>"
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>
</body>
</html>

score 1 · Accepted Answer · answered Apr 06 '18 at 22:02

Assuming that Sunday is always the first column and Saturday the last one, you could use the following css:

.k-scheduler-monthview .k-scheduler-table td:first-child,
.k-scheduler-monthview .k-scheduler-table td:last-child {
    background-color: grey;
}

score 0 · Answer 3 · answered Apr 08 '18 at 05:47

On dataBound event you can go through all days and check what kind of week day it is.

dataBound: function(e) {
    var view = this.viewName();

    if(view == 'week' || view == 'month'){
        var days = this.view().content.find("td");
        for(var i = 0; i < days.length; i++){
            var slot = this.slotByElement(days[i]);
            var date = new Date(slot.startDate);
            var isWeekend = date.getDay() == 0 || date.getDay() == 6;
            if(isWeekend){
                days[i].style.background = '#4CAF50'
            }
        }
    }
}

slotByElement method gets you a scheduler's day when you pass a Html element. From there you can check whether is weekend or not.

Working fiddle where weekends get marked for "week" and "month" views.

How to style Kendo Scheduler's weekend

3 Answers3