Add Controls to the Custom Event Editor of the Scheduler

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 add Kendo UI controls to a custom event editor in the Scheduler?

Solution

The following example demonstrates how to achieve the desired scenario.

    <div id="scheduler"></div>
    <script>
      $(function() {
        $("#scheduler").kendoScheduler({
          date: new Date("2025/6/13"),
          startTime: new Date("2025/6/13 07:00 AM"),
          height: 600,
          views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda"
          ],
          timezone: "Etc/UTC",
          dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/service/v2/core/tasks"
                },
                update: {
                    url: "https://demos.telerik.com/service/v2/core/tasks/update",
                    type: "POST",
                    contentType: "application/json"
                },
                create: {
                    url: "https://demos.telerik.com/service/v2/core/tasks/create",
                    type: "POST",
                    contentType: "application/json"
                },
                destroy: {
                    url: "https://demos.telerik.com/service/v2/core/tasks/destroy",
                    type: "POST",
                    contentType: "application/json"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return 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" }
                    }
                }
            },
            filter: {
              logic: "or",
              filters: [
                { field: "ownerId", operator: "eq", value: 1 },
                { field: "ownerId", operator: "eq", value: 2 }
              ]
            }
          },
          resources: [
            {
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
              ]
            }
          ],
          edit: function(e) {
                var container = e.container;

                /* ACTION: Ading a custom button. */
                var newButton = $('<a class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" href="#">New button</a>');

                // Wire its click event.
                newButton.click(function(e) { alert("Clicked"); });

                // Add the button to the container.
                var buttonsContainer = container.find(".k-edit-buttons");
                buttonsContainer.append(newButton);

                /* ACTION: Accessing the DropDownList control. */
                container.find("[data-container-for=ownerId]")
                .find("[data-role=dropdownlist]")
                .data("kendoDropDownList")
                .wrapper.width("400px");
          }
        });

        $("#people :checkbox").change(function(e) {
          var checked = $.map($("#people :checked"), function(checkbox) {
            return parseInt($(checkbox).val());
          });

          var scheduler = $("#scheduler").data("kendoScheduler");

          scheduler.dataSource.filter({
            operator: function(task) {
              return $.inArray(task.ownerId, checked) >= 0;
            }
          });
        });
      });
    </script>

See Also

• Basic Usage of the Kendo UI for jQuery Scheduler (Demo)
• Using the API of the jQuery Scheduler (Demo)
• JavaScript API Reference of the Scheduler
• jQuery Scheduler Product Page