问题 - 使用选项卡上的负载未完全渲染

Question

我在jQuery UI选项卡中注入了FullCalendar。但是问题是，该选项卡仅加载了一个标题项目，例如上一个和今天按钮，如果您注意到我已经添加了EventAfterAllrender（）检查所有项目是否呈现是否呈现，因为该问题持续存在，请访问 do nonot 来吧。

我相信调用代码时有些问题，但奇怪的是，当我今天单击或下一个按钮或下一个按钮或调整浏览器大小时，日历可以正确地加载所有值，然后将所有值加载。

这是我的代码示例：

html

<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='calendar'></div>
                    </div>
                </div>

JS

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

预先感谢！

Answer 1

请看一下http://jsfiddle.net/6we8v/465/

在完整日历的最新CDN上http://arshaw.com/fullcalendar/download/

和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>