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);
        }
    }
}

startDate在FullCalendar插件中显示两次

1 个答案: