Question

我正在尝试将事件拖动到外部div并再次回到日历中。但是，每当删除事件时，我都会收到TypeError：jsEvent未定义。

我不确定为什么要这样做，这应该是传递给eventDragStop函数的有效参数。

我正在使用最新的FullCalendar 4。

这是我的代码

// Load the CSS stuff
import {Tooltip} from "bootstrap";

require('@fortawesome/fontawesome-free/css/fontawesome.min.css');
require('@fortawesome/fontawesome-free/css/brands.min.css');
require('@fortawesome/fontawesome-free/css/solid.min.css');
require('../css/app.scss');

// Load the JS stuff
let $ = require('jquery');
require('bootstrap');
require('./libs/navbar.js');
require('jquery-ui/ui/widgets/draggable');
import apiclient from "./libs/apiclient";
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import bootstrapPlugin from '@fullcalendar/bootstrap';

// $(document).ready(function () {
//
// });

document.addEventListener('DOMContentLoaded', () => {
    /* 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
        });

    });
    let calendarEl = document.getElementById('calendar-holder');

    let calendar = new Calendar(calendarEl, {
        views: {
            jira: {
                type: 'dayGridWeek',
                duration: {months: 3},
                buttonText: 'Jira'
            }
        },
        defaultView: 'jira',
        themeSystem: 'bootstrap',
        editable: true,
        droppable: true,
        firstDay: 1,
        contentHeight: 'auto',
        weekNumbersWithinDays: true,
        weekNumbers: true,
        eventSources: [
            {
                url: "/fc-load-events",
                method: "POST",
                extraParams: {
                    filters: JSON.stringify({})
                },
                failure: () => {
                    // alert("There was an error while fetching FullCalendar!");
                },
            },
        ],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'jira,dayGridMonth,timeGridWeek',
        },
        plugins: [ bootstrapPlugin, interactionPlugin, dayGridPlugin, timeGridPlugin ], // https://fullcalendar.io/docs/plugin-index
        timeZone: 'UTC',
        eventRender: function(info) {
            var tooltip = new Tooltip(info.el, {
                title: info.event.title+'<br>'+info.event.extendedProps.assignee,
                placement: 'top',
                trigger: 'hover',
                container: 'body',
                html: true
            });
        },
        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
                $(this).remove();
            }
        },
        eventDragStop: function( event, jsEvent, view ) {

            if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
                $('#calendar-holder').calendar('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 });
            }
        }
    });
    calendar.render();

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

    }
});

Answer 1

我发现jsEvent现在位于event.jsEvent中。从现在起我可以在这里获得职位。

onDragStop告诉我jsEvent未定义

1 个答案: