Event changes length while moving

[Tim Fargo]

Let's say I have an event that goes from 9:00-10:00, and takes up 2 slots on the scheduler. When I drag that event to a different time, the faded image (while dragging) extends 3 slots, and appears to display over 8:30-10:00, but it will show 9:00-10:00 on the event, and when I release it does in fact save at 9:00-10:00.

 I don't think there is really anything too crazy about the properties of my grid, so I'm curious if this is something that has happened before that someone might be able to assist with? Here is the code for my grid just in case:

 

var scheduler = $("#scheduler").kendoScheduler({
    date: start,
    startTime: start,
    endTime: end,
    height: 435,
    width: 1310,
    editable: {
        template: $("#editor").html(),
        destroy: false,
        window: {
            title: "Edit Task"
        }
    },
    footer: false,
    dataBound: function (e) {
        CreateDropArea(this);
        SetColors(e);
    },
    views: [
        { type: "timeline", majorTick: 60, columnWidth: 50, eventHeight: 40, selected: true },
        { type: "timelineWeek", majorTick: 60, columnWidth: 50, eventHeight: 40 }
    ],
    timezone: "America/Phoenix",
    group: {
        resources: ["Assigned"],
        orientation: "vertical"
    },
    resources: [
        {
            field: "AssignedTo",
            name: "Assigned",
            dataSource: {
                transport: {
                    read: function(options) {
                        var resources = GetResources();
                        options.success(resources);
                    }
                }
            },
            title: "Assigned To"
        }
    ],
    dataSource: {
        batch: true,
        transport: {
            read: function (options) {
                var meetings = GetMeetings();
                options.success(meetings);
            },
            update: function (options) {
                UpdateMeeting(options.data.models);
            },
            create: function (options) {
                CreateMeeting(options.data.models);
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        schema: {
            model: {
                id: "meetingId",
                fields: {
                    meetingId: { from: "MeetingId", 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" },
                    isAllDay: { type: "boolean", from: "IsAllDay" }
                }
            }
        }
    }
}).data("kendoScheduler");

[Tim Fargo]

I've been able to temporarily "fix" my issue by adjusting the "left" and "width" style properties of $(".k-event-drag-hint") on the move event of the Scheduler, although I don't feel like I should need to do this. Is it maybe an issue with timezones, or how my dates are formatted?

[Georgi Krustev]

Hi Tim,

Indeed, the described resize behavior is not expected and something wrong happens with the widget in this case. I tried to replicate the issue on our end, but to no avail. Could you tried the demo and let me know whether I am missing something?

• http://dojo.telerik.com/eciji

The could be related to the used timezone and local DST change, but this is just guessing. In order to find the real cause of the issue, we will need to replicate it locally. Any assistance on this matter will be greatly appreciated.

Regards,
Georgi Krustev
Telerik

 

 

[Tim Fargo]

I was able to fix the issue last time I was looking at this (can't remember how though!) and now I am creating another scheduler that is much more straight forward, but it is happening again. This time I created a very small simple sample so that you can see the behavior, not sure what the issue is. In this particular example I'm not even using timezones, as I want the dates to be displayed in the user's current timezone. When you drag the event, you'll see that the hover image spans the space of 1.5 hours instead of 1 (the length of the event.

For some reason the styling is weird on the "today" view of the sample, but if you switch to yesterday (Jan 7th @ 9am Phoenix time to be exact) you'll see the event that I have created. Not worried about the styling issue since it is working fine in my actual project, but please note the size difference when dragging. Thanks!

[Georgi Krustev]

Hello Tim,

The styling is due to the "today styling", which is applied when rendered is today.

The incorrectly sized hint comes from the startTime/endTime option values. The include milliseconds, which confuses the slots creation and hence the drag is broken. You will need to define dates that has milliseconds equal to 0. Check the modified file.

Regards,
Georgi Krustev
Telerik

 

 

[Tim Fargo]

That was it, thank you! Glad I finally know what the cause of this is so I can avoid it from here on out.