How to implement and show fullcalendar events into boostrap modal

Question

I am implementing a calendar for my new website I retrieve events from a BackEnd application and show result in a modal using fullcalendar. Everything works fine, but when I open and display the modal/the calendar, the events are not rendered on the calendar until I press next or prev button.

I already tried to render the calendar, rerender, next or prev programmatically.

Here is my code for the calendar, Of course 'calendar-results' is a modal-body of a modal dialog

var calendarResultsEl = document.getElementById('calendar-results');
calendarResults = new FullCalendar.Calendar(calendarResultsEl, {
    plugins: ['interaction','timeGrid', 'list'],
    defaultView: 'timeGridWeek',
    slotDuration:'01:00:00',
    scrollTime : '08:00:00',
    firstDay: 1, 
    height:'parent',
    handleWindwoResize:true,
    header: {
        left:   '',
        center: 'title',
        right:  'today prev,next'
    },
        events: elements,
    eventMouseEnter : function(info)
    {
        var element = info.el;
        element.setAttribute('data-html', 'true');
        element.setAttribute('data-container', 'body');
        element.setAttribute('data-rel', 'popover')
        element.setAttribute('data-trigger', 'hover');
        element.setAttribute('data-content', "<font size='3'><b>Start :</b>" + info.event.start + "<br>" + "<b>End :</b>" + info.event.end + "<br></font>");
        element.setAttribute('data-placement', 'top');
        element.setAttribute('data-title', "<font size='6'>" + info.event.id + "</font>");
        $(function () { 
            $("[data-rel=popover]").popover();   
        });
    },
    columnHeaderFormat:{
        weekday:'long',
        day:'numeric',
        month:'long'
    },
    eventClick : function(info){
        $("#startTime").val(moment.utc(info.event.start));
        $("#endTime").val(moment.utc(info.event.end));
        $("#name").val(info.event.title);
        $("#eventInfo").html(info.event.description);
        $("#eventLink").attr('href', info.event.url);
        $("#eventContent").modal('show');
    }
});
calendarResults.render();

Here are my events object :

[
  {
    "end": "2019-03-11T19:02:00.000Z",
    "id": 0,
    "start": "2019-03-11T04:32:00.000Z"
  },
  {
    "end": "2019-03-12T19:02:00.000Z",
    "id": 1,
    "start": "2019-03-12T04:32:00.000Z"
  },
  {
    "end": "2019-03-13T19:02:00.000Z",
    "id": 2,
    "start": "2019-03-13T04:32:00.000Z"
  },
  {
    "end": "2019-03-14T19:02:00.000Z",
    "id": 3,
    "start": "2019-03-14T04:32:00.000Z"
  },
  {
    "end": "2019-03-15T19:02:00.000Z",
    "id": 4,
    "start": "2019-03-15T04:32:00.000Z"
  },
  {
    "end": "2019-03-18T19:02:00.000Z",
    "id": 5,
    "start": "2019-03-18T04:32:00.000Z"
  }
]

Of course the problem won't appear with this event object, I made a jsFiddle to show my problem. The events for the current week don't appear unless you press prev/next. Also, changing the size of the result window show the events.

https://jsfiddle.net/Marech/2Lqgewdc/7/

Anyone has succeed to show a calendar into a boostrap modal ? Maybe I should check for the events triggered when button are pressed and do the same thing programmatically after calendar rendering. Any suggestions ?

Lunster Lunster · Accepted Answer · 2019-06-25T10:50:32

In your button code you can manually force a window resize event:

// When the user clicks on the button, open the modal
btn.onclick = function() {

  modal.style.display = "block";
  window.dispatchEvent(new Event('resize'));

}

This works, but this way of working with modals; directly manipulating styles, is not the most elegant way. You should consider reviewing Bootstrap's modal documentation, or at least use a library to handle modal functionality.

How to implement and show fullcalendar events into boostrap modal

1 Answers