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

Question

I want to make a calendar view in javascript. 我想用JavaScript制作日历视图。 I'm using this plugin, but the theme won't show, just trying to use standard theme. 我正在使用此插件，但是主题不会显示，只是尝试使用标准主题。 Does anyone know why? 有人知道为什么吗？

https://fullcalendar.io/docs/theming 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/ https://jsfiddle.net/03d1ahwy/

Answer 1

The problem is that 问题是

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

must be changed to 必须更改为

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

(ie you must add the attribute media="print" to the link tag) （即，您必须将属性media="print"到链接标记）

otherwise you'll always get the print layout, even on-screen. 否则，即使在屏幕上，您也将始终获得打印布局。 See here for more details about the "media" attribute. 有关“媒体”属性的更多详细信息，请参见此处。

Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version. 添加后，它告诉打印CSS仅在用户尝试打印页面时接管，并允许在浏览器内版本中使用标准主题。

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

PS If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it. PS如果只想使用标准主题，则实际上根本不需要在代码中编写themeSystem : "standard", -这是默认值，因此您可以忽略它。

PPS Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page. PPS当然，如果要使用其他主题，则必须适当设置主题系统，并在页面中包含相关CSS文件。

Answer 2

looks like you are having problems with the libraries download full calendar from here: https://fullcalendar.io/download make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers 好像您在使用库时遇到问题，可以从此处下载完整日历： 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>

Edit: 编辑：

for bootstrap 4 theme add: 对于bootstrap 4主题，请添加：

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

for jquery-ui theme add: 对于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