Kendo UI Scheduler: customizing rooms header

Question

I'm using the Kendo UI Scheduler (open source) with the horizontal grouping, developing in ASP.NET MVC. I display different rooms in order that users can make bookings to one of these. But instead of the room name I also want to display some icons according to the equipment available in this room (ex: a beamer).

Here you can see an example of what I have now and what I want to have:

So my question: is it possible to include these icons in the header of my scheduler and how? + after clicking these the user should be redirected to the detail page of this room.

Thanks in advance!

Answer 1

We can achieve this by custom headers.

Use dateHeaderTemplate property of Kendo Scheduler. Read about this here: link

Basics of dateHeaderTemplate

   <div id="scheduler"></div>
    <script>
      $("#scheduler").kendoScheduler({
       date: new Date("2013/6/6"),
       dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'd')#</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>

Please refer below 2 posts to customize the header.

post 1

post 2

Rendering can be done in dataBound event

         dataBound: SchedulerView.Scheduler_DataBound,

Method

          Scheduler_DataBound: function () {
          //write logic here to 

          }

Answer 2

I believe (from your image) that you need to make a Custom View and replace the "Day" view with the Custom View. That should allow you some flexibility.

Since you are using the HTML5/JavaScript version of Kendo UI, here's an example project of developing a custom view: http://www.telerik.com/support/code-library/custom-view For those seeing this post that need the ASP.NET MVC version of the Custom View example, that is located here: http://www.telerik.com/support/code-library/custom-view-0286055de51d