jquery 全日历删除外部事件恢复功能

6ju8rftf 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(127)

我试图使用fullcalendar库创建一个事件日历，并遵循演示external-dragging，我理解的概念只是想知道如何执行恢复功能，如果我按下取消的下降事件将返回到其原始位置。
我正在使用sweetalert2库替换默认的JavaScript alert，下面是我的代码。

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            editable: true,
            eventConstraint: {
            start: moment().format('YYYY-MM-DD'),
            end: '2100-01-01' // hard coded goodness unfortunately
            },
            droppable: true, // this allows things to be dropped onto the calendar
            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();

                }

                swal({
                    title: 'Are you sure?',
                    text: "You want to change this event schedule?",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, proceed'
                  }).then(function (result) {
                    if (result.value) {

                      swal(
                        'Success!',
                        'The event schedule was successfully changed to ',
                        'success'
                      )


                    }else{

                      revertFunc();

                    }
                  })
                 //end of drop  

            },

字符串
revertFunc();只在eventDrop上可用，但我不知道如何在drop事件上实现它，任何建议都很好。

jquery

来源：https://stackoverflow.com/questions/47407927/fullcalendar-drop-external-event-revert-function

3条答案

按热度按时间

dgiusagp1#

在“drop”回调中没有“revertFunc（）”。它根本不存在。
我的解决方法（FullCalendar v4）是同时管理EventLeave和EventReceive：在第一个中保存原始事件，在第二个中删除新事件并恢复原始事件。
这里是一个简化的版本：

// to map original events (event.id => event)
_oldEventsInfo = new Map();

eventLeaveHandler(info) {
    _oldEventsInfo.set(info.event.id, info);
}

eventReceiveHandler(info) {
    if (/* for any reason cannot be moved */) {
        this.revert(info);
    } else {
        _oldEventsInfo.delete(info.event.id);
    }
}

revert(info) {
    var oldInfo = _oldEventsInfo.get(info.event.id);
    if (oldInfo) {
        // build a new event to restore in the original calendar
        var oldCalendar = oldInfo.event._calendar;
        var restoredEvent = {
            id: oldInfo.event.id,
            // etc
        };
        oldCal.addEvent(restoredEvent);
        // delete the destination (dragged) event from dest calendar
        info.event._calendar.getEventById(info.event.id).remove();
        // remove the old event from my saved
        _oldEventsInfo.delete(info.event.id);
    }
}

字符串

赞(0）回复(0）举报 11个月前

qyswt5oh2#

在v5中，eventDrop上有一个“revert”功能。
在React中，您可以将此回调存储为引用变量

const revertDropEvent = useRef<() => void>();

  const handleDropEvent = ({ event, revert }: EventDropArg) => {
      revertDropEvent.current = revert;
  }
  
  const handleCancelDrop = () => {
      if (revertDropEvent.current) revertDropEvent.current();
  }

  return (
  <div>
    <FullCalendar
       eventDrop={handleDropEvent}
       /* ... */
    />
    <ConfirmationModal onClose={handleCancelDrop}/>
  </div>

字符串

赞(0）回复(0）举报 11个月前

odopli943#

Fullcalendar v6.1.10 with React
如果你想恢复位置，你可以使用revert函数，如文档所述：https://fullcalendar.io/docs/eventDrop
例如......

const handleDropEvent = async (e) => {
        try {
            const result = await someFunction(e.event);
            if (!result) {
                e.revert()
            }
        } catch (error) {
            e.revert()
        }
    }

...

<FullCalendar
..
eventDrop={handleDropEvent}
...
/>

字符串

赞(0）回复(0）举报 11个月前

我来回答

jquery 全日历删除外部事件恢复功能

3条答案

相关问题

热门标签

最新问答