Javascript 问题-使用选项卡加载时未完全呈现FullCalendar

我已经将FullCalendar注入jqueryui选项卡中。但问题是选项卡仅加载标题项，如prev next和today按钮，如果您注意到我添加了eventAfterAllRender（），以检查问题持续时是否渲染了所有项，则不会出现警报

我相信调用代码时会出现一些问题，但奇怪的是，当我单击“今天”、“上一个”或“下一个”按钮或调整浏览器大小时，日历会正确加载所有值，然后会触发警报

以下是我的代码示例：

HTML 提前感谢

看一看

关于全日历的最新CDN

Jquery版本1.8.3和Jquery UI 1.9.2

基本相同的代码

<div id="call-detail-tab">
                    <ul>
                        <li><a href="#call-detail-tab-1">Call Information</a></li>
                    </ul>
                    <div id="call-detail-tab-1">
                     <div id="mycalendar"></div>
                    </div>
</div>

可能与Jquery版本有关否我现在使用的是1.10.2版本的Jquery，但没有效果，这应该意味着在tab/fullcalendar脚本搞乱之前执行JS。您是否安装了firebug并验证了错误？

    $('#call-detail-tab').tabs();
    ....
    ...
    $('#call-detail-tab').show();
.....

var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev today',
                center: 'title',
                right: 'next'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                if (allDay) {
                    alert('Clicked on the entire day: ' + date);
                }else{
                    alert('Clicked on the slot: ' + date);
                }
                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                alert('Current view: ' + view.name);
                // change the day's background color just for fun
                $(this).css('background-color', 'red');
            },
            eventClick: function(calEvent, jsEvent, view) {
                alert('Event: ' + calEvent.title);
                alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
                alert('View: ' + view.name);
                // change the border color just for fun
                $(this).css('border-color', 'red');
            },
            eventAfterAllRender: function( view ) { 
                alert('All Items Rendered!');
            },
            eventBackgroundColor: '#C7E89B',
            eventBorderColor: '#E4FCA7',
            eventTextColor: '#000000',
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ],
            eventRender: function(event, element) {
                 element.bind('dblclick', function() {
                         alert('double click!');
                 });
                 // alert shows up in linux chrome, but messes up draggable
            },
            windowResize: function(view) {
                   alert('The calendar has adjusted to a window resize');
            },
            height: calcCalendarHeight()
        });

        $('#calendar').fullCalendar('option', 'aspectRatio', 1.80);

    //}

     function calcCalendarHeight() {
         var h = $(window).height() - 400;
         return h;
     }

<div id="call-detail-tab">
                    <ul>
                        <li><a href="#call-detail-tab-1">Call Information</a></li>
                    </ul>
                    <div id="call-detail-tab-1">
                     <div id="mycalendar"></div>
                    </div>
</div>