当我希望在触发单击日历事件时打开它时，为什么总是在 fullCalendar 的开头打开对话框

Question

我尝试修改完整日历中的示例。当 点击事件 触发时，它会显示警报。我更改为通过添加表单打开表单并将其加载到 click 事件。

我不明白为什么 表单对话框 在日历呈现之前打开。

应该在日历触发点击（或select）事件后打开。下面的代码非常简单。

这是我的 fiddle 下面是代码。

我想念某事吗？非常感谢任何建议。

<head>
    ... skipped some imports

    <style>
        ... skipped some css and styles

    </style>

    <script>
        var dialog;
      
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                selectable: true,

                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },

                dateClick: function (info) {
                    // alert('clicked ' + info.dateStr);
                   info.jsEvent.preventDefault();

                   dialog = $( "#dialog-form" ).dialog({
                        autoOpen: false,
                        height: 400,
                        width: 350,
                        modal: true,
                        buttons: {
                            "Create an account": (),
                            Cancel: function() {
                                dialog.dialog( "close" );
                            }
                        },

                        close: function() {
                            form[ 0 ].reset();
                            allFields.removeClass( "ui-state-error" );
                        }
                    });
                },

                select: function (info) {
                    alert('selected ' + info.startStr + ' to ' + info.endStr);
                }
            });

            calendar.render();
        });
    </script>
</head>
<body>

<div id='calendar'></div>

<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>
    <form>
      .... skipped all textbox
    </form>
</div>
</body>

Answer 1

您应该在代码开始时初始化对话框，而不仅仅是在 dateClick 事件中。

document.addEventListener('DOMContentLoaded', function () {
    var dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 400,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": (),
            Cancel: function() {
                dialog.dialog( "close" );
            }
        },

        close: function() {
            form[ 0 ].reset();
            allFields.removeClass( "ui-state-error" );
        }
    });
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        selectable: true,

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },

        dateClick: function (info) {
            // alert('clicked ' + info.dateStr);
            dialog.dialog("open");
            info.jsEvent.preventDefault();
        },

        select: function (info) {
            alert('selected ' + info.startStr + ' to ' + info.endStr);
        }
    });

    calendar.render();
});

当我希望在触发单击日历事件时打开它时，为什么总是在 fullCalendar 的开头打开对话框

Why from dialog is always opened at the beginning of fullCalendar when I want it opened when click calendar event triggered

javascript

jquery

fullcalendar