[ANGULAR] Removing an event made with DragCreate

[thomasb]

Hello,

In our app we are using the ability to create an event by drawing it on the scheduler.
We added a condition to not create an event if the start_date is before a certain point in time.

beforeEventEdit(event: { eventRecord, resourceRecord }) {
  const isEventInClosedMonths = this.checkIfEventInClosedMonths(event.eventRecord.start_date);
  if (isEventInClosedMonths) return false;
}

This code works as it prevents our create-event modal to show up, however the "drawned but cancelled event" (visually, the rectangle on the scheduler) is still visible. I'd like it to be removed. Is it possible?

Thanks,

[ghulam.ghous]

I believe you should try the below events instead of beforeEventEdit.

https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/EventDragCreate#event-beforeDragCreate
https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/EventDragCreate#event-beforeDragCreateFinalize

Also check this code snippet here: https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/EventDragCreate#conditionally-preventing-drag-creation

Does this help?

[thomasb]

I tried with those two events, they correctly prevent our events modal to popup, but it doesn't remove the drawned event.

To be more precise, the issue is in the case where the drag starts in an allowed era, and finishes in a forbidden era. The drag would start from the end_date, dragging right to left, to finish on the start_date.

beforeDragCreate() is good to prevent the drag if it starts from the forbidden era.

[alex.l]

Hi,

How should it work? If you start drag from allowed area, and moved cursor to forbidden area, it should disappear?
It sound logical to not allow start from forbidden area, but in case of drag over forbidden area, remove event only after drop. User can move over forbidden area but in fact drop it correctly.

[thomasb]

Hi,

"User can move over forbidden area but in fact drop it correctly."
Indeed.

I think there are two possibilities to handle the situation:

• while dragging, if the mouse starts hovering over the forbidden area then we would prevent to drag further left. i wanted to try this but couldn't find the proper event for dragging.
• remove the event only after drop: yes that would be ok too.

[alex.l]

Second one is easy to achieve using https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/EventDragCreate#event-beforeDragCreateFinalize and return false. Did you try it?

[thomasb]

When I use beforeDragCreateFinalize the event.eventRecord end_date somehow wasn't correct - I expected it to be the one of when the drag is dropped.

Meanwhile I was able to remove the drawn event with:

afterDragCreate(e) {
    const isEventInClosedMonths = this.checkIfEventInClosedMonths(e.eventRecord.startDate);
    if (isEventInClosedMonths) {
      e.eventRecord.remove();
      return false;
    }
}

[alex.l]

Could you pls elaborate what do you mean by incorrect? Which endDate did you take? To make sure, there is a context prop that has dates, did you use them or something else?
Please see https://bryntum.com/products/gantt/docs/api/SchedulerPro/model/CalendarModel#function-calculateEndDate that might be useful to calculate endDate for calendar using startDate and duration passed?

[marcio]

Hey thomasb,

You should use ev.context.endDate, as you can see in the video, it has the correct endDate value, and you can test it live by adding the following snippet to this demo https://bryntum.com/products/schedulerpro/examples/inline-data/.

beforeDragCreateFinalize: (ev) => {
                console.log(ev.context.endDate)
            }

[thomasb]

In beforeDragCreateFinalize I was using e.eventRecord.end_date, and it was very close to the start_date, something like 8 minutes away from it. I didn't really get it.
I didn't try with the context dates, I will do.
Thanks all for your support.