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

问题描述 投票：0回答：10

我正在将 FullCalendar 用于我正在开发的新网站。我有两个带有日历的 div。第一个按预期加载...没有问题。第二是问题。它加载带有按钮和标题的标题，但视图 div 是空的。我检查了错误，没有抛出任何错误。如果我单击任何标题按钮，视图将按预期显示。我认为这可能是两个日历之间的冲突，但似乎不是问题。请参阅下面的代码，让我知道您的想法。我正在使用 Parse 后端，它似乎工作得很好，还有 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) {

            }
         });

加载屏幕截图...完美运行。

Screenshot on load...works perfectly.

第二个日历...没那么多。这是代码：

    $('#kp-agenda-view').fullCalendar({
            header: {
                left:   'prev,next today',
                center: 'title',
                right:  'month,agendaWeek,agendaDay'
            },
            defaultDate: '05-05-2015',
            allDay: false,
            color: 'lightBlue',
            textColor: 'gray',
            timezone: 'local',
            overlap: false,
            editable: true,
            buttonIcons: {
                prev: 'left-single-arrow',
                next: 'right-single-arrow',
            },
            events: function(start, end, timezone, callback) {
                callback(getEvents(userData.currentLocation.events, start, end));
            },
        })

View Not Loaded

单击任何标题按钮后（我单击“今天”）...视图已加载

View Loaded after clicking a header button

不太确定发生了什么，而且我似乎在网络上找不到任何类似的条目。预先感谢，如果需要更多信息，请告诉我。

jquery html parse-platform fullcalendar
10个回答
8
投票

我知道这有点太晚了，但看看这个问题： Twitter Bootstrap 选项卡中的完整日历 如果 fullcalendar 位于未显示的元素中，则似乎不会加载它。如果是这种情况，简单的“霰弹枪”解决方案是通过

强制渲染 
$('#kp-agenda-view').fullCalendar('render');

当日历显示时。

1
投票

当我看到这篇文章时，我遇到了完全相同的问题。 上面的解决方案意味着调用渲染，对我来说不起作用。

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

1
投票

我们所做的是复制第一个日历的所有代码，并将该代码粘贴到原始代码下方，并将所有日历引用重命名为 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');
  });
1
投票

在调用 fullCalendar 方法之前的一个小解决方法

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

它对我有用。

1
投票

我的工作

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

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

fullcalendar.render()
尝试仅在可见容器中渲染日历网格。因此，如果您在单击选项卡后立即触发 
fullcalendar.render()
，但在渲染日历的选项卡容器上确实有一些动画（例如“淡入”动画，这显然需要一些时间来执行），那么就准备好捕获选项卡没有日历网格的容器。

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

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

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

有同样的问题。 （在我的例子中，日历被放置在不可见的 div 中） 解决方案：在渲染日历之前，显示日历。并在日历呈现后隐藏日历。

0
投票
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.
0
投票

在我的例子中，包含日历 div 的视图是使用 ajax 和 jQuery 动态添加的。并且日历（FullCalendar）第一次没有加载/渲染。

但是，当我检查元素时，它立即被渲染了。

我使用了 setTimeOut 并且它有效。工作代码如下。

<script type="text/javascript">

$(function () {
    //Until the data was not rendered. I was showing a loader to engage the users. Just you need to change the image path
    showLoader("#lxgEventsCalendar");

    //Creating a delay of 500 ms
    setTimeout(function () {
        loadFullCalData();
    }, 500);

});

function loadFullCalData() {
    var calendarEl = document.getElementById('lxgEventsCalendar');

    var calEvents = [
        {
            title: 'All Day Event',
            start: '2021-11-01'
        },
        {
            title: 'Long Event',
            start: '2021-11-07',
            end: '2020-11-10'
        },
        {
            groupId: '999',
            title: 'Repeating Event',
            start: '2021-11-09T16:00:00'
        },
        {
            groupId: '1',
            title: 'Meetings with Share Holders',
            start: '2021-11-14T16:00:00'
        },
        {
            groupId: '2',
            title: 'Meeting with Sam & Co',
            start: '2021-11-15T16:00:00'
        },
        {
            groupId: '3',
            title: 'Meeting with MDT Polymers',
            start: '2021-11-19T16:00:00'
        }];

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {

            center: 'title',
            start: 'today prev,next',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },

        dateClick: function (info) {

            var markup = "<div class=\"form-horizontal\"><div class=\"form-group\"><label class=\"control-label col-lg-3\">Date Selected</label> <div class=\"col-lg-6\">" + info.dateStr + "</div> </div></div>";
            showAlert(info.dateStr);
        },
        events: calEvents
    });

    calendar.render();
}

function showLoader(divSelector) {
       var loaderMarkup = "<div id='imgLoader' class='loader-img' style='width: 100%;margin: 0px auto 0px auto; padding: 10px 0; text-align:center;overflow: hidde;'><img style='margin: 0px auto 0px auto;' src='../../images/waiting_animation_circle.gif'/></div>";


    $(divSelector).html(loaderMarkup);
}

</script>


<div id='lxgEventsCalendar' class="col-lg-12"></div>
0
投票

这对我有用。

替换：

calendar.render();

对于：

setTimeout(function () {
  calendar.render();
}, 2000);

希望对你有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.