如何使用 Ajax 在 Kendo UI Scheduler 中显示事件

Question

嗨，我正在尝试使用提供的演示链接构建 Kendo UI Scheduler：-https://demos.telerik.com/kendo-ui/scheduler/index

它成功地从数据库中读取数据，但问题是当我创建新事件时，数据已成功保存到数据库中，但在不重新加载页面的情况下不会立即显示到 UI 中。 我的代码如下：-

<script>
        var data;
        var eventList = new Array();
        function GetEventData() {
        $.ajax({
            url: "/SchedulerEvent/GetAllEvents",
            dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
            success: function (result, textStatus, xhr) {
                eventList = [];
                // notify the data source that the request succeeded
                //console.log(result);
                //console.log(xhr.status);
                //data=result;
                var items = '';
                $.each(result, function (i, item) {

                    var rows = {
                        id: item.Id,
                        title: item.Title,
                        image: item.Image,
                        start: new Date(item.Start),
                        end: new Date(item.End),
                        recurrenceRule: item.RecurrenceRule,
                        attendee: item.PersonId
                    }
                    eventList.push(rows);
                });
               //console.log(eventList);
            },
            error: function (result) {
                // notify the data source that the request failed
            }
        });
        }
       
        $(document).ready(function () {
        var GetReponse = GetEventData();
           
        var EventDataNextID = eventList.length + 1;

        //function getIndexById(id) {
        //    var idx,
        //        l = eventList.length;

        //    for (var j = 0; j < l; j++) {
        //        if (eventList[j].id == id) {
        //            return j;
        //        }
        //    }
        //    return null;
        //}
        $(function () {
            var dataSource = new kendo.data.SchedulerDataSource({
                transport: {
                    //Read Events
                    read: function (e) {
                        e.success(eventList);
                    },
                    //Create New Event
                    create: function (e) {
                         //// This is only example
                         //       e.data.id = EventDataNextID++;
                         //        eventList.push(e.data);
                         //        e.success(e.data);
                         //       console.log(eventList);
                         ////

                        var StartDate = moment(e.data.start);
                        e.data.start = StartDate.format("DD/MM/YYYY HH:mm:ss");
                        var EndDate = moment(e.data.end);
                        e.data.end = EndDate.format("DD/MM/YYYY HH:mm:ss");
                       
                        $.ajax({
                            type: 'POST',
                            url: '/SchedulerEvent/Add',
                            data: e.data
                        })
                            .done(function (result) {
                                    //Not working
                                 //$("#scheduler").data("kendoScheduler").dataSource.read();
                                  //  $("#scheduler").data("kendoScheduler").refresh();
                            })
                            .fail(function (request, status, error) {
                                toastr.options.positionClass = 'toast-top-center';
                                toastr.error('Event Create Request failed: ' + request.responseText);
                            });
                       
                    },
                    //TODO Update Event
                    update: function (e) {
                        schedulerTasks[getIndexById(e.data.id)] = e.data;
                        e.success();
                    },
                    //TODO Delete Event
                    destroy: function (e) {
                        schedulerTasks.splice(getIndexById(e.data.id), 1);
                        e.success();
                    }
                },
                error: function (e) {
                    alert("Status: " + e.status + "; Error message: " + e.errorThrown);
                },
                batch: false,
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            id: { type: "number" },
                            title: { field: "title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", field: "start" },
                            end: { type: "date", field: "end" },
                            recurrenceRule: { from: "recurrenceRule" },
                            attendee: { field: "attendee", defaultValue: 1 },
                            image: { from: "image", defaultValue: "", },
                        }
                    }
                }
            });

            $("#scheduler").kendoScheduler({
                date: new Date("2023/4/4"),
                startTime: new Date("2023/4/4 7:00"),
                endTime: new Date("2023/4/4 20:00"),
                height: 600,
                views: [
                    "day",
                    { type: "week", selected: true },
                    "workWeek",
                    "month",
                    "agenda",
                ],
                timezone: "Etc/UTC",
                eventTemplate: $("#event-template").html(),
                dataSource: dataSource,
                resources: [
                    {
                        field: "attendee",
                        dataSource: [
                            { text: "Jason", value: 1, color: "#eaf8ff" },
                            { text: "Maddie", value: 2, color: "#fdfdf4" }
                        ]
                    }
                ]

            });
        });
        });
   </script>