Get timeslot only works when viewing full day

[MIDAS]

Following on from my previous posts (here and here)

My scheduler has a timeline view where the user can specify his start and end times according to which shift they are on. The choices are Early (08:00 - 14:00), Late (14:00 - 22:00), Nights (22:00 - 06:00) or full day (00:00 to 23:59). I have discovered that the code in the linked posts will only work if the view is full day.

In order to try and figure out what is causing this I placed some console.log lines as so:

//Make the scheduler a drop area for drag and drop.
    function createDropArea(scheduler) {

        var grid = $("#grid").data("kendoGrid");

        scheduler.view().content.kendoDropTargetArea({
            filter: ".k-scheduler-table td, .k-event",
            drop: function (e) {

                var offset = $(e.dropTarget).offset();
                console.log('drop target: %0', $(e.dropTarget));
                var slot = scheduler.slotByPosition(offset.left, offset.top);
                console.log('slot startDate: ' + slot.startDate);
                console.log('slot start time: ' + slot.startDate.getTime());
                var slotResource = scheduler.resourcesBySlot(scheduler.slotByElement($(e.dropTarget)));
                console.log('slotResource: %0', slotResource.assignee);
                var dataItem = grid.dataItem(grid.select());
                var eventStart = slot.startDate;
                var eventEnd = new Date(slot.startDate.getTime() + (dataItem.end - dataItem.start));
                console.log('event start time: ' + eventStart);
                console.log('event end time  : ' + eventEnd);

                if (dataItem && slot) {
                    var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
                    var newEvent = {
                        eID: -1,
                        eClonedID: 0,
                        status: dataItem.status,
                        assignee: slotResource.assignee,
                        title: dataItem.title,
                        start: eventStart,
                        end: eventEnd,
                        requestType: dataItem.requestType,
                        lastUpdatedBy: $UserID,
                        isEvRecurring: dataItem.isEvRecurring,
                        isAllDay: dataItem.isAllDay,
                        startTimezone: dataItem.startTimezone,
                        endTimezone: dataItem.endTimezone,
                        clearNotes: dataItem.clearNotes,
                        resetToPlanned: dataItem.resetToPlanned,
                        replicateRecurrence: dataItem.replicateRecurrence,
                        moveDiff: dataItem.moveDiff,
                        deleteRecurring: dataItem.deleteRecurring
                    };

                    scheduler.dataSource.add(newEvent);

                    //clear selected row so that we don't have the issue of
                    //selected items being added when we are cloning or moving events.
                    grid.clearSelection();
                }

            }
        });
    }

 

When the scheduler that shows the full day and I drag & drop onto the 09:00 slot the console outputs....

drop target: %0 jQuery.fn.init [td..k-nonwork-hour]
TEST:2089 slot startDate: Tue Nov 26 2019 09:00:00 GMT+0000 (Greenwich Mean Time)
TEST:2090 slot start time: 1574758800000
TEST:2092 slotResource: %0 138
TEST:2096 event start time: Tue Nov 26 2019 09:00:00 GMT+0000 (Greenwich Mean Time)
TEST:2097 event end time  : Tue Nov 26 2019 10:30:00 GMT+0000 (Greenwich Mean Time)

This will render the event correctly.

When the scheduler is showing just 06:00 to 14:00 and I drag & drop onto the 09:00 slot the console outputs....

drop target: %0 jQuery.fn.init [td]
TEST:2089 slot startDate: Tue Nov 26 2019 09:00:00 GMT+0000 (Greenwich Mean Time)
TEST:2090 slot start time: 1574758800000
TEST:2092 slotResource: %0 138
TEST:2096 event start time: Tue Nov 26 2019 09:00:00 GMT+0000 (Greenwich Mean Time)
TEST:2097 event end time  : Tue Nov 26 2019 10:30:00 GMT+0000 (Greenwich Mean Time)

Here the event is not rendered at all.

The only difference I can see is the drop target. On the one that works we have drop target: %0 jQuery.fn.init [td..k-nonwork-hour] while on the one that does not we have drop target: %0 jQuery.fn.init [td]

Totally lost on this one... any help appreciated.

 

[Ivan Danchev]

Hello,

Here's a dojo example in which the Scheduler's timeline view is set and a record from the Grid can be dragged onto the Scheduler, which creates an event at the respective timeslot: https://dojo.telerik.com/odoPIgIF

Could you modify the example accordingly, adding your logic for specifying the start and end times of the view, if needed for the issue to be reproduced, and link the example back for further review?

Regards,
Ivan Danchev
Progress Telerik