JQuery generiert den Kalenderinhalt nicht, da der Container ausgeblendet wird

Question

Ich habe ein Kalender-Steuerelement und Registerkarten, aber wenn ich auf die Registerkarte Kopf klicke öffnet es den Container, aber der Jquery-Kalender darin funktioniert nicht?

verdächtigen, weil der Container angezeigt wird: keine anfänglich.

Nun, ich bin der Initialisierung des Kalenders auf Klick auf meine Registerkarte Header wie unten,

$(".nav-tabs li:nth-child(6)").on("click", function() { 
$("#dcr-ordering-calendar").show(); 
/* initialize the calendar*/ 
var date = new Date(); 
var d = date.getDate(); 
var m = date.getMonth(); 
var y = date.getFullYear(); 

$('#dcr-ordering-calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    editable: true, 
    droppable: true, // this allows things to be dropped onto the calendar 
    drop: function() { 
     // is the "remove after drop" checkbox checked? 
     if ($('#drop-remove').is(':checked')) { 
      // if so, remove the element from the "Draggable Events" list 
      $(this).remove(); 
     } 
    }, 
    events: [ 
     { 
      title: 'All Day Event', 
      start: new Date(y, m, 6), 
      color: '#a22a92' 
     }, 
     { 
      title: 'Long Event', 
      start: new Date(y, m, 8), 
      end: new Date(y, m, 10), 
      color: '#1aa6b3' 
     }, 
     { 
      id: 999, 
      title: 'Repeating Event', 
      start: new Date(y, m, d - 3, 16, 0), 
      allDay: false, 
      color: '#1aa6b3' 
     }, 
     { 
      id: 999, 
      title: 'Repeating Event', 
      start: new Date(y, m, d + 4, 16, 0), 
      allDay: false, 
      color: '#1aa6b3' 
     }, 
     { 
      title: 'Meeting', 
      start: new Date(y, m, d, 10, 30), 
      allDay: false, 
      color: '#85ad20' 
     }, 
     { 
      title: 'Lunch', 
      start: new Date(y, m, d, 12, 0), 
      end: new Date(y, m, d, 14, 0), 
      allDay: false, 
      color: '#85ad20' 
     }, 
     { 
      title: 'Birthday Party', 
      start: new Date(y, m, d + 1, 19, 0), 
      end: new Date(y, m, d + 1, 22, 30), 
      allDay: false, 
      color: '#85ad20' 
     } 
    ] 
}); 

});

wie es zu beheben?

Answer 1

Fullcalendar wird nicht in ausgeblendeten Elementen nach Design gerendert.

Sie müssen möglicherweise manuell machen rufen Methode render

zwingt sofort den Kalender zu machen und/oder nachstellt seine Größe.

.fullCalendar('render')

Diese Methode ist in dem Szenario nützlich, wenn ein Setup-Register könnte verstecken/einen Kalender zeigen.