FullCalendar不会自动呈现日历（JQUERY向导）吗？

Question

我正在尝试在现有项目easyappointments中添加fullCalendar，尤其是在名为 book.php 的文件中。

当我为向导充电时，它仅显示，导航按钮：

但是，当我单击导航按钮之一时，便可以查看日历。

当向导收费时，我该怎么做才能强制显示日历？

这是我的代码：

   $(document).ready(function() {


                        $('#calendar').fullCalendar({
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay'
                                },
                                defaultDate: '2019-11-20',
                                navLinks: true,
                                eventLimit: true,
                                events: [{
                                        title: 'Front-End Conference',
                                        start: '2019-11-16',
                                        end: '2019-11-18'
                                    },
                                    {
                                        title: 'Hair stylist with Mike',
                                        start: '2019-11-20',
                                        allDay: true
                                    },
                                    {
                                        title: 'Car mechanic',
                                        start: '2019-11-14T09:00:00',
                                        end: '2019-11-14T11:00:00'
                                    },
                                    {
                                        title: 'Dinner with Mike',
                                        start: '2019-11-21T19:00:00',
                                        end: '2019-11-21T22:00:00'
                                    },
                                    {
                                        title: 'Chillout',
                                        start: '2019-11-15',
                                        allDay: true
                                    },
                                    {
                                        title: 'Vacation',
                                        start: '2019-11-23',
                                        end: '2019-11-29'
                                    },
                                ]
                            });



 <div id="wizard-frame-2" class="wizard-frame" style="display:none;">
                <div class="frame-container" >

                    <div class="frame-groupe">
                        <div class="row" style="text-align: center;font-size: 20px;">
                            <b>Sélection de la date et de l'heure de l'activité INFO COLL</b>
                        </div>
                    </div>

                    <div class="row" id="calendar-page" style="height: 10px; ">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                        <div style="height: 10px; " id="calendar"><!-- Dynamically Generated Content --></div>
                    </div>
                    </div>
                </div>



                <div class="modal-footer fixedFooter p-l-10 p-r-10">
                    <button type="button" id="button-back-2" class="btn button-back btn-secondary "data-step_index="2">
                             <span class="glyphicon glyphicon-backward"></span>
                              <?= lang('back') ?>
                   </button>
                     <button type="button" id="button-next-2" class="btn button-next btn-primary" data-step_index="2">
                             <?= lang('next') ?>
                             <span class="glyphicon glyphicon-forward"></span>
                     </button>
                </div>
            </div>

当我将日历放在第一个向导中时，问题消失了

更新

Easyappointment包含，frontend_book.js，其中已编程了下一步事件，我试图按如下所示更改代码：

     /**
     * Event: Next Step Button "Clicked"
     *
     * This handler is triggered every time the user pressed the "next" button on the book wizard.
     * Some special tasks might be performed, depending the current wizard step.
     */
    $('.button-next').click(function () {
        // If we are on the first step and there is not provider selected do not continue
        // with the next step.
        if ($(this).attr('data-step_index') === '1' && $('#entreprise').val() =="" || $('#searchTextField').val()=="") {
            return;
        }

        // If we are on the 2nd tab then the user should have an appointment hour
        // selected.
        if ($(this).attr('data-step_index') === '2') {

            $('#calendar').fullCalendar('render');
        }

但这并没有改变任何东西！？