search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

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

Asked by Danijel
1 month ago.

Hello,

we update the DayPilot every 6 months.

After the latest update to version 2024.3.6130 our Area actions are not triggering anymore with the “js” property.

In the docs it’s mentioned that is legacy for MVC and Forms, but we use it with a web service in vanilla JavaScript:

  • "JavaScript" - custom JavaScript specified using "js" property is fired on click/tap (works on touch devices) - this is a legacy value used in ASP.NET WebForms and ASP.NET MVC versions

So we push data with Area = “JavaScript” and js = “function(e) { console.log(e.id()); }”.

Nothing happens when clicking on it.

If this was removed with the new version, how do we set a click event otherwise?

We load event with ajax, so the js field is text, not javascript code directly.

Comment posted by Danijel
1 month ago.

I had a typo: Action = “JavaScript”

Answer posted by Dan Letecky [DayPilot]
1 month ago.

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);
      }
    }
  ];
}
Comment posted by Danijel
1 month ago.

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
    }
}];
Comment posted by Danijel
1 month ago.

I do have the onEventClick event populated.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

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
    }
}];
Comment posted by Danijel
1 month ago.

I removed the

clickArgs.preventDefault();

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

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.