jquery 完整日历打开多个日历

Question

我刚刚开始使用jQuery全日历 http://arshaw.com/fullcalendar/，我遇到了一个奇怪的问题。我从单击功能启动日历，第一次打开日历很好，打开了 1 个日历。但是，如果我再次单击，它会添加 1，我现在有 2 个日历。每次我单击它都会发生这种情况，每次都会添加 1 个日历。我是否必须添加一些选项来重新初始化日历。我能看到的唯一选项是"渲染"选项，但无法弄清楚如何使用它。谢谢

更新

：新代码更新

$(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

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

我还建议从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();
    });
});

Answer 2

1. jQuery live-function 已弃用，使用 .on（）
2. 在点击事件之外初始化您的日历，并在点击时显示和隐藏它。