fullCalendarリスト表示が表示されない

Question

私は、私のウェブサイトにfullcalendarを追加して、今後開催予定の様々なイベントを表示しています。私は、通常のカレンダービューとリストビューでカレンダーを表示するために、 "ブートストラップタブボックス"（タブをhtmlの異なるセクションに切り替える）を使いたいと思っています。私は正しいと思うようにそれを実装し、カレンダービューは完全に表示されますが、リストビューは表示されません。タブが表示されるとインターフェイスが読み込まれますが、月を転送する前に月のイベントが表示されず、1か月後に再び表示されます。私はこれのための修正を見つけることができないと私は完全になぜそれが動作していないのに困惑しています。私は、さまざまな方法を試してみましたが、すべてのアイデアを自分自身で使い果たしました。私はこれをどのように修正できるか知っていますか？

<!-- 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> 

更新

<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

あなたは#calendarViewのために定義されたもので.calendar用に定義されたカレンダーのインスタンスをオーバーライドしています。 #calendarViewインスタンスにイベントはありません。そのため、リストビューで何も表示されない（または、DOMが既に変更されているためにjavascriptエラーが発生している可能性があります。コンソールを確認してください）。

カレンダーを自分のやり方で拡張することはできません。すべての一般的なパラメータを定数として移動し、それらを両方のカレンダーインスタンスに提供することをお勧めします。両方のケースのカレンダーを初期化するだけでなく、#calendarViewと#calendarListを使用してください。

さらに、fullCalendarのバージョンは2.2.5です。 3.0.0でlistViewが追加されました（参考：https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.0）。あなたのcallendarのバージョンを更新する必要があります。

Answer 2

fullCalendarには、以下に示すように、タブの代わりに使用できるビューを切り替える独自の方法があります。あなたの非コメント行 `firstDay

<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>