Kendo UI Scheduler: Custom view and edit behavior

问题

I've been looking into this for a few days now and searched the forums high and low. Both in stack overflow, as well as Telerik's own forums, to no avail.

I'm using a Kendo UI scheduler component in an MVC application. Below is part of the index.cshtml that creates the scheduler.

@(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")
            )
    )

In this scheduler I'm using a custom view defined below. This works fine in making the scheduler only show 3 days at a time. However the next day and previous day functionality doesn't work. I'm assuming I have to overwrite the previousday and nextday functionality, but am not sure how. What I expect to happen is for the view to advance 1 day at a time (i.e. April 16 - 18 moves to April 17 - 19).

Also I am wanting to add custom edit functionality. I know this might sound a bit weird, but I don't actually want anyone to be able to edit, add, or remove anything. Simply use the scheduler as a sort of display, and then perform some operation when the task / event is clicked on, I want to do something other then opening the edit window (i.e set some variable) I think this is done with overwriting the editable function in the below jscript, but again am not sure how. Any help and/or examples are greatly appreciated

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:

Got this answer from the telerik boards, thought I'd share in case anyone else runs across this problem.

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

来源：https://stackoverflow.com/questions/23117494/kendo-ui-scheduler-custom-view-and-edit-behavior