Kendo UI Scheduler: How to create Custom templates

Question

we are looking for the possibilities to see and use the Kendo UI..

how and where to create the Custom event templates for a scheduler? where should i define and create the customAllDayTemplate as mentioned below? Any e.g?

created a Div with the Id on the page but the Div is also showing up?

            Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Screening>()
            .Name("scheduler")
            .Date(new DateTime(2013, 6, 13))
            .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
            .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
            .Height(600)
            .AllDayEventTemplateId("customAllDayTemplate")
            .Views(views =>
            {
            views.DayView();
            views.AgendaView();
            })
            .BindTo(Model)
            )

Answer 1

You can specify your event template in a separate script tag with the id you specified like so:

<script id="customAllDayTemplate" type="text/x-kendo-template">
  <div>Title: #: title #</div>
  <div>Atendees:
      # for (var i = 0; i < resources.length; i++) { #
        #: resources[i].text #
      # } #
  </div>
</script>

Or by calling .EventTemplate like so:

  Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Screening>()
        .Name("scheduler")
        .Date(new DateTime(2013, 6, 13))
        .StartTime(new DateTime(2013, 6, 13, 10, 00, 00))
        .EndTime(new DateTime(2013, 6, 13, 23, 00, 00))
        .Height(600)
        .EventTemplate(
        "<div class='customAllDayTemplate'>" +
            "<img src='" + Url.Content("~/Content/web/scheduler/") + "#= Image #' />" +
            "<p>" + 
                "#= kendo.toString(start, 'hh:mm') # - #= kendo.toString(end, 'hh:mm') #" + 
            "</p>" + 
            "<h3>#= title #</h3>" +
            "<a href='#= Imdb #'>Movie in IMDB</a>" +
        "</div>")
        .Views(views =>
        {
        views.DayView();
        views.AgendaView();
        })
        .BindTo(Model)
        )

See the kendo docs examples here and here.