asp.net-mvc - Kendo UI 调度程序 : Custom view and edit behavior

Question

我已经研究这个问题几天了，并在论坛上到处搜索。无论是在stackoverflow还是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")
            )
    )

在此调度程序中，我使用下面定义的自定义 View 。这可以很好地使调度程序一次只显示 3 天。但是，第二天和前一天的功能不起作用。我假设我必须覆盖前一天和第二天的功能，但不知道如何覆盖。我期望发生的情况是 View 一次前进 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 板上得到这个答案，我想我会分享以防其他人遇到这个问题。

In order the custom view to behave as you have described, the nextDate method should be overridden to return the next to the start date. Also with the current implementation the view always starts at the first day of the week, which does not comply to the behavior you are looking for:

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

Regarding the edit functionality. It will be easier to use the scheduler edit event to prevent the popup from showing and to add the custom logic.

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

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

Regards, Rosen