Loading Scheduler in Modal initially does not display until window is resized

Scheduler
#1

I am trying to display the scheduler within a modal on a page. The modal is toggled with a button and when the modal opens up, only the ‘dhx_cal_date’ is displayed (16 Sept 2019 - 22 Sept 2019).

The moment I resize the modal or the full browser window (event just one pixel), the whole scheduler then displays along side the events.

This is the code for the modal:

<div id="modalA" class="modal_view_notification" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal_body" style="height: 100%;">
        <div class="row">
            <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100vh;'>
                <div class="dhx_cal_navline">
                    <div class="dhx_cal_prev_button">&nbsp;</div>
                    <div class="dhx_cal_next_button">&nbsp;</div>
                    <div class="dhx_cal_today_button"></div>
                    <div class="dhx_cal_date"></div>
                </div>
                <div class="dhx_cal_header"></div>
                <div class="dhx_cal_data"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    scheduler.config.readonly = true;
    scheduler.config.time_step = 30;
    scheduler.config.hour_size_px = 88;
    scheduler.config.show_loading = true;
    scheduler.config.start_on_monday = true;

    //Set the schedule to only be able to book events for the next 3 months
    var dt = new Date();
    dt.setMonth(dt.getMonth() + 3);

    scheduler.config.limit_start = new Date();
    scheduler.config.limit_end = dt;
    scheduler.config.limit_view = true;

    scheduler.init('scheduler_here', null, "week");
</script>
#2

Hi Draklin,
If I understand you correctly - your problem could have occurred cause you initialize scheduler(scheduler.init()), before opening the modal window, like in the following snippet: http://snippet.dhtmlx.com/b4b4d687f

To avoid this problem, you can use a scheduler.setCurrentView() method. It will repaint the scheduler and update its sizes. You could see the example in this snippet: http://snippet.dhtmlx.com/e15fb71af
API docs:
https://docs.dhtmlx.com/scheduler/api__scheduler_setcurrentview.html

You can try another approach and start the scheduler, that is invoked by scheduler.init() and scheduler.parse() after the modal window is fully loaded. In my example, I doing this, by invoking the scheduler inside showModal() function. You could see it in this snippet: http://snippet.dhtmlx.com/c3d008761

FYI. if your modal window appears in asynchronous mode(with animations), then you should update the scheduler only after the animation/transition of the modal window is completed so that the scheduler can get the final dimensions of the modal window. I don’t know what modal windows you work with, but usually, there is either a callback or an API event that you can use. Alternatively, you can use setTimeout and refresh scheduler from there, just pick some delay value that will work.

#3

Perfect, thank you!

I don’t know how I missed that :man_facepalming: