javascript - fullCalendar ListView 无法显示

Question

我正在向我的网站添加 fullcalendar 以显示各种即将举行的事件。我希望使用“Bootstrap 选项卡框”(在 html 不同部分之间切换的选项卡)在普通日历 View 和 ListView 中显示日历。我已经按照我认为正确的方式实现了它，并且日历 View 显示完美，但 ListView 却没有。显示该选项卡时，界面会加载，但只有当您快进一个月然后再次返回时，才会显示该月的事件。我找不到任何解决办法，我完全不明白为什么它不起作用。我尝试过很多不同的方法，但现在已经耗尽了所有的想法。你知道我该如何解决这个问题吗？

<!-- 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 实例中没有任何事件。这就是为什么您在 ListView 中看不到任何内容(或者可能有 javascript 错误，因为 DOM 已更改 - 请检查您的控制台)。

您无法按照您尝试的方式扩展日历。我建议将所有通用参数作为常量移动，并将它们提供给两个日历实例。除了为这两种情况初始化日历之外，还使用 ​​#calendarView 和 #calendarList

此外，您的 fullCalendar 版本是 2.2.5。 listView是在3.0.0中添加的(引用:https://github.com/fullcalendar/fullcalendar/releases/tag/v3.0.0)。因此您需要更新您的 callendar 版本。