时间戳

首页 > 解决方案 > 如何在 fullcalendar.js 中激活主题？

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

问题描述

我想在 javascript 中创建一个日历视图。我正在使用这个插件，但主题不会显示，只是尝试使用标准主题。有谁知道为什么？

https://fullcalendar.io/docs/theming

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

标签： javascriptfullcalendarthemes

解决方案

问题是

<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"到链接标签）

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

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

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

PS如果你只是想使用标准主题，你实际上根本不需要themeSystem : "standard",在你的代码中写 - 这是默认值，所以你可以省略它。

PPS 当然，如果您想使用任何其他主题，您必须适当地设置主题系统并在您的页面中包含相关的 CSS 文件。

推荐阅读