[REACT] event drop between two schedulers(paired) not writing data on eventDrop event
Hey!
Im currently running two SchedulerPros paired to allow me to drag and drop tasks between the schedulers (set up as shown in the demo).
I have a small issue when im adding some logic to one of the two schedulers. When I drop events into this scheduler (both from itself and from its sibling scheduler), I want to set its resourceId and its startDate/endDate according to customFields on the event. Since I want to still alow dragging between schedulers, I didnt find a way to use the eventDrag features validatorFn (this prevented draging to the sibling scheduler) and instead opted for the eventDrop event listener. So this all works fine when im moving events inside the same scheduler. But when im moving an event from the first scheduler to the second scheduler(with the eventDrop function) it doesnt move the event, but instead plops it down where I drop it.
Im doing a pretty vanilla setup so Im guessing this is a problem where some events arent triggered when an event is dragged from external scheduler (im unsure if the events are deleted from the scheduler when its dragged to the paired one, or if its just assigned?) looking forward for some pointers
Config for the scheduler
const config = {
ref: 'taskScheduler',
cls: 'planning-task-scheduler',
flex: '1 0 50%',
startDate: dateUtils.startOfToday(),
endDate: dateUtils.endOfToday(),
viewPreset: {
base: 'hourAndDay',
timeResolution: {
unit: 'minute',
increment: 1,
},
shiftUnit: 'day',
},
features: {
cellEdit: false,
dependencies: false,
eventDrag: {
// Allow drag outside of this Scheduler
constrainDragToTimeline: false,
},
eventDragCreate: false,
eventDragSelect: false,
eventResize: false,
headerMenu: false,
timeAxisHeaderMenu: false,
sort: false,
cellMenu: false,
eventMenu: false,
scheduleMenu: false,
scheduleTooltip: false,
eventTooltip: {
allowOver: true,
template: (data: any) =>
UnplannedActionTooltip(data.eventRecord.data, localization),
},
},
columns: [
{
field: 'firstName',
renderer: ({ record }: { record: Customer }) =>
getName({
firstName: record.firstName,
givenName: record.givenName,
lastName: record.lastName,
}) ?? '',
text: translate(planningLabels.unplannedTasks),
width: 165,
draggable: false,
},
],
removeUnassignedEvent: true,
createEventOnDblClick: false,
selectionMode: { row: false, cell: false },
enableDeleteKey: false,
zoomOnMouseWheel: false,
zoomOnTimeAxisDoubleClick: false,
multiEventSelect: false,
listeners: {
eventDrop({ source, context }: any) {
context.eventRecord.resourceId = context.eventRecord.customerId;
context.eventRecord.startDate = context.eventRecord.possibleStartDate;
context.eventRecord.endDate = context.eventRecord.possibleEndDate;
},
async beforeEventDropFinalize({ source: scheduler, context }: any) {
context.async = true;
if (
context.eventRecords[0].taskType === TaskTypeEnumV1.break ||
context.eventRecords[0].taskType === TaskTypeEnumV1.report
) {
context.finalize(false);
return;
}
context.finalize(true);
},
},
};
second scheduler
const config = {
ref: 'planningScheduler',
cls: 'planning-plan-scheduler',
flex: '1 0 50%',
startDate: dateUtils.startOfToday(),
endDate: dateUtils.endOfToday(),
viewPreset: {
base: 'hourAndDay',
timeResolution: {
unit: 'minute',
increment: 1,
},
shiftUnit: 'day',
},
features: {
cellEdit: false,
dependencies: false,
eventDrag: {
// Allow drag outside of this Scheduler
constrainDragToTimeline: false,
},
eventDragCreate: false,
eventDragSelect: false,
eventResize: false,
headerMenu: false,
timeAxisHeaderMenu: false,
sort: false,
cellMenu: false,
eventMenu: false,
scheduleMenu: false,
scheduleTooltip: false,
eventTooltip: {
allowOver: true,
template: (data: any) =>
PlannedActionTooltip(data.eventRecord.data, localization),
},
resourceTimeRanges: true,
cellTooltip: true,
},
columns: [
{
field: 'employeeFirstName',
renderer: ({ record }: { record: WorkShift }) =>
getName({
firstName: record.employeeFirstName,
givenName: record.employeeGivenName,
lastName: record.employeeLastName,
}) ?? '',
text: translate(planningLabels.plannedTasks),
width: 165,
draggable: false,
tooltipRenderer: ({ record }: { record: WorkShift }) =>
HeaderTooltip(record, localization),
},
],
selectionMode: { row: false, cell: false },
createEventOnDblClick: false,
removeUnassignedEvent: true,
enableDeleteKey: false,
zoomOnMouseWheel: false,
zoomOnTimeAxisDoubleClick: false,
multiEventSelect: false,
listeners: {},
};