Как активировать темы в 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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">
Идти по этой дороге было бы просто пустой тратой времени
Проблема в том, что
<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/
P.S. Если вы просто хотите использовать стандартную тему, вам вообще не нужно писать themeSystem : "standard", в коде — это значение по умолчанию, так что вы можете просто его опустить.
П.П.С. Конечно, если вы хотите использовать какие-либо другие темы, вы должны правильно настроить систему тем и включить соответствующие файлы CSS на свою страницу.
Использование CDN по сравнению с локальными файлами здесь не является проблемой.