How can I update the DayPilot in modal after adding events?

Asked by Ahmed Mohamed
9 years ago.

Hi everyone,

I'm working on Angular based project using DayPilot and I used DayPilot modal to create popup that contains another Scheduler, once I clicked on the main Scheduler it should load the popup and show phases of the event.
The problem is that when I load the events and open the modal I can't see anything, but once I move the scroll the events appears.

So, How can I prevent this from happening? or how can update the view?

how-to javascript

Answer posted by Dan Letecky [DayPilot]
9 years ago.

The Scheduler needs to read its own dimensions after rendering in order to render the current viewport. This isn't possible if the Scheduler is in a hidden area of a page (e.g. in a <div> with display:none style). It includes a routine that detects when the Scheduler becomes visible and refreshes the viewport but it looks like it fails in case of the modal dialog (the modal dialog uses an iframe to display the content).

You can force the viewport to be rendered by calling dp.show(). In this case, you may need to execute it after a delay using setTimeout():

<script>
  var dp = new DayPilot.Scheduler("dp");
  // config ...
  dp.init();

  var timeout = 200;
  setTimeout(function() {
    dp.show();
  }, 200);
</script>

It's a workaround but the iframe can be tricky so it might be the most reliable way after all. You can tweak the timeout value to see what works best. You might also be able to replace the setTimeout with some kind of "onload" event (jQuery ready(), etc.).

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