javascript - startDate 在 FullCalendar 插件中显示两次

Question

我正在为我的一个项目使用 FullCalendar 插件。当用户单击日历的一个区域时，它会显示一个带有输入和约会按钮的弹出窗口。当用户单击“约会”按钮时，makeAppointment会调用函数，我只是回startDate显到控制台。

当用户第一次单击约会按钮时，它会记录选定的日期和时间。当用户选择“第二个日期和时间”并单击弹出窗口上的约会按钮时，它会显示两个日期和时间，即一个以前的日期和时间和一个当前选择的日期和时间。第三次和第四次也是如此。为什么它有这种行为，我该如何解决？

这是我的代码

var Calendar = {
    init: function () {
        $('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay',
                ignoreTimezone: false
            },
            select: this.select
        });
    },

    select: function (startDate, endDate, allDay, jsEvent, view) {
        Calendar.Dialog.init(startDate, endDate);
    },

    Dialog: {
        init: function (startDate, endDate) {
            this.show();
            $('.overlay').on('click', function () { Calendar.Dialog.close() });
            $('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
        },

        //show and close functions are here

        makeAppointment: function (startDate, endDate) {
            console.log(startDate);
        }
    }
}

Answer 1

尝试先检查Dialog是否已经初始化，否则不要再做。

    var Calendar = {
    init: function () {
        $('#calendar').fullCalendar({
            defaultView: 'agendaWeek',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay',
                ignoreTimezone: false
            },
            select: this.select
        });
    },

    initialized: false,

    select: function (startDate, endDate, allDay, jsEvent, view) {
        if (this.initialized === false) {
            this.initialized = true;
            Calendar.Dialog.init(startDate, endDate);
        }
    },

    Dialog: {
        init: function (startDate, endDate) {
            this.show();
            $('.overlay').on('click', function () { Calendar.Dialog.close() });
            $('#appointmentButton').on('click', function () { Calendar.Dialog.makeAppointment(startDate, endDate) });
        },

        //show and close functions are here

        makeAppointment: function (startDate, endDate) {
            console.log(startDate);
        }
    }
}