Question

我已经在jquery ui选项卡中注入了FullCalendar。但问题是标签只加载了标题项，如prev next和today按钮，如果你注意到我已添加eventAfterAllRender（）来检查所有项目是否呈现，因为问题仍然存在警告不来了。

我认为在调用代码方面存在一些问题，但奇怪的是，当我今天点击或上一个或下一个按钮或调整浏览器大小时，日历会正确加载所有值，然后警报会闪烁。

这是我的代码示例：

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>

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

HTML

的js

1 个答案: