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

Passing function for event area click

Asked by Yacoo
7 days ago.

Hi, I have problem with passing function for event area onlick method.

Main file:

TL_sys_bloki.php file:

  "id": "<?=$dane_timeline[$ix]['id'];?>",
  "text": "<?=$dane_timeline[$ix]['text'];?>",
  "start": "<?=$dane_timeline[$ix]['start'];?>",
  "end": "<?=$dane_timeline[$ix]['stop'];?>",
  "resource": "<?=$dane_timeline[$ix]['resource'];?>",
  "color": "<?=$dane_timeline[$ix]['color'];?>",
  "join": "1",
  "bubbleHtml": "Testing bubble",    
  "areas": [{	      
    "onClick": function (args) {
    "bottom": "9",
    "width": "60",
    "html": "<i class='mdi mdi-alert'></i> <?=$dane_timeline[$ix]['id'];?>",
    "top": "3",
    "left": "2",
    "visibility": "Hover",	            
    "backColor": "yellow"				            

None of the option works (with or without " '):

 ""onClick": function (args) { DayPilot.Modal.alert(args.source.text()); },"

pls help

Answer posted by Dan Letecky [DayPilot]
6 days ago.

The best way is to remove the "areas" property from TL_sys_bloki.php and add it using onBeforeEventRender:

dp.onBeforeEventRender = function(args) { = [
    {left: 0, top: 0, width: 20, height: 20, backColor: "red", onClick: function(args) { DayPilot.Modal.alert(args.source.text()); } }
Comment posted by Yacoo
6 days ago.

Thx Dan. But I need to set it for every single day on all events (for example if event takes 5 days there will be 5 areas etc.) and click on the specific area will add some info for that event and that day. So I think I need to define it where the events are defined?

Comment posted by Yacoo
5 days ago.

Dan help please :-)

Comment posted by Dan Letecky [DayPilot]
5 days ago.

You can generate multiple areas using JavaScript as well. It would be more efficient than sending it from the server. Just add a loop that goes through the days between and

You can also send the areas from the server without onClick and use onBeforeEventRender to add onClick to the existing[] items.

However, this might not be necessary at all - you can read the current date position in onEventClick handler using getCoords():

dp.onEventClick = function(args) {
  var time = dp.getCoords().time;
  var day = time.getDatePart();
  console.log("time, day", time, day);
Comment posted by Yacoo
4 days ago.

Thx Dan! That works!

New Reply
This reply is
Your name (optional):