Passing function for event area click

Asked by Yacoo
3 years ago.

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

Main file:

<?

    dp.events.load("../system/TL_sys_bloki.php");
?>

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) {
      DayPilot.Modal.alert(args.source.text());
    },
    "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]
3 years ago.

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

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
    {left: 0, top: 0, width: 20, height: 20, backColor: "red", onClick: function(args) { DayPilot.Modal.alert(args.source.text()); } }
  ];
}

Comment posted by Yacoo
3 years 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
3 years ago.

Dan help please :-)

Comment posted by Dan Letecky [DayPilot]
3 years 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 args.data.start and args.data.end.

You can also send the areas from the server without onClick and use onBeforeEventRender to add onClick to the existing args.data.areas[] 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
3 years ago.

Thx Dan! That works!

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

Passing function for event area click

Products

Learn

Get Support

DayPilot Pro