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

Posted 2023-05-08

【中文标题】在不使用 jQuery 的情况下为 fullCalendar 编写代码时出错

【英文标题】：Errors in efforts to write code for fullCalendar without using jQuery

【发布时间】：2019-08-17 15:01:20

【问题描述】：

我看到了一个 CodePen，它允许将事件从 FullCalendar 拖到垃圾箱或返回到外部列表。我分叉了 CodePen：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;

在 CodePen 中，我没有看到任何错误。但是，当我使用我正在开发的应用程序进行测试时，我看到了以下错误：

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

我什至不确定总共要解决多少问题才能使代码与 vanilla JavaScript 一起工作... :(

所以，我会很感激任何建议。先感谢您！ :)

【问题讨论】：

如果你想换js来学习，值得你。但是如果项目只使用 jquery ，完全没有损失

@ ﾃﾞﾋﾞｯﾄ 是的，我这样做是为了提高我对原生 JavaScript 的理解。 :)

【参考方案1】：

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

【讨论】：

啊……！我刚刚查看了标题为“V4正式发布”的博文：fullcalendar.io/blog/2019/03/v4-officially-released。是的……确实！感谢您的回答！