CODEWITHSUNDEEP
javascriptjqueryfullcalendar
slawalata
slawalata

Reputation: 441

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

I try t modify an example from full calendar. It showed an alert when click event triggered. I change to open a form by adding a form and load it on click event.

I don't understand why form dialog is opened before calendar rendered.

It should be open after click (or select) event triggered by calendar. The code below is quite straight forward.

This is my fiddle and below is the code.

Do I miss smth? many thanks for any advice.

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

Upvotes: 0

Views: 212

Answers (1)

Samuel Andrade
Samuel Andrade

Reputation: 154

You should initialize dialog at start of the code, not only in dateClick event.

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

Upvotes: 1

Related Questions