Telerik ASP.NET Core Scheduler自定义按钮报错问题咨询

核心结论 #

你使用的Telerik Kendo UI for ASP.NET Core 2022.3.913版本中，Scheduler组件的SchedulerToolbarFactory确实没有Custom()扩展方法——这个方法是在2023.1.117版本才正式引入的，所以当前报错属于版本兼容性问题，并非配置遗漏。

旧版本替代实现方案（适用于2022.3.913） #

在不升级版本的前提下，可通过以下两种方式给Scheduler工具栏添加自定义按钮：

方式1：客户端事件动态插入按钮 #

利用Scheduler的DataBound事件，在组件渲染完成后手动向工具栏DOM中添加按钮：

@(Html.Kendo().Scheduler<Bron.Models.Views.SchedulerModel>()
    .Name("scheduler")
    .Date(DateTime.Now.Date)
    .StartTime(DateTime.Now.Date)
    .MajorTick(60)
    // 绑定数据完成事件
    .Events(e => e.DataBound("onSchedulerDataBound"))
    // 其他原有配置...
    .Timezone("Etc/UTC")
    .Group(group => group.Resources("Locations", "Places").Orientation(SchedulerGroupOrientation.Vertical))
    // 剩余配置省略...
)

<script>
function onSchedulerDataBound() {
    // 获取工具栏容器
    const toolbar = $(".k-scheduler-toolbar");
    // 创建自定义按钮
    const customBtn = $("<button class='k-button my-custom-button'>我的自定义按钮</button>");
    // 绑定点击逻辑
    customBtn.on("click", function() {
        // 这里替换为你的按钮功能
        console.log("自定义按钮触发");
    });
    // 将按钮插入工具栏末尾
    toolbar.append(customBtn);
}
</script>

方式2：自定义完整工具栏模板 #

通过.ToolbarTemplate()完全重写工具栏，按需保留默认控件并添加自定义按钮：

@(Html.Kendo().Scheduler<Bron.Models.Views.SchedulerModel>()
    .Name("scheduler")
    .Date(DateTime.Now.Date)
    .StartTime(DateTime.Now.Date)
    .MajorTick(60)
    // 自定义工具栏模板
    .ToolbarTemplate(@<text>
        <div class="k-scheduler-toolbar">
            <!-- 保留默认按钮（按需选择） -->
            @(Html.Kendo().Button().Name("todayBtn").Text("今天").HtmlAttributes(new { @class = "k-button" }).Events(e => e.Click("function(){ $('#scheduler').data('kendoScheduler').today(); }")))
            @(Html.Kendo().Button().Name("prevBtn").Icon("chevron-left").HtmlAttributes(new { @class = "k-button" }).Events(e => e.Click("function(){ $('#scheduler').data('kendoScheduler').previous(); }")))
            @(Html.Kendo().Button().Name("nextBtn").Icon("chevron-right").HtmlAttributes(new { @class = "k-button" }).Events(e => e.Click("function(){ $('#scheduler').data('kendoScheduler').next(); }")))
            
            <!-- 自定义按钮 -->
            <button class="k-button my-custom-button">我的自定义按钮</button>
            
            <!-- 视图切换下拉框（按需保留） -->
            @(Html.Kendo().DropDownList()
                .Name("viewSelector")
                .DataTextField("Text")
                .DataValueField("Value")
                .BindTo(new List<SelectListItem> {
                    new SelectListItem { Text = "日视图", Value = "day" },
                    new SelectListItem { Text = "周视图", Value = "week" },
                    new SelectListItem { Text = "月视图", Value = "month" }
                })
                .Events(e => e.Change("function(e){ $('#scheduler').data('kendoScheduler').view(e.sender.value()); }"))
            )
        </div>
    </text>)
    // 其他原有配置...
    .Timezone("Etc/UTC")
    .Group(group => group.Resources("Locations", "Places").Orientation(SchedulerGroupOrientation.Vertical))
    // 剩余配置省略...
)

升级版本后的验证要点 #

如果后续升级到2023.1.117及以上版本，使用toolbar.Custom()仍报错，需检查：

• 项目已正确引用对应版本的Telerik Kendo UI for ASP.NET Core NuGet包
• 视图页面引入的Kendo脚本、样式版本与NuGet包版本完全一致

内容的提问来源于stack exchange，提问作者Aziz Nortozhiev