Kendo UI Scheduler：如何创建自定义模板

Question

我们正在寻找查看和使用 Kendo UI 的可能性。

如何以及在何处为调度程序创建自定义事件模板？ 我应该在哪里定义和创建 customAllDayTemplate，如下所述？ 有吗？

使用页面上的 Id 创建了一个 Div，但该 Div 也显示出来了？

            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

您可以使用您指定的 id 在单独的脚本标签中指定您的事件模板，如下所示：

<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>

或者像这样调用 .EventTemplate：

  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)
        )

请参阅剑道文档示例 here 和 here。