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

Posted 2023-05-07

【中文标题】Kendo UI Scheduler：如何创建自定义模板

【英文标题】：Kendo UI Scheduler: How to create Custom templates

【发布时间】：2013-09-26 08:37:42

【问题描述】：

我们正在寻找查看和使用 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)
            )

【参考方案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。

【讨论】：

查看了事件模板（不是那么好），但我想错过了脚本标签。看起来他们在那里有一个新语法..谢谢

是的，Kendo 模板在我看来很挑剔，我不太关心它们的 Mvc 绑定。无论如何，祝你好运。