FullCalendar zeigt keine Ereignisse korrekt an

Ich habe Probleme mit der FullCalendar js-Bibliothek, die Ereignisse nicht korrekt anzeigt. Ich bin mir nicht sicher, was das Problem ist, da ich die Anweisungen auf ihrer Einführungsseite befolgt habe, aber die Ereignisse werden immer ganz unten im Kalender angezeigt und sind nie mit den Zeiten "inline".FullCalendar zeigt keine Ereignisse korrekt an

<html> 
    <head> 
     <meta charset='utf-8' /> 
     <link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" /> 
     <!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">--> 
     <script src="assets/plugins/jquery-1.10.2.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script> 
     <script> 
      moment().format(); 

      function httpGet(url) { 
       var xmlHttp = new XMLHttpRequest(); 
       xmlHttp.open("GET", url, false); 
       xmlHttp.send(null); 
       return xmlHttp.responseText; 
      } 

      $(document).ready(function() { 

       // page is now ready, initialize the calendar... 

       //var eventsArray = JSON.parse(httpGet("Schedule.php")); 

       $('#calendar').fullCalendar({ 
        // put your options and callbacks here 
        //timezone: 'America/Denver', 
        header: { 
         left: '', 
         center: 'title', 
         right: '' 
        }, 
        theme:true, 
        events: [ 
         { 
          "title":"Washer & Dryer", 
          "editable":false, 
          "start":"2017-04-09T00:30:00-0600", 
          "end":"2017-04-09T06:30:00-0600", 
          "img_loc":"washer.png" 
         }, 
         { 
          "title":"Dishwasher", 
          "editable":false, 
          "start":"2017-04-09T02:56:00-0600", 
          "end":"2017-04-09T04:56:00-0600", 
          "img_loc":"dishwasher.jpg" 
         } 
        ], 
        defaultView: "agendaDay" 
       }) 

      }); 

     </script> 
     <style type='text/css'> 
      #calendar { 
      width: 900px; 
      margin: 0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div id='calendar'></div> 
    </body> 
</html>

screenshot of issue

Quelle

2017-04-09 Gerad Bottorff

Sie müssen statt einer src im <link> Tag ein href Attribut verwenden, die die fullcalendar Sheet verweist. Ihre vierte Zeile sollte wie folgt aussehen:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />

Demo:
http://jsbin.com/tojohiwuke/1/edit?html,output
(. Ich auch geändert jquery ein CDN in meinem Beispiel zu verwenden)

Quelle

2017-04-09 22:52:53 pianoJames

Dank! Ich bin eher ein Backend-Entwickler und verpasse manchmal kleine Dinge wie diese. Ich werde es versuchen, sobald ich heute Abend zu meinem Laptop zurückkehre und dann update. –

FullCalendar zeigt keine Ereignisse korrekt an

Antwort

Verwandte Themen