简体   繁体   中英

fullcalendar.js from CDNJS not working?

I had another question about this but the text was cumbersome. I deleted the other question in favor of this...

I recently found fullcalendar.js. I was initially able to see the calendar widget and the css styling, title, nav buttons, etc. But that has since stopped. I can see the widget and usually the title but not the styling or buttons.

I have a fiddle https://jsfiddle.net/a3q9c5tr/ that demonstrates this. It is using the fullcalendar libs from CDNJS. It is getting the jquery and moment.js libs from CDNJS. The fullcalendar "Support" section suggests using JSBIN... I have the same result there as with jsfiddle.

I have also tried downloading the fullcalendar library and using the included jquery and moment libs as well as using other local and CDN jquery and moment libs. It is as though fullcalendar can not find its own css.

I have run developer tools on the fiddle and on my local tests. Everything looks like it is loading.

I must be doing something trivial but I can not see it. ideas?

The libs used in the fiddle are:

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

  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>

The html body is just

<div id='calendar'></div>

The javascript section is:

$(document).ready(function() {
  $('#calendar').fullCalendar({
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  });
});

UPDATE:

I fixed the fiddle and it is using the newest release of fullcalendar: https://jsfiddle.net/y3llowjack3t/a3q9c5tr/4/

Just remove the fullcalendar.print.css

$(document).ready(function() {

  $('#calendar1').fullCalendar({
    header: {
      left: 'prev,next,today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
      }
  });

});

And to see the calendar with a theme do

theme: true,

https://jsfiddle.net/y3llowjack3t/a3q9c5tr/5/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM