New to Kendo UI for jQuery? Download free 30-day trial

Update the Opposite Picker Value of the Scheduler on Model Change

Environment

Product Progress Kendo UI Scheduler for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I update the opposite start/end picker value on model change in a Kendo UI Scheduler widget?

Solution

The following example demonstrates how to achieve the desired scenario.

<div id="scheduler"></div>
<script>
    var proxy;

    var changeHandler = function(e) {
        var editContainer = $(".k-scheduler-edit-form");
        var uid = editContainer.attr("data-uid");

        var event = this.occurrenceByUid(uid);

        var startInputs = editContainer.find("[data-container-for=start]").find("input");
        var endInputs = editContainer.find("[data-container-for=end]").find("input");

        /*
            // Update the model by using the last values of the widget.
            if (e.field === "start" || e.field === "end") {
                startInputs.add(endInputs).each(function() {
                    var element = $(this);
                    var widgetType = element.is("[data-role=datepicker]") ? "kendoDatePicker" : "kendoDateTimePicker";

                    element.data(widgetType).trigger("change");
            });
            }
         */

        // Move the end date on start update.
        if (e.field === "start") {
            var date = new Date(event.start);
            date.setMinutes(date.getMinutes() + 30);

            endInputs.each(function() {
                var element = $(this);
                var widgetType = element.is("[data-role=datepicker]") ? "kendoDatePicker" : "kendoDateTimePicker";

                element.data(widgetType).value(date);
                element.data(widgetType).trigger("change");
            });
        };
    }

    $(function() {
        $("#scheduler").kendoScheduler({
            edit: function(e) {
                proxy = $.proxy(changeHandler, this);
                e.event.bind("change", proxy);
            },
            cancel: function(e) {
                e.event.unbind("change", proxy);
            },
            save: function(e) {
                e.event.unbind("change", proxy);
            },
            date: new Date("2013/6/13"),
            startTime: new Date("2013/6/13 07:00 AM"),
            height: 600,
            views: [
                "day", {
                    type: "workWeek",
                    selected: true
                },
                "week",
                "month",
                "agenda", {
                    type: "timeline",
                    eventHeight: 50
                }
            ],
            timezone: "Etc/UTC",
            dataSource: {
                batch: true,
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                    }
                },
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: {
                                from: "TaskID",
                                type: "number"
                            },
                            title: {
                                from: "Title",
                                defaultValue: "No title",
                                validation: {
                                    required: true
                                }
                            },
                            start: {
                                type: "date",
                                from: "Start"
                            },
                            end: {
                                type: "date",
                                from: "End"
                            },
                            startTimezone: {
                                from: "StartTimezone"
                            },
                            endTimezone: {
                                from: "EndTimezone"
                            },
                            description: {
                                from: "Description"
                            },
                            recurrenceId: {
                                from: "RecurrenceID"
                            },
                            recurrenceRule: {
                                from: "RecurrenceRule"
                            },
                            recurrenceException: {
                                from: "RecurrenceException"
                            },
                            ownerId: {
                                from: "OwnerID",
                                defaultValue: 1
                            },
                            isAllDay: {
                                type: "boolean",
                                from: "IsAllDay"
                            }
                        }
                    }
                }
            },
            resources: [{
                field: "ownerId",
                title: "Owner",
                dataSource: [{
                    text: "Alex",
                    value: 1,
                    color: "#f8a398"
                }, {
                    text: "Bob",
                    value: 2,
                    color: "#51a0ed"
                }, {
                    text: "Charlie",
                    value: 3,
                    color: "#56ca85"
                }]
            }]
        });
    });
</script>

See Also

In this article