未显示完整的日历导航链接答案

【问题标题】：Full Calendar navigation links not showing未显示完整的日历导航链接
【发布时间】：2017-10-16 15:24:08
【问题描述】：

我正在尝试设置一个完整的日历来显示来自公共 Google 日历的事件。我已经设置了一个测试日历，它正在显示事件。但是，导航链接根本没有显示？

这是我的代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css">
<script src="https://fullcalendar.io/js/fullcalendar-3.4.0/lib/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.4.0/lib/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/locale/fi.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/gcal.js'></script>
<script>
    $(document).ready(function() {          
        $('#calendar').fullCalendar({
        header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
        weekNumbers: true,
        navLinks: true,
        googleCalendarApiKey: 'working api key here',
        events: {
            googleCalendarId: 'abc@group.calendar.google.com'
        }
    });
});
</script>
<title>
test calendar</title>
</head>
<body>
<center>
<div id='calendar'></div>
</center>
</body>
</html>

【问题讨论】：

标签： fullcalendar

【解决方案1】：

如果你想使用fullcalendar.print.css，那么你必须在样式表中添加media="print"，像这样

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" media="print">

另一个选项是您也可以从页面中删除此 fullcalendar.print.css 样式表（但如果您还想在打印屏幕上查看日历，请不要删除 fullcalendar.print.css）

【讨论】：

【解决方案2】：

您遇到的问题很简单，只需添加此 media='print' tp 打印样式表

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" >

到

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css"  media='print'>

【讨论】：