fullCalendar Listenansicht kann nicht angezeigt werden

Question

Ich füge einen Vollkalender zu meiner Website hinzu, um eine Vielzahl anstehender Ereignisse anzuzeigen. Ich möchte eine "Bootstrap-Registerkarte" verwenden (Tabs, um zwischen verschiedenen Abschnitten von HTML zu wechseln), um den Kalender in einer normalen Kalenderansicht und einer Listenansicht anzuzeigen. Ich habe es so implementiert, wie ich es für richtig halte, und die Kalenderansicht wird perfekt angezeigt, die Listenansicht jedoch nicht. Wenn die Registerkarte angezeigt wird, wird die Schnittstelle geladen, aber die Ereignisse des Monats werden erst angezeigt, wenn Sie einen Monat vor und dann wieder zurückspringen. Ich kann keine Korrekturen dafür finden und ich bin völlig ratlos, warum es nicht funktioniert. Ich habe viele verschiedene Methoden ausprobiert, habe mich aber von allen Ideen erschöpft. Weißt du, wie ich das beheben kann?

<!-- fullCalendar 2.2.5--> 

<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.min.css"> 

<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.print.css" media="print"> 

<!-- fullCalendar 2.2.5 --> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> 

<script src="../plugins/fullcalendar/fullcalendar.min.js"></script> 


<div class="nav-tabs-custom"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab_1" data-toggle="tab">Calendar View</a></li> 
     <li><a href="#tab_2" data-toggle="tab" onclick="RenderList()">List View</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab_1"> 
     <div class="calendar" id="calendarView"></div> 
     </div> 
     <!-- /.tab-pane --> 
     <div class="tab-pane" id="tab_2"> 
     <div class="calendar" id="calendarList"></div> 
     </div> 
     <!-- /.tab-pane --> 
    </div> 
    <!-- /.tab-content --> 
    </div> 

<script> 
function RenderList(){ 
    $('#calendarList').fullCalendar('changeView', 'listMonth'); 
} 

$(document).ready(function() { 
    $('.calendar').fullCalendar({ 
     //Options for Both Calendars 
     events: [ 
      { 
       title: 'My Birthday', 
       start : '2017-01-05', 
       end : '2017-01-07' 
      } 
     ], 
    }); 

    $('#calendarView').fullCalendar({ 
     //Options for Calendar View 
    }); 

    //$('#calendar').fullCalendar({ 
     //Options 
     //firstDay: 1 
    //}); 

}); 
</script> 

aktualisieren

<script> 
$(document).ready(function() { 
    $('#calendarView').fullCalendar({ 
     //Options for Calendar View 
     events: [ 
      { 
       title: 'My Birthday', 
       start : '2017-01-05', 
       end : '2017-01-07' 
      } 
     ], 
    }); 

    $('#calendarList').fullCalendar({ 
     //Options for Calendar View 
     defaultView: 'listMonth', 
     events: [ 
      { 
       title: 'My Birthday', 
       start : '2017-01-05', 
       end : '2017-01-07' 
      } 
     ], 
    }); 

}); 
</script> 

Answer 1

Sie das Überschreiben der Kalender-Instanz für .calendar definiert mit dem einen, die für #calendarView definiert ist. Sie haben keine Ereignisse in der #calendarView-Instanz. Das ist der Grund, warum Sie in der Listenansicht nichts sehen (oder vielleicht haben Sie Javascriptfehler, weil das DOM bereits geändert wurde - überprüfen Sie Ihre Konsole).

Sie können die Kalender nicht so erweitern, wie Sie es versuchen. Ich würde vorschlagen, alle allgemeinen Parameter als Konstante zu verschieben und sie beiden Kalenderinstanzen zur Verfügung zu stellen. Zusätzlich zum Initialisieren von Kalendern für beide Fälle verwenden Sie #calendarView und #calendarList

Darüber hinaus ist Ihre Version von fullCalendar 2.2.5. listView wurde in 3.0.0 hinzugefügt (Referenz: https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.0). Sie müssen also Ihre Callendar Version aktualisieren.

Answer 2

fullCalendar verfügt über eine eigene Methode zum Wechseln zwischen Ansichten, die anstelle von Registerkarten verwendet werden kann, wie unten gezeigt.

<div id="calendar"></div> 
<script> 
$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,listYear' 
      }, 

      buttonText: { 
       today: 'Today', 
       month: 'Calendar View', 
       listYear: 'List View' 
      }, 

      defaultView: 'listYear', 
      defaultDate: '2016-09-12', 
      eventLimit: true, // allow "more" link when too many events 
      events: [ 
       { 
        title: 'All Day Event', 
        start: '2016-09-01' 
       }, 
       { 
        title: 'Long Event', 
        start: '2016-09-07', 
        end: '2016-09-10' 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: '2016-09-09T16:00:00' 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: '2016-09-16T16:00:00' 
       }, 
       { 
        title: 'Conference', 
        start: '2016-09-11', 
        end: '2016-09-13' 
       }, 
       { 
        title: 'Meeting', 
        start: '2016-09-12T10:30:00', 
        end: '2016-09-12T12:30:00' 
       }, 
       { 
        title: 'Lunch', 
        start: '2016-09-12T12:00:00' 
       }, 
       { 
        title: 'Meeting', 
        start: '2016-09-12T14:30:00' 
       }, 
       { 
        title: 'Happy Hour', 
        start: '2016-09-12T17:30:00' 
       }, 
       { 
        title: 'Dinner', 
        start: '2016-09-12T20:00:00' 
       }, 
       { 
        title: 'Birthday Party', 
        start: '2016-09-13T07:00:00' 
       }, 
       { 
        title: 'Click for Google', 
        url: 'http://google.com/', 
        start: '2016-09-28' 
       } 
      ] 
    }); 

}); 
</script>