Skip to content Skip to sidebar Skip to footer
Home / Fullcalendar / Javascript

Fullcalendar Modal Not Displayed

Post a Comment
I'm trying to setup html modal for fullcalendar in Djnago according to this and this solution, but modal is not displayed [no popup window]. I try to find solutions according to li

Solution 1:

I've updated bootstrap and added bootstrap.css into HTML.

One file code:

<head><scriptsrc="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script><linkhref='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css'rel='stylesheet' /><linkhref='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css'rel='stylesheet' /><linkhref='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css'rel='stylesheet' /><linkhref='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'rel='stylesheet' /><scriptsrc='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script><scriptsrc='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script><scriptsrc='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script><scriptsrc='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script></head><body><divid='calendar'></div></body><divid="fullCalModal"class="modal fade"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h4id="modalTitle"class="modal-title"></h4></div><divid="modalBody"class="modal-body"></div></div></div>
    Test
</div><script>functionloadCalendar() {
        var calendarEl = document.getElementById('calendar');
        var calendar = newFullCalendar.Calendar(calendarEl, {
            locale: 'pl',
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            events: [
                {
              title: 'All Day Event',
              description: 'www',
              start: '2019-09-03'
                },
            ],

            eventClick: function(event) {
                console.log('modal', event);
                $('#fullCalModal').modal();
                $('#modalTitle').html(event.event.title);
                $('#modalBody').html(event.event.extendedProps.description);
            },

        });
        calendar.render();
    };

    if (document.readyState !== 'complete') {
            document.addEventListener('DOMContentLoaded', loadCalendar);
    } else {
            loadCalendar();
    }
</script>

Working example online: https://jsfiddle.net/m2xwphLj/

Post a Comment for "Fullcalendar Modal Not Displayed"