jquery 来自CDNJS的fullcalendar.js不工作？

zaq34kh6 于 2022-11-03 发布在 jQuery

关注(0)|答案(2)|浏览(136)

我对此有另一个问题，但文字很繁琐。我删除了另一个问题，赞成这个...
我最近发现了fullcalendar.js。我最初能够看到日历小部件和CSS样式、标题、导航按钮等，但后来停止了。我可以看到小部件，通常是标题，但看不到样式或按钮。
我有一个fiddle https://jsfiddle.net/a3q9c5tr/演示了这一点。它使用了来自CDNJS的fullcalendar库。它从CDNJS获取了jquery和moment.js库。fullcalendar的“支持”部分建议使用JSBIN......我在那里得到了与jsfiddle相同的结果。
我也试过下载fullcalendar库，使用其中包含的jquery和moment库，以及使用其他本地和CDN的jquery和moment库，就好像fullcalendar找不到自己的css一样。
我已经在小提琴和我的本地测试上运行了开发工具。一切看起来都在加载。
我一定是在做一些琐碎的事情，但我看不到它。想法？
在小提琴中使用的libs有：

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

jquery

来源：https://stackoverflow.com/questions/36016729/fullcalendar-js-from-cdnjs-not-working

2条答案

按热度按时间

vom3gejh1#

更新日期：

我修复了小提琴，它使用的是最新发布的fullcalendar：https://jsfiddle.net/y3llowjack3t/a3q9c5tr/4/
只需删除完整的calendar.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/

赞(0）回复(0）举报 2022-11-03

atmip9wb2#

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

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

赞(0）回复(0）举报 2022-11-03

我来回答

jquery 来自CDNJS的fullcalendar.js不工作？

2条答案

相关问题

热门标签

最新问答