2016-12-21 2 views
1

Wenn ich den folgenden Code ausführen, wird der FullCallendar nicht korrekt angezeigt. Das Ergebnis, das ich bekommen ist folgende: enter image description hereFullCalendar Plugin 3.1.0 wird nicht korrekt angezeigt

Nach der FullCallendar Demo es sollte wie folgt aussehen: enter image description here Die Debug-Konsole keine Fehler angezeigt werden soll. Was mache ich falsch?

$(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 hier "$ (document) .ready (funcntio() {'aber es sieht so aus, als ob die CSS-Dateien nicht geladen werden. Versuchen Sie, die Seite zu aktualisieren, um zu sehen, ob das Styling angewendet wird. – jeff

+0

Anscheinend die css und js werden korrekt geladen, ich habe den Browser-Cache geleert, aber ich bekomme das gleiche Ergebnis. – score

Antwort

1

Ich habe gerade einen Blick auf die Stilvorlage und bemerkte, dass es das Wort print in der URL hat. Ich schaute dann auf den Code und der Kommentar sagt, es ist für eine druckerfreundliche Version. Wenn ich Ihren Screenshot betrachte, würde ich zustimmen, dass er das tut.

Ich habe die .print aus der URL entfernt und es sieht so aus, als ob Sie diese benötigen.

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

Versuchen Sie, die für Drucker zu entfernen.

Verwandte Themen