Javascript 当我希望在触发“日历事件”时打开“为什么从”对话框时，它总是在fullCalendar的开头打开_Javascript_Jquery_Fullcalendar

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

javascript jquery fullcalendar

Javascript 当我希望在触发“日历事件”时打开“为什么从”对话框时，它总是在fullCalendar的开头打开,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,我尝试修改完整日历中的示例。当点击事件触发时，它显示一个警报。我通过添加表单并在单击事件时加载表单来打开表单我不明白为什么在呈现日历之前打开窗体对话框应在单击或选择日历触发的事件后打开。下面的代码非常简单这是我的，下面是代码我想念史密斯吗？非常感谢你的建议 <head> ... skipped some imports <style> ... skipped some css and styles </style

我尝试修改完整日历中的示例。当点击事件触发时，它显示一个警报。我通过添加表单并在单击事件时加载表单来打开表单

我不明白为什么在呈现日历之前打开窗体对话框

应在单击或选择日历触发的事件后打开。下面的代码非常简单

这是我的，下面是代码

我想念史密斯吗？非常感谢你的建议

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

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

您已经添加了AddEventListener，以便在DOMContentLoaded发生时触发，据我所知，它会在DOM加载时加载日历。是的，这就是我预期的情况。但事实并非如此。将打开一个对话框而不是日历。你可以在附加的fiddle上试试。嗨@samuel，你试过上面的代码并运行了吗？因为它仍然加载表单而不是日历。。你可以在我的[小提琴]上试试[…或者你可以简单地分享你的小提琴，而不是我从中学习到的东西..哦，你只是忘记导入jquery和jquery ui cdn。记住在任何其他cdn之前导入jquery。并且，$.dialog函数需要jquery ui。嗨@samuel，->我添加了jquery和jquery.ui，你能告诉我我错过了什么吗？请随意编辑它，直到它运行。@slawalata Your fiddle at包含几个错误，您是否查看了控制台？这就是为什么您会看到一个普通对话框而没有日历-您的JavaScript都没有运行。有两个语法错误，并且您尝试加载一个不存在的CSS文件

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