Jquery FullCalendar not loading in popup

问题

I created a popup with my custom css and js show hide functions. Now I want to place the calendar to that popup.

I tried

$(document).on('click', '.cliker', function () {
   $(".succes_msg").remove();
    $show = $(this).attr('pkid');
    $(this).addClass('activer');
    $("input[name=startTime]").val($(this).find("span").eq(0).html()).timepicker();
    $(".addbtn").attr('pkId', $show);

    $('#calendar').fullCalendar({

      defaultView: 'basicWeek',
      aspectRatio: 1.5,
      header    : {
        left  : 'prev,next',
        center: 'title',
        right : ''
      },
      dayOfMonthFormat: 'ddd MMM/MM',
      firstDay: 4,
      eventLimit: true,
      render: true,
      height: 250,
      buttonText: {
        today: 'today',
        month: 'month'        },
      eventSources: [{
        url: '{{URL::to(route('get_calender_data'))}}',
        type: 'get',
        data: {cinema: 0}
       }],
    });

    $(".modelPophldr,.editShow").show();
    $(".editShow").animate({'margin-top': '25px'});
});

Like above there I am showing the popup after the fullcalendar rendering. How to fix it?

Edit...

Right now the calendar is coming with only right and left arrows, but the calendar is not loaded. When I click on the next button it will show the calendar with events perfectly.

回答1:

display: none removes the element out of the flow of the HTML so you need to call your event when your element becomes visible that why your plugin is working when you click on arrows

try to initialize your plugin after

$(".modelPophldr,.editShow").show();

来源：https://stackoverflow.com/questions/47451339/jquery-fullcalendar-not-loading-in-popup

标签

javascript

jquery

popup

fullcalendar