Question

我想用JavaScript制作日历视图。我正在使用此插件，但是主题不会显示，只是尝试使用标准主题。有人知道为什么吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
        <script>
            $(function() {
                $('#calendar').fullCalendar({
                    themeSystem : "standard",
                    dayClick: function() {
                        alert('a day has been clicked!');
                    }
                })
            });
        </script>
    </head>
    <body>
        <div id="calendar"></div>
    </body>
</html>

https://jsfiddle.net/03d1ahwy/

Answer 1

问题是

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

必须更改为

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

（即，您必须将属性media="print"添加到链接标记中）

否则，您将始终获得打印布局，即使在屏幕上也是如此。有关“媒体”属性的更多详细信息，请参见here。

添加后，它告诉打印CSS仅在用户尝试打印页面时接管，并允许在浏览器内的版本中使用标准主题。

演示：https://jsfiddle.net/40f1z3ts/

P.S。如果您只想使用标准主题，则实际上根本不需要在代码中编写themeSystem : "standard",-这是默认值，因此您可以忽略它。

P.P.S。当然，如果要使用其他主题，则必须适当设置主题系统，并在页面中包含相关CSS文件。

Answer 2

似乎您在使用库时遇到问题从此处下载完整日历： https://fullcalendar.io/download 制作一个文件夹并将其命名为“ lib”，在其中添加fullcalendar.min.css，fullcalendar.print.min.css和moment.min.js并使用下一个标题

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href='lib/fullcalendar.min.css' rel='stylesheet' />
    <link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='lib/moment.min.js'></script>
    <script src='lib/fullcalendar.min.js'></script>

编辑：

对于bootstrap 4主题，添加：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

为jquery-ui主题添加：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">

如何在fullcalendar.js中激活主题？

2 个答案: