Edit this page

views.dayTemplate String |Function

The template used to render the day slots in month view.

The fields which can be used in the template are:

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

The dayTemplate option is supported when views.type is set to "month".

Example - set the day template in month view

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

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

    <span style="height:100%;color:black;background-color:#:color#">
      #=kendo.toString(date, "d")#
    </span>
</script>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [{
    type: "month",
    dayTemplate: kendo.template($("#dayTemplate").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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy