Question

我刚开始使用jQuery fullcalendar http://arshaw.com/fullcalendar/，我遇到了一个奇怪的问题。我正在通过点击功能启动日历，第一次打开日历就可以了，打开1个日历。但是，如果我再次点击，它会增加1，我现在有2个日历。每次点击它都会发生这种情况每次添加1个日历。我是否需要添加一些选项来重新初始化日历。我能看到的唯一选择是“渲染”＃39;选项，但无法解决如何使用它。感谢

更新：新代码更新

$(function() {
    $('#calhead1').on("click", function(){

        $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000);
        $("#cal").show();
    });
});
    // Start Calendar Script //

    $(function() {

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

            $('#cal').fullCalendar({

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: true,
                theme: true,
                width: 760,
                height: 470,
                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/'
                    }
                ]
            });

            });

    // End Calendar Script //

Answer 1

不推荐使用jQuery live-function，使用.on（）
在点击事件之外初始化您的日历，只需点击即可显示和隐藏日历。

Answer 2

调用fullCalendar函数旨在创建一个新日历，以便您的脚本完全按照预期执行。您只需要在click事件处理程序之外移动该函数。

我还建议从live转到新的on方法，因为jQuery现已弃用live。

您的新代码如下：

$(function() {

    $('#cal').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        theme: true,
        width: 760,
        height: 470,
        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/'
            }
        ]
    });
    $('#calhead1').on("click", function(){

                    $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000);
                    $("#cal").show();
                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
    });

});

jquery fullcalendar打开多个日历

2 个答案: