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.