Search code examples
datetimekendo-uikendo-scheduler

Kendo UI Scheduler TimeZone issue


On creation of an new event, the data is getting stored and fetched appropriately from db. However, kendo ui scheduler does not show that properly. For instance, I created an event for "2016-10-31 09:00:00.000", which is shown on UI in "2016-10-30 10:00 PM". I verified the value which is returned by the service, it comes as 1477864800000, and on console it is getting printed as "Mon Oct 31 2016 09:00:00 GMT+1100 (AUS Eastern Daylight Time)".

Please advice, where all I need to mentioned timezone: "Etc/UTC", or what can be going wrong in my JS code.

            $(function () {
                    $("#scheduler").kendoScheduler({
                        date: new Date(),            
                        height: 600,
                        views: [
                          "day",
                          { type: "week", selected: true },
                          "month"
                        ],
                        editable: {
                            template: $("#customEditorTemplate").html(),
                        },
                        timezone: "Etc/UTC",
                        error: error_handler,            
                        dataSource: {
                            timezone: "Etc/UTC",
                            batch: true,                
                            transport: {
                                read: {
                                    url: "GetCalendarEvents",
                                    contentType: "application/json; charset=utf-8",
                                    dateType: "json"
                                },
                                update: {
                                    url: "UpdateCalendarEvent",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json"
                                },
                                create: {
                                    url: "InsertCalendarEvent",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json"
                                },
                                destroy: {
                                    url: "DeleteCalendarEvent",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation === "read") {
                                        var scheduler = $("#scheduler").data("kendoScheduler");

                                        var result = {
                                            CreatedDate: new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate(), 0, 0, 0, 0), 
                                            EndDate: new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 0, 0, 0, 0),
                                            Creator: 1378 // ToDo::                                
                                        }

                                        return { models: kendo.stringify(result) };
                                    }

                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    }
                                }
                            },
                            schema: {
                                model: {
                                    "id": "EventID",
                                    "fields": {
                                        "EventID": {
                                            "type": "number"
                                        },
                                        "InteractionID":{
                                            "type":"number"
                                        },
                                        "title": {
                                            "from": "Subject",
                                            "validation": { required: true }
                                        },
                                        "description": {
                                            "from": "Content"
                                        },
                                        "start": {
                                            "from": "CreatedDate",
                                            "type": "date"
                                        },
                                        "end": {
                                            "from": "EndDate",
                                            "type": "date"
                                        },
                                        "ownerId": {
                                            "from": "Creator",
                                            "type": "number"
                                        },
                                        "location": {
                                            "from": "Location",
                                            "type": "string"
                                        },
                                        "Attendees": {
                                            "type": "object"
                                        },
                                        "startTimezone": {
                                            "defaultValue": "Etc/UTC"
                                        },
                                        "endTimezone": {
                                            "defaultValue": "Etc/UTC"
                                        }
                                    }
                                }
                            }
                        }
                    });
                });

Solution

  • The solution was to set the CreatedDate and EndDate in UTC format in entity class.

        private System.DateTime _endDate;
        public DateTime EndDate
        {
            get
            {
                return _endDate;
            }
            set
            {
                _endDate = new DateTime(value.Value.Ticks, DateTimeKind.Utc);
            }
        }
    

    Also, setting the timeZone in DataSource and Schema is not required. Just at Scheduler level should be fine.

    Hope that helps.