2016-12-21 4 views
1

Когда я выполняю следующий код, FullCallendar отображается неправильно. В результате я получаю следующее: enter image description hereПлагин FullCalendar 3.1.0 отображается неправильно

Согласно FullCallendar демо должно выглядеть следующим образом: enter image description here консоль отладки не отображает никаких ошибок. Что я делаю не так?

$(document).ready(function() { 
 

 
\t $('#calendar').fullCalendar({ 
 
\t \t defaultDate: '2016-12-12', 
 
\t \t editable: true, 
 
\t \t eventLimit: true, // allow "more" link when too many events 
 
\t \t events: [ 
 
\t \t \t { 
 
\t \t \t \t title: 'All Day Event', 
 
\t \t \t \t start: '2016-12-01' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Long Event', 
 
\t \t \t \t start: '2016-12-07', 
 
\t \t \t \t end: '2016-12-10' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t id: 999, 
 
\t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t start: '2016-12-09T16:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t id: 999, 
 
\t \t \t \t title: 'Repeating Event', 
 
\t \t \t \t start: '2016-12-16T16:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Conference', 
 
\t \t \t \t start: '2016-12-11', 
 
\t \t \t \t end: '2016-12-13' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: '2016-12-12T10:30:00', 
 
\t \t \t \t end: '2016-12-12T12:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Lunch', 
 
\t \t \t \t start: '2016-12-12T12:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Meeting', 
 
\t \t \t \t start: '2016-12-12T14:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Happy Hour', 
 
\t \t \t \t start: '2016-12-12T17:30:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Dinner', 
 
\t \t \t \t start: '2016-12-12T20:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Birthday Party', 
 
\t \t \t \t start: '2016-12-13T07:00:00' 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t title: 'Click for Google', 
 
\t \t \t \t url: 'http://google.com/', 
 
\t \t \t \t start: '2016-12-28' 
 
\t \t \t } 
 
\t \t ] 
 
    }); 
 
});
body { 
 
\t margin: 40px 10px; 
 
\t padding: 0; 
 
\t font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
 
\t font-size: 14px; 
 
} 
 

 
#calendar { 
 
\t max-width: 900px; 
 
\t margin: 0 auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset='utf-8' /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" type="text/css" /> 
 

 
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script> 
 
</head> 
 
\t <body> 
 
\t \t <div id='calendar'></div> 
 
\t </body> 
 
</html>

+0

Typo here «$ (document) .ready (funcntio() {', но похоже, что файлы css не загружаются. Попробуйте обновить страницу, чтобы увидеть, применяется ли стиль. – jeff

+0

По-видимому, css и js правильно загружаются. Я очистил кеш браузера, но получаю тот же результат. – score

ответ

1

Я просто взял посмотреть на эту таблицу стилей и заметил, что есть слово print в URL. Затем я просмотрел код, и в комментарии говорится, что это версия для печати. Глядя на ваш скриншот, я бы согласился, что это так.

Я удалил .print из URL-адреса и, похоже, тот, который вам нужен.

http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css 

Попробуйте удалить принтер для принтеров.

Смежные вопросы