fullCalendar List View Fall to Display

Question

Я добавляю fullcalendar на свой сайт, чтобы отображать множество предстоящих событий. Я хочу использовать «ботовую вкладку» (вкладки для переключения между различными разделами html), чтобы отображать календарь в обычном виде календаря и в виде списка. Я реализовал его так, как я считаю правильным, и представление календаря отображается отлично, однако в представлении списка нет. Когда вкладка отображается, интерфейс загружается, но события месяца не отображаются, пока вы не пропустите вперед в месяц, а затем снова. Я не могу найти никаких исправлений для этого, и я полностью зациклен на том, почему он не работает. Я пробовал множество разных методов, но теперь исчерпал себя из всех идей. Вы знаете, как я могу это исправить?

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

Update

<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

Вы перекрывая календаря экземпляр, определенный для .calendar с той, которая определена для #calendarView. У вас нет событий в экземпляре #calendarView. Вот почему вы не видите ничего в представлении списка (или, может быть, у вас ошибка javascript, потому что DOM уже изменен - ​​проверьте консоль).

Вы не можете распространять календари так, как вы пытаетесь сделать. Я бы предложил переместить все общие параметры в качестве константы и предоставить их обоим экземплярам календаря. В дополнение к инициализации календарей для обоих случаев используйте #calendarView и #calendarList

Кроме того, ваша версия fullCalendar - 2.2.5. listView добавлен в 3.0.0 (ссылка: https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.0). Поэтому вам нужно обновить версию своего календаря.

Answer 2

fullCalendar имеет собственный способ переключения между видами, которые можно использовать вместо вкладок, как показано ниже.

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