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>

此致罗森

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

1 个答案: