DayPilot.Area action = "JavaScript" is marked as Legacy, what now?

I had a typo: Action = “JavaScript”

The js string property is no longer supported in the JavaScript version because it requires eval(), which many frameworks and code analyzers mark as insecure.

I recommend adding the active areas using onBeforeEventRender instead of sending them with the event data from the server.

You can handle the click using the onClick event. Setting action: "JavaScript" is not necessary.

You can use something like this:

onBeforeEventRender: args => {
  args.data.areas = [
    {
      // ...
      onClick: clickArgs => {
        const e = clickArgs.source;
        console.log("active area clicked", e);
      }
    }
  ];
}

Thank you for the fast response. I managed to rewrite the code and it works now fine.

There is one issue tough.

I’m using action: “None” but it seems that it’s still bubbling the click event to the parent element.

According to the docs, ti shouldn't:

• "None" - no action, the click event will not bubble to the parent element

Here is my code:

args.data.areas = [{
    visibility: "Hover",
    action: "None",
    width: 15,
    height: 15,
    top: 0,
    left: 5,
    html: "<em class='fas fa-info'></em>",
    onClick: (clickArgs: any): void => {
        clickArgs.preventDefault();
        //my code
    }
}];

I do have the onEventClick event populated.

To prevent click bubbling using action: "None", you must not call clickArgs.preventDefault() in the onClick handler. Calling preventDefault() prevents the action from being processed.

args.data.areas = [{
    visibility: "Hover",
    action: "None",
    width: 15,
    height: 15,
    top: 0,
    left: 5,
    html: "<em class='fas fa-info'></em>",
    onClick: (clickArgs: any): void => {
        //my code
    }
}];

You can also work with the original JavaScript event object in onClick. You can access it as clickArgs.originalEvent.

args.data.areas = [{
    visibility: "Hover",
    width: 15,
    height: 15,
    top: 0,
    left: 5,
    html: "<em class='fas fa-info'></em>",
    onClick: (clickArgs: any): void => {
        clickArgs.originalEvent.stopPropagation();
        //my code
    }
}];

I removed the

clickArgs.preventDefault();

And now it works. Thank you very much for the support.