Jquery fullCalendaring未在没有用户操作的情况下完全呈现

fullCalendar仅部分渲染。只有当用户手动单击图片中的6个按钮中的任意一个时，或者如果在Chrome中，右键单击，然后单击屏幕上的任意位置的“Inspect Element”，日历部分才会呈现

在下面的代码中，“popupDiv”在弹出对话框中呈现。放入此popupDiv中的任何其他html组件都可以正常工作。点击一个按钮（说“今天”）后，一切正常

<div id="popupDiv">
    <div id="calendar"></div>
</div>

      <script type="text/javascript">
$('#calendar').fullCalendar({
                  header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'month,agendaWeek,agendaDay'
                  },
                  lazyFetching: false,
                  editable: false,
                  allDayDefault: false,
                  events: '/Home/GetCalendarData',

                  eventMouseover: function (calEvent, jsEvent) {

                  },

                  eventMouseout: function (calEvent, jsEvent) {

                  }

              });
</script>

$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
懒散：错，
可编辑：false，
allDayDefault:false，
事件：'/Home/GetCalendarData'，
eventMouseover:函数（calEvent、jsEvent）{
},
eventMouseout：函数（calEvent、jsEvent）{
}
});

如果在调用FullCalendar时该对话框不可见，则不会呈现日历，因为它需要宽度和高度来调整布局。您可以延迟调用FullCalendar，也可以在对话框可见时延迟调用。是的，在包含FullCalendar div的弹出窗口之后需要调用$（“#calendar”）.FullCalendar（'render'）。