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

Question

我想用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/

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"到鏈接標記）

否則，即使在屏幕上，您也將始終獲得打印布局。 有關“媒體”屬性的更多詳細信息，請參見此處。

添加后，它告訴打印CSS僅在用戶嘗試打印頁面時接管，並允許在瀏覽器內版本中使用標准主題。

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

PS如果只想使用標准主題，則實際上根本不需要在代碼中編寫themeSystem : "standard", -這是默認值，因此您可以忽略它。

PPS當然，如果要使用其他主題，則必須適當設置主題系統，並在頁面中包含相關CSS文件。

Answer 2

好像您在使用庫時遇到問題，可以從此處下載完整日歷： https ://fullcalendar.io/download制作一個文件夾並將其命名為“ lib”，添加fullcalendar.min.css，fullcalendar.print.min.css和一下。里面的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 個解決方案

解決方案1
0 2019-02-01 09:45:29

解決方案2
-1 2019-01-31 16:17:53

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

問題描述

2 個解決方案

解決方案1 0 2019-02-01 09:45:29

解決方案2 -1 2019-01-31 16:17:53

解決方案1
0 2019-02-01 09:45:29

解決方案2
-1 2019-01-31 16:17:53