2

这几天我一直在研究这个问题，并搜索了论坛的高低。堆栈溢出以及 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);
            }
        });
4

1 回答 1

2

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

问候， 罗森

于 2014-04-17T15:59:04.613 回答