Javascript 无法显示完整日历列表视图

我正在将fullcalendar添加到我的网站，以显示各种即将到来的活动。我希望使用“引导选项卡框”（选项卡在html的不同部分之间切换）在普通日历视图和列表视图中显示日历。我以我认为正确的方式实现了它，日历视图显示得非常完美，而列表视图却没有。显示该选项卡时，界面将加载，但直到您向前跳一个月，然后再向后跳一个月，才会显示该月的事件。我找不到任何解决办法，我完全不明白为什么它不起作用。我尝试过很多不同的方法，但现在已经用尽了所有的想法。你知道我怎样才能解决这个问题吗？

函数RenderList（）{
$（“#日历列表”）.fullCalendar（'changeView'，'listMonth'）；
}
$（文档）.ready（函数（）{
$（'.calendar'）.fullCalendar({
//两种日历的选项
活动：[
{
标题：“我的生日”，
开始日期：“2017-01-05”，
完：2017-01-07
}  
],
});
$（'#calendarView'）。完整日历({
//日历视图的选项
});
//$（“#日历”）.fullCalendar({
//选择权
//第一天：1
//});
});

更新

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

$（文档）.ready（函数（）{
$（'#calendarView'）。完整日历({
//日历视图的选项
活动：[
{
标题：“我的生日”，
开始日期：“2017-01-05”，
完：2017-01-07
}  
],
});
$（“#日历列表”）.fullCalendar({
//日历视图的选项
defaultView:'listMonth'，
活动：[
{
标题：“我的生日”，
开始日期：“2017-01-05”，
完：2017-01-07
}  
],
});
});

您正在使用为#calendarView定义的日历实例覆盖为.calendar定义的日历实例。#calendarView实例中没有任何事件。这就是为什么您在列表视图中看不到任何内容（或者可能是您有javascript错误，因为DOM已经更改了—请检查您的控制台）

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

---

此外，您的fullCalendar版本是2.2.5。listView是在3.0.0中添加的（参考：）。因此，您需要更新调用者版本。

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>

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，年”
},
按钮文字：{
今天:"今天",，
月份：“日历视图”，
listYear:“列表视图”
},
defaultView:'listYear'，
违约日期：“2016-09-12”，
eventLimit:true，//当事件太多时允许“更多”链接
活动：[
{
标题：“全天活动”，
开始日期：2016-09-01
},
{
标题：“长期活动”，
开始日期：2016-09-07，
完：2016-09-10
},
{
身份证号码：999，
标题：“重复事件”，
开始：“2016-09-09T16:00:00”
},
{
身份证号码：999，
标题：“重复事件”，
开始：“2016-09-16T16:00:00”
},
{
标题:"会议",，
开始：“2016-09-11”，
完：2016-09-13
},
{
标题:"会议",，
开始：“2016-09-12T10:30:00”，
完：2016-09-12T12:30:00
},
{
标题:"午餐",，
开始：“2016-09-12T12:00:00”
},
{
标题:"会议",，
开始：“2016-09-12T14:30:00”
},
{
标题:"欢乐时光",，
开始：“2016-09-12T17:30:00”
},
{
标题:"晚餐",，
开始：“2016-09-12T20:00:00”
},
{
标题:"生日派对",，
开始：“2016-09-13T07:00:00”
},
{
标题：“点击谷歌”，
网址：'http://google.com/',
开始日期：2016-09-28
}
]
});
});

您未注释行

第一天：1

可能这导致browserI中的问题检查控制台重新对其进行了注释，但无论是否已注释，都没有错误消息。谢谢，但根据我从您的帖子中收集的信息，我仍然无法使其正常工作。我已经用我修改过的代码更新了答案中的代码，但是仍然不起作用。请给我一些示例代码，以便更好地解释您的意思。您收到的错误是什么？你更新了RenderList函数了吗？此功能只能切换选项卡。日历已初始化。我已完全删除该函数。我添加它的全部原因是因为我认为它不工作，因为它没有初始化

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