views.slotTemplate String|Function

The template used to render the time slot cells.

The fields which can be used in the template are:

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

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

Example - set the slot template

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    {
      type: "day",
      slotTemplate: 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 slot based on resources

<div id="scheduler"></div>
<script id="slotTemplate" 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",
    slotTemplate: kendo.template($("#slotTemplate").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