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("2022/6/13"),
            startTime: new Date("2022/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