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

Question

我这几天一直在研究这个问题，并搜索了各个论坛。无论是在堆栈溢出中，还是在 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);
            }
        });

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

问候， 罗森