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 / 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/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare/ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css">

  <script type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare/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'
  });
});

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/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./ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css">
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare./ajax/libs/fullcalendar/2.6.1/fullcalendar.print.css">

  <script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/moment.js/2.12.0/moment.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare./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'
  });
});

• javascript
• jquery
• fullcalendar

2 Answers 2

UPDATE:

I fixed the fiddle and it is using the newest release of fullcalendar: https://jsfiddle/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/y3llowjack3t/a3q9c5tr/5/

I find the solution at https://codepen.io/munr/pen/KOpyXE

// Html

<script src="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/main.js"></script>
<link href="https://cdn.jsdelivr/npm/@fullcalendar/[email protected]/main.min.css" rel="stylesheet"/>

<div id="calendar"></div>

//Java Script

var eventsArray = [
    {
      title  : 'event1',
      start  : '2019-07-20'
    },
    {
      title  : 'event2',
      start  : '2019-08-05',
      end    : '2019-08-07'
    },
    {
      title  : 'event3',
      start  : '2019-09-03'
    },
    {
      title  : 'event3',
      start  : '2022-10-05'
    }
  ];

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: [ 'dayGrid', 'interaction' ],
        
        dateClick: function(info) {
            alert('Clicked on: ' + info.dateStr);
          
          eventsArray.push({
            date: info.dateStr,
            title: "test event added from click"
          });
          
          calendar.refetchEvents();
        },
      
        eventClick: function(info) {
          alert(info.event.title)
        },
      
        events: function(info, successCallback, failureCallback) {
          successCallback(eventsArray);
        }
    });

    calendar.render();
  });