完整日历.js来自 CDNJS 不起作用

Question

我对此有另一个问题，但文本很麻烦。我删除了另一个问题以支持这个...

我最近找到了完整的日历.js。 我最初能够看到日历小部件和 css 样式、标题、导航按钮等。 但此后这种情况已经停止。 我可以看到小部件，通常是标题，但看不到样式或按钮。

我有一个小提琴 https://jsfiddle.net/a3q9c5tr/来证明这一点。 它使用的是CDNJS的完整日历库。 它正在从CDNJS获取jquery和moment.js库。 完整的日历"支持"部分建议使用JSBIN...我在那里的结果与 jsfiddle 相同。

我还尝试下载完整的日历库并使用包含的jquery和moment库以及使用其他本地和CDN jquery和moment库。 就好像全日历找不到自己的css一样。

我已经在小提琴和本地测试上运行了开发人员工具。一切看起来都在加载。

我一定在做一些微不足道的事情，但我看不到它。 想法？

小提琴中使用的库是：

  <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>

html 正文只是

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

javascript部分是：

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

Answer 1

更新：

我修复了小提琴，它使用的是最新版本的全日历：https://jsfiddle.net/y3llowjack3t/a3q9c5tr/4/

只需删除 fullcalendar.print.css

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

并查看带有主题的日历

theme: true,

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

Answer 2

我在 https://codepen.io/munr/pen/KOpyXE 找到了解决方案。

目录

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.2.0/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.2.0/main.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.2.0/main.min.css" rel="stylesheet"/>
<div id="calendar"></div>

/

/Java 脚本

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();
  });