Delete on mobile

I also tried to use custom active area icon. But on mobile, when we click on it, it always open the modal...

You can use an active area with the following properties.

This will ensure that the active area will be always visible:

visibility: "Visible"

Or you can make it permanently visible on touch devices. On other devices, it will be visible on hover:

visibility: "TouchVisible"

Using action: "None" will prevent the default action (the click/tap will not bubble up to the event):

action: "None"

So it could look like this:

dp.onBeforeEventRender = args => {
  args.data.areas = [
    {
      right: 5,
      top: 5,
      width: 17,
      height: 17,
      cssClass: "scheduler_default_event_delete",
      action: "None",
      visibility: "TouchVisible",
      onClick: args => { dp.events.remove(args.source); }
    }
  ];
};

This example is now included in the documentation as well:
https://doc.daypilot.org/scheduler/event-deleting/