views.allDaySlotTemplate String|Function

The template used to render the all day slot cell.

The fields which can be used in the template are:

  • date - represents the slot date.
  • resources() - returns the relevant resources for the current slot.

The allDaySlotTemplate option is supported when views.type is set to "day", "week" or "workWeek".

Example - set the date header template

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      allDaySlotTemplate: kendo.template("<strong>#=kendo.toString(date)#</strong>")
    }
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ]
});
</script>

Example - modify the all day slot based on resources

<div id="scheduler"></div>
<script id="allDaySlotTemplate" type="text/x-kendo-template">
    # var resources = data.resources(); #
    # var color = resources.roomId === 1 ? "red" : "blue"; #

    <span style="background: #=color#">
      #=kendo.toString(date, "d")#
    </span>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [{
    type: "day",
    allDaySlotTemplate: kendo.template($("#allDaySlotTemplate").html())
  }],
  group: {
    resources: ["Rooms"]
  },
  resources: [
    {
      field: "roomId",
      name: "Rooms",
      dataSource: [
        { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
        { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
      ],
      title: "Room"
    }
  ]
})
</script>
In this article
Not finding the help you need? Improve this article