Jquery 加载时未显示完整日历视图

我正在为一个新网站使用FullCalendar。我有两张附有日历的唱片。第一批按预期加载…没有问题。第二个是问题。它用按钮和标题加载标题，但视图div为空。我检查了错误，没有一个被抛出。如果单击任意标题按钮，视图将按预期显示。我想这可能是两个日历之间的冲突，而这似乎不是问题所在。看看下面的代码，让我知道你的想法。我正在使用一个解析后端，它似乎工作得很好，还有jQuery。事件调用相同的函数来加载事件，它也正常工作

第一个日历代码：

       $('#calendar').fullCalendar({    
            timezone: 'local',
            events: function( start, end, timezone, callback ) {        
                callback(getEvents(events, start, end));
            },
            color: 'lightBlue',
            textColor: 'gray',
            eventMouseover: function( calEvent, jsEvent, view ) {
                var $target = $(jsEvent.target).css('cursor', 'pointer');
                var location = userData.locations[calEvent.location.id];
                var event = userData.events[calEvent.eventData.id];
                var options = {
                    items: $target.parent(),
                    content: function() {
                        var info = "Event: <b>" + calEvent.title + "</b><br/><center>" + calEvent.description + "</center><br/>Date: " + moment(calEvent.start).format("MM/DD/YYYY h:mma - ") + moment(calEvent.end).format("h:mma") + '<br/>Frequency: ' + event.get('eventFrequency') + '<br/> Frequency End Date: ' + moment(event.get('eventEndDate')).format('MM/DD/YY') + '<br/>Location: <center>' + location.get("locationName") + '<br/>' + location.get('locationAddress') + location.get('locationAddress2') + "<br>" + location.get('locationCity') + ', ' + location.get('locationState') + ' ' + location.get('locationCountry') + ' ' + location.get('locationPostalCode') + "</center><br/><center>Click Event to Edit";
                        return info;
                    }
                };
                $(view.el).tooltip(options);
            },
            eventMouseout: function( calEvent, jsEvent, view ) {
                $(view.el).tooltip('destroy');
            },
            eventClick: function(calEvent, jsEvent, view) {
                console.log(calEvent);
                console.log(jsEvent);
                console.log(view);
                userData.currentLocation = {};
                var location = userData.currentLocation['location'] = userData.locations[calEvent.location.id];
                var query = new Parse.Query('Event');
                query.equalTo('user', currentUser);
                query.equalTo('parent', location);
                query.find().then(function(events) {
                    userData.currentLocation.events = events;   
                    addRow(calEvent.eventData);
                    $('#add-location').text('Back to Calender').off().one('click',showCalendar);
                }, function(error) {
                    errorMessage(error);
                });
            },
            header: {
                left:   'title',
                center: '',
                right:  'today prev,next'
            },
            buttonIcons: {
                prev: 'left-single-arrow',
                next: 'right-single-arrow',
            },
            dayClick: function(date, jsEvent, view) {

            }
         });

单击任何标题按钮（我单击了“today”）后，将加载视图

---

我不太清楚到底发生了什么，而且我似乎在网上找不到任何类似的条目。提前谢谢，如果需要更多信息，请告诉我。

我知道这有点晚了，但请看一下这个问题： 如果fullcalendar位于未显示的元素中，则它似乎不会加载。如果是这种情况，简单的“鸟枪”解决方案是通过

$('#kp-agenda-view').fullCalendar('render');

---

当日历显示时。

当我看到这篇文章时，我遇到了完全相同的问题。 上面的解决方案，即参与渲染，对我不起作用

---

在我的例子中，我发现使这项工作有效的唯一方法是在日历的原始渲染之前将放置日历的div变为可见，然后再次变为不可见。

也有同样的问题。我的问题是在选项卡容器渲染动画中。根据方法

fullcalendar.render（）

尝试仅在可见容器中渲染日历网格。因此，如果您在单击选项卡后立即启动

fullcalendar.render（）

，但在正在渲染日历的选项卡容器上确实有一些动画（例如“淡入”动画，这显然需要一些时间来执行），那么请准备捕捉没有日历网格的选项卡容器

或者在这种情况下，解决方案将类似于此：

$("#calendarTab").click(function (e) {
    e.preventDefault();

    setTimeout(function () {
        $("#fullCalendar").fullCalendar("render");
    }, 300); // Set enough time to wait until animation finishes;
});

---

我们所做的是复制第一个日历的所有代码，并将该代码粘贴到原始代码下面，并将所有日历引用重命名为Calendar2。这包括同一页上第二个日历的div

一些JS：

// Calendar 2 beginning
    var calendarioDiv2 = $('#calendar2');
    var fullCalendar = calendarioDiv2.fullCalendar({......)}

//last lines fo JS

$(window).on('load', function() {
    $('#calendar').fullCalendar('render');
    $('#calendar2').fullCalendar('render');
  });

有同样的问题。（在我的例子中，日历被放置在不可见的div中）

---

解决方案：在渲染日历之前，显示日历。并在日历呈现后隐藏日历。

在调用fullCalendar方法之前，先做一些变通

    setTimeout(function () {
      $('#kp-agenda-view').fullCalendar('render');
    });

它为我工作。

为我工作

setTimeout(() => {
  $('#kp-agenda-view').fullCalendar('render');
}, 1000)

---

如果删除

$（“#kp议程视图”）.fullCalendar（）中的所有选项，它还会加载吗？它看起来更像是一个注释，而不是一个答案。请再写些东西，否则很快就会关闭。
setTimeout(() => {
  $('#kp-agenda-view').fullCalendar('render');
}, 1000)

var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {  height: 300,
      plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
      header    : {
        left  : 'prev,next today',
        center: 'title',
        right : 'dayGridMonth'
      },

I just give a height then my issue is solved.