CODEWITHSUNDEEP
javascriptfullcalendar
coder
coder

Reputation: 251

why fullcalendar does't render inside modal but does without

can someone please tell me why calendars don't show in the modal? But without modal they do show just fine. See this first where it works:Fiddle See this where it doesn't: Fiddle

I think I need to use fullCalendar('render'); but even with that, code didn't seem to work right inside the click function. Please assist.

Upvotes: 0

Views: 227

Answers (2)

Gwellin
Gwellin

Reputation: 484

It appears fullCalendar won't render if any of its parents have display: none;. The render method you referenced is just the what you need to use, but you need to do so just after the model is displayed.

Alternately you could try something to leave the model with display: block;, but positioned off screen (left: -1000%; right: 1000%; or the like) until you want it visible.

Upvotes: 1

atomCode
atomCode

Reputation: 902

Here is what i did to make it work in your modal version. I created a function as you suspected that adds the calendar into the modal and called it when the "mark Vacation" button is clicked.

$('#vacaBtn').click(function () {
      modal.style.display = "block";
      renderCalendars();
});

I put all the code that creates the three calendars inside the renderCalendars() function so that they get added into the modal after the modal shows up.

function renderCalendars() {
   $('#calendar0').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
        defaultDate: moment(y+"-"+(m+1)+"-"+d),
      theme: true,
      dayClick: function(date, jsEvent, view) {

        alert('Clicked on: ' + date.format());

    }
    });

    $('#calendar1').fullCalendar({
    header: {
            left: '',
            center: 'title',
            right: ''
        },
        defaultDate: moment(y+"-"+(m+2)+"-"+d),

    theme: true
    });
    $('#calendar2').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: ''
        },
           theme: true,
        defaultDate: moment(y+"-"+(m+3)+"-"+d)
    });
}

Upvotes: 1

Related Questions