Как активировать темы в fullcalendar.js? - PullRequest
Новая
       4

Как активировать темы в fullcalendar.js?

0 голосов
/ 31 января 2019

Я хочу сделать просмотр календаря в 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/

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Проблема в том, что 

<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" к тегу ссылки)

в противном случае вы всегда получите макет печати, даже на экране.Смотрите здесь для более подробной информации об атрибуте media.

Как только вы добавите это, он заставляет CSS печати вступать во владение, только когда пользователь пытается напечатать страницу, и позволяет использовать стандартную тему в версии в браузере.

Демонстрация: https://jsfiddle.net/40f1z3ts/

PS Если вы просто хотите использовать стандартную тему, вам вообще не нужно писать themeSystem : "standard", в своем коде - это значение по умолчанию, поэтому вы можете просто пропуститьit.

PPS Конечно, если вы хотите использовать любые другие темы, вы должны соответствующим образом настроить систему тем и включить соответствующие файлы CSS на своей странице.

0 голосов
/ 31 января 2019

похоже, у вас проблемы с библиотеками, скачайте полный календарь отсюда: 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>

Редактировать:

для темы начальной загрузки 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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...