Kendo UI Scheduler：自定义视图和编辑行为

Posted 2023-05-07

【中文标题】Kendo UI Scheduler：自定义视图和编辑行为

【英文标题】：Kendo UI Scheduler: Custom view and edit behavior

【发布时间】：2014-05-31 19:13:47

【问题描述】：

我这几天一直在研究这个问题，并搜索了各个论坛。无论是在堆栈溢出中，还是在 Telerik 自己的论坛中，都无济于事。

我在 MVC 应用程序中使用 Kendo UI 调度程序组件。下面是创建调度程序的 index.cshtml 的一部分。

@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Views(views =>  views.CustomView("ThreeDayView"); )
            .DataSource(d => d
                .Read("Read", "Home")
                .Create("Create", "Home")
                .Destroy("Destroy", "Home")
                .Update("Update", "Home")
            )
    )

在这个调度程序中，我使用了下面定义的自定义视图。这可以很好地使调度程序一次只显示 3 天。但是，第二天和前一天的功能不起作用。我假设我必须覆盖前一天和第二天的功能，但不确定如何。我期望发生的是视图一次提前 1 天（即 4 月 16 日至 18 日移动到 4 月 17 日至 19 日）。

我还想添加自定义编辑功能。我知道这听起来可能有点奇怪，但我实际上并不希望任何人能够编辑、添加或删除任何内容。只需将调度程序用作一种显示，然后在单击任务/事件时执行一些操作，我想做一些除了打开编辑窗口之外的事情（即设置一些变量）我认为这是通过覆盖可编辑完成的在下面的 jscript 中运行，但再次不确定如何。非常感谢任何帮助和/或示例

var ThreeDayView = kendo.ui.MultiDayView.extend(
            options: 
                selectedDateFormat: "0:D - 1:D"
            ,

            name: "ThreeDayView",

            calculateDateRange: function () 
                //create a range of dates to be shown within the view
                var selectedDate = this.options.date,
                    start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                    idx, length,
                    dates = [];

                for (idx = 0, length = 3; idx < length; idx++) 
                    dates.push(start);
                    start = kendo.date.nextDay(start);
                

                this._render(dates);
            
        );

【参考方案1】：

从 Telerik 板上得到了这个答案，我想我会分享一下，以防其他人遇到这个问题。

为了使自定义视图的行为与您描述的一样，nextDate 方法应该被覆盖以返回下一个开始日期。还 对于当前的实现，视图总是从第一个开始 星期几，不符合您正在查看的行为 为：

var ThreeDayView = kendo.ui.MultiDayView.extend(

    nextDate: function () 
        return kendo.date.nextDay(this.startDate());
    ,

    options: 
        selectedDateFormat: "0:D - 1:D"
    ,

    name: "ThreeDayView",

    calculateDateRange: function () 
        //create a range of dates to be shown within the view
        var //selectedDate = this.options.date,
            // start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
            start = this.options.date,
            idx, length,
            dates = [];

        for (idx = 0, length = 3; idx < length; idx++) 
            dates.push(start);
            start = kendo.date.nextDay(start);
        

        this._render(dates);
    
);

关于编辑功能。使用起来会更方便 调度程序编辑事件以防止弹出窗口显示并添加 自定义逻辑。

@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Events(events => events.Edit("edit"))
 )

<script type="text/javascript">
    function edit(e) 
        e.preventDefault();
        // do something here;
    
</script>

问候， 罗森

【讨论】：

虽然我已经实现了这个自定义视图，但它本身并没有显示我的事件。为什么会这样？

@esquare:: 面临同样的问题。你找到解决办法了吗？