FullCalendar视图未在加载时显示

Question

我正在使用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) {

            }
         });

加载截图...完美的工作.

第二个日历......不是那么多.这是代码:

    $('#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));
            },
        })

单击任何标题按钮(我点击'今天')后...视图已加载

不确定发生了什么,我似乎无法在网上找到任何类似的条目.在此先感谢,如果需要更多信息,请告诉我.

Answer 1

我知道这有点太晚了但是看看这个问题: Twitter引导程序选项卡 中的FullCalendar如果它在一个未显示的元素中,似乎不会加载fullcalendar.如果是这种情况,简单的'霰弹枪'解决方案是强制渲染通过

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

当日历显示时.