kendo-uikendo-asp.net-mvctelerik-mvckendo-scheduler

How to style Kendo Scheduler's weekend


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 enter image description here


Solution

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