Question

我尝试将fullcalendar应用到我的页面。当我将示例代码粘贴到我的页面时，没有标题按钮，也没有相同的事件样式，这些事件不能拖放。

使用：jquery 3.3.0，时刻2.20.1，fullcalendar 3.8.0。

我丢失了一些设置吗？请帮忙解决，谢谢大家。

$(function() {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                defaultDate: '2018-01-12',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2018-01-01'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2018-01-09T16:00:00'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2018-01-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2018-01-11',
                        end: '2018-01-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2018-01-12T10:30:00',
                        end: '2018-01-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2018-01-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2018-01-12T14:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2018-01-12T20:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2018-01-28'
                    }
                ]
            });
        });

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>


<div id="calendar">
</div>

Answer 1

我不确切地知道您尝试复制哪个示例代码，但遗憾的是您没有完全正确地复制它。

这是你的问题：

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

这将使用打印页面时要使用的版本覆盖默认CSS（来自fullcalendar.min.css）。此处的更改包括隐藏标题和按钮以及减少颜色的使用。

您需要做的是告诉浏览器在打印模式下仅使用此样式表。这是使用媒体查询media="print"完成的，如下所示：

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

无法与fullcalendar显示与演示代码相同

1 个答案: