This is a migrated thread and some comments may be shown as answers.

Event changes length while moving

5 Answers 199 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Tim Fargo
Top achievements
Rank 1
Tim Fargo asked on 07 Nov 2015, 12:30 AM

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");

5 Answers, 1 is accepted

Sort by
0
Tim Fargo
Top achievements
Rank 1
answered on 09 Nov 2015, 04:52 PM
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?
0
Georgi Krustev
Telerik team
answered on 11 Nov 2015, 07:59 AM
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? 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim Fargo
Top achievements
Rank 1
answered on 08 Jan 2016, 05:00 PM

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!

0
Accepted
Georgi Krustev
Telerik team
answered on 12 Jan 2016, 01:55 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tim Fargo
Top achievements
Rank 1
answered on 12 Jan 2016, 07:44 PM
That was it, thank you! Glad I finally know what the cause of this is so I can avoid it from here on out.
Tags
Scheduler
Asked by
Tim Fargo
Top achievements
Rank 1
Answers by
Tim Fargo
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or