在不使用jQuery的情况下为fullCalendar编写代码时的错误

Question

我看到一个CodePen，它允许将事件从FullCalendar拖到垃圾箱或返回外部列表。我分叉了代码笔：https://codepen.io/hlim18/pen/EMJWQP?editors=1111。jQuery工作代码的JavaScript部分如下：

$(document).ready(function() {
    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events .fc-event').each(function() {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendarSchedule').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        dragRevertDuration: 0,
        drop: function() {
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                console.log(this);
                $(this).remove();
            }
        },
        eventDragStop: function( event, jsEvent, ui, view ) {
            if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
                $('#calendar').fullCalendar('removeEvents', event._id);
                var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
                el.draggable({
                  zIndex: 999,
                  revert: true, 
                  revertDuration: 0 
                });
                el.data('event', { title: event.title, id :event.id, stick: true });
            }
        }
    });
    var isEventOverDiv = function(x, y) {
        var external_events = $( '#external-events' );
        var offset = external_events.offset();
        offset.right = external_events.width() + offset.left;
        offset.bottom = external_events.height() + offset.top;
        // Compare
        if (x >= offset.left
            && y >= offset.top
            && x <= offset.right
            && y <= offset .bottom) { return true; }
        return false;
    }
});

我想在不使用jQuery的情况下编写代码。因此，我尝试将jQuery更改为vanilla JavaScript。但是，日历甚至不会显示在屏幕上。

这就是我尝试的方式：https://codepen.io/hlim18/pen/bZyaQj?editors=1111。

我尝试过的带有原版 JavaScript 的 JavaScript 部分如下：

/* initialize the external events
-----------------------------------------------------------------*/
var draggable_events = document.querySelectorAll('#external-events .fc-event');
for(var i=0; i<draggable_events.length; i++){
    // store data so the calendar knows to render an event upon drop
    draggable_events[i].fullCalendar('renderEvent', {
        title: draggable_events[i].innerText, // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
    });
    // make the event draggable
    draggable_events[i].draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag     
    });
}
/* initialize the calendar
-----------------------------------------------------------------*/
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendarSchedule');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
      },
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      dragRevertDuration: 0,
      drop: function() {
        // is the "remove after drop" checkbox checked?
        if (document.getElementById('drop-remove').checked = true) {
            // if so, remove the element from the "Draggable Events" list
            this.remove();
        }
      },
      eventDragStop: function( event, jsEvent, ui, view ) {
        if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
            calendarEl.fullCalendar('removeEvents', event._id);
            var el = document.querySelector('fc-event').setAttribute("id", "external-events-listing").text( event.title );
            el.draggable({
              zIndex: 999,
              revert: true, 
              revertDuration: 0 
            });
            el.data('event', { title: event.title, id :event.id, stick: true });
        }
      }
    }
});
var isEventOverDiv = function(x, y) {
    var external_events = document.getElementById('external-events');
    var offset = external_events.offset();
    offset.right = external_events.width() + offset.left;
    offset.bottom = external_events.height() + offset.top;
    // Compare
    if (x >= offset.left && y >= offset.top && x <= offset.right && y <= offset .bottom){ 
        return true; 
    }
    return false;
}

在代码笔中，我没有看到任何错误。但是，当我使用我正在处理的应用程序进行测试时，我看到以下错误：

Uncaught TypeError: draggable_events[i].fullCalendar is not a function
    at viewMonthly.js:15

我什至不确定总共有多少问题需要解决才能使代码与原版JavaScript一起使用......:(

所以，我将不胜感激任何建议。提前谢谢你！:)

Answer 1

V4 之前版本中的 fullCalendar 是一个 jquery 插件，需要 jquery 才能工作