[REACT] Drop new item onto calendar at the right date/time

[asharafshahi]

Hi,
I created a new class extending DragHelper and providing a function to handle the 'drop' event. I instantiate the new 'Drag' class by passing a Grid and Calendar refs. My implementation loosely follows https://www.bryntum.com/examples/scheduler/dragfromgrid/ with the exception that much of the code doesn't work for the Calendar due to differences between Calendar and Scheduler.

When the drop event handler function is called, I'm able to get the date via context.target.getAttribute('data-date'). I then call me.calendar.calendarInstance.eventStore.add and pass an object with the start/end times and some additional details I need. All of this seems to work reasonably well.

I need one thing to get this fully functional:
How can I determine the start time where the user had the mouse when they dropped the item? I can't find any of the helpers that exist for Scheduler that allow me to get the time based on coordinates.

Thanks
Arman

[alex.l]

Hi asharafshahi,

Did you try https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineDateMapper#function-getDateFromXY ?

onDrop({ context }) {
        const
            me                   = this,
            { left, right, top } = context.element.getBoundingClientRect(),
            scheduler            = me.scheduler,
            // get rounded dates by drop coordinates
            startDate            = scheduler.getDateFromXY([left, top], 'round', false),
            endDate              = scheduler.getDateFromXY([right, top], 'round', false),
            [...]
}

All best,
Alex

[asharafshahi]

Alex,
I did try that but me.scheduler is undefined. I am using Bryntum Calendar. I also tried me.calendar but it doesn't have any getDate... methods.

Arman

[alex.l]

Hi Arman,

Yes, that's my fault. I checked your license information and decided we are talking about the scheduler.
Drag-n-drop behaviour implemented in a different way for the Scheduler and the Calendar.

How can I determine the start time where the user had the mouse when they dropped the item?

Doesn't data-date attribute give you this information? What view we are talking about? month, day/week?
What do you want to achieve?

All best,
Alex

[asharafshahi]

The data-date attribute is always just the date portion of where the user dropped the item (e.g. 2020-10-23) regardless of the view. What I want to achieve inside the onDrop method is to know if the user dropped the item at 10:00am or 11:00am or some other time on a given day. This wouldn't apply to the month view but on day and week views the user could then specifically drop the item at the time of the day when they want it to occur.

Thanks,
Arman

[dongryphon]

There are some undocumented methods that could be helpful:

• getDateFromElement(element)

• getDateFromEvent(event)

• getDateFromPosition(clientX, clientY)

These methods are implemented on the various calendar views, so from a Calendar instance, check activeView. We can likely document these since they are definitely useful.

[asharafshahi]

Dongryphon,
Thank you for your brilliant response, it solved my problem perfectly
For others that might encounter this post and have a similar need here is what I ended up implementing:

onTaskDrop({ context, event }) {
	const me = this
	const { task, target } = context
	const domEventDate = me.calendar.calendarInstance.activeView.getDateFromEvent(event)
	
// this is a Javascript Date object that accurately represents where the mouse cursor was when the user dropped
// I do some additional tweaking of the time to correct for the Y position of the mouse within the picked up task
// leaving that detail out of here...

... // add task to event store
}