I am using Scheduler control from Kendo. I am trying to render daily capacity (Hard coded 30% now) in header of each day as shown in below screen. How can I replace hard coded b
You could use scheduler databound
event to modify its date header template, and you have to use string temporary character inside that template which will be replaced by current day capacity value.
<span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>
You can use this selector to get date header element
$(".k-scheduler-header .k-scheduler-table th span.k-nav-day")
Then change its text inside scheduler databound
event. I have make a dojo for this, hopes this help you understand.
-----------Answer for updated question 1--------------
If you have a collection of object rather than array of string, it doesn't matter. You could replace it, but with another tweak in the code.
You should add the date value as data attribute in date header template
<script id="tmpDateHeader" type="text/x-kendo-template">
<span class="k-nav-day" data-dt="#=kendo.toString(date, 'dd/MM/yyyy')#">
<u>#=kendo.toString(date, "dd/M")#</u> - ({dc}%)
</span>
</script>
and use it like this
$("#scheduler").kendoScheduler({
dateHeaderTemplate: kendo.template($("#tmpDateHeader").html())
}
You can see we have data attribute data-dt
here and it should have same format with value in date property of daily capacity data source. Then you have to get that attribute value to find matched object in your data source.
// code in scheduler databound inside each scope
var dateOfHeader = $(this).data("dt"); // get date value from template
var matchData = // find in data source, where object.date == dateOfHeader
var newtext = text.replace("{dc}", matchData.percentage);
I hope you can do the rest.
-----------Answer for updated question 2--------------
to change its container background use this
$(this).parent().css("background-color", actualColor[index]);