Question

我正在使用此event calendar plugin，但除了标题按钮外没有呈现日历，当我点击任何标题按钮时，只会显示日历（参见下图）

正如您在我的控制台上看到的，所有内容都已正确设置（链接脚本和样式表）。

在html底部声明脚本（只是为了确保在脚本调用之前加载dom）

<!-- full calendar -->
<script type="application/javascript" src="/core/plugins/fullcalendar/moment.js"></script>
<script type="application/javascript" src="/core/plugins/fullcalendar/fullcalendar.min.js"></script>

及其样式表位于html页面顶部（标签内）

<link rel="stylesheet" type="text/css" href="/core/plugins/fullcalendar/fullcalendar.css" />

然后调用它

//calendar
$('#calendar').fullCalendar({
   header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2015-02-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: '2015-02-01'
            },
            {
                title: 'Long Event',
                start: '2015-02-07',
                end: '2015-02-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-02-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-02-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2015-02-11',
                end: '2015-02-13'
            },
            {
                title: 'Meeting',
                start: '2015-02-12T10:30:00',
                end: '2015-02-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2015-02-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2015-02-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2015-02-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2015-02-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2015-02-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2015-02-28'
            }
        ]

});

但如果我调整窗口大小，它会显示。任何想法，线索，帮助，建议，建议非常感谢。谢谢！

Answer 1

您可能遇到两个问题，要么您缺少defaultView，要么需要运行＆＃39;渲染＆＃39;来自fullCalendar对象的函数。尝试以最简单的方式加载日历，以确保一切正常（正确的库等），如：

calendar.fullCalendar({
        defaultView: 'agendaWeek',
        editable:false,
        allDaySlot:false,
        timezone: 'local',
        maxTime: "24:00:00"
    })

如果此方法有效，但它没有呈现日历，则尝试在启动日历后运行此功能。这将强制重新呈现日历..

calendar.fullCalendar('render')

您可能遇到的另一个问题是，在页面的重新登录阶段，日历DOM被隐藏（显示：无或calendar.hide（））然后在这种情况下确保在日历生成后运行最后一个函数节目。像bootstrap这样的常见库有tab类，这是一个非常常见的bug。要确保在选项卡处于活动状态后呈现日历，请执行此操作

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    var tab = e.currentTarget.hash

    if( tab == '#tab'){

        calendar.fullCalendar('render')

    }

});

Answer 2

你需要：

添加jquery。来自documentation

必须在FullCalendar的JavaScript之前加载jQuery和Moment。

当jquery准备就绪时调用fullCalendar。从同一页面的文档

$(document).ready(function() {    
    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })
});

我做了plunker with your code，您可以在那里查看。

Answer 3

我认为您正在使用的json是不正确的，请检查jsonlint ...为了您的考虑我在答案中附加修改后的json

这里是完全压缩的修改过的json： -

[
    {
        "title": "AllDayEvent",
        "start": "2015-02-01"
    },
    {
        "title": "LongEvent",
        "start": "2015-02-07",
        "end": "2015-02-10"
    },
    {
        "id": "999",
        "title": "RepeatingEvent",
        "start": "2015-02-09T16: 00: 00"
    },
    {
        "id": "999",
        "title": "RepeatingEvent",
        "start": "2015-02-16T16: 00: 00"
    },
    {
        "title": "Conference",
        "start": "2015-02-11",
        "end": "2015-02-13"
    },
    {
        "title": "Meeting",
        "start": "2015-02-12T10: 30: 00",
        "end": "2015-02-12T12: 30: 00"
    },
    {
        "title": "Lunch",
        "start": "2015-02-12T12: 00: 00"
    },
    {
        "title": "Meeting",
        "start": "2015-02-12T14: 30: 00"
    },
    {
        "title": "HappyHour",
        "start": "2015-02-12T17: 30: 00"
    },
    {
        "title": "Dinner",
        "start": "2015-02-12T20: 00: 00"
    },
    {
        "title": "BirthdayParty",
        "start": "2015-02-13T07: 00: 00"
    },
    {
        "title": "ClickforGoogle",
        "url": "http: //google.com/",
        "start": "2015-02-28"
    }
]

检查它是否有效

Answer 4

我也得到了这个错误 - 这是由于div元素上的CSS标记。

div{
    display:inline-block;
}

一旦我删除了内联块，所有内容都会出现。

Answer 5

添加此功能，这将有效，这是一个问题，因为新标签显示日历的显示为无。

$('#Your Tab ID').on('shown.bs.tab', function (e) {
    $("#calendarID").fullCalendar('render');
});

Answer 6

大家好，我遇到了同样的问题，但是当我单击任何按钮时，都会加载日历。香港专业教育学院尝试了上面的一切，但没有得到。我从@Wolfgang Leon选择了一个选项，并将其放在一起即可使用。我为日历添加了计数检查，因为当我切换标签时，我会得到多个日历。

        render: function() { 

        let calCount = 0;

        $(function(){
            $('#YOUR CAL ID', this.el).fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay',
                    ignoreTimezone: false
                },
                defaultView: 'month',
                selectable: true,
                editable: true
            });
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
            var tab = e.currentTarget.hash
            if( tab == '#YOUR TAB ID' && calCount == 0){
                $('#YOUR CAL ID').fullCalendar('render')
            }
        });

    }

在骨干网初始化之后，我将其放入渲染函数中。（菜鸟到骨干）。让我知道这是否有帮助，或者在我仍在学习时是否有更好的方法可以编写此内容。

完整日历js不会渲染，只显示标题按钮

6 个答案: