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:
<?

    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]
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) {
  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
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 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
4 days ago.

Thx Dan! That works!

New Reply
This reply is
Your name (optional):