如何解决如何通过FullCalendar中的选项卡菜单将事件拖到另一个日历
我在标签容器中有一些日历,并通过导航菜单进行切换。我想通过导航菜单将事件拖动到另一个日历,当我拖动事件以及在导航菜单切换时,我丢失事件并得到错误“无法读取未定义的属性'isWithinClipping'。”当我返回到旧选项卡时,我在右上角看到了事件克隆。 html:
<div id='container'>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">calendar 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">calendar 2</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div id='source-calendar'></div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div id='destination-calendar'></div>
</div>
</div>
</div>
js代码:
var srcCalendarEl = document.getElementById('source-calendar');
var destCalendarEl = document.getElementById('destination-calendar');
var srcCalendar = new FullCalendar.Calendar(srcCalendarEl,{
editable: true,droppable: true,initialDate: '2020-09-12',events: 'https://fullcalendar.io/demo-events.json?overload-day',eventLeave: function(info) {
console.log('event left!');
}
});
var destCalendar = new FullCalendar.Calendar(destCalendarEl,{
initialDate: '2020-09-12',editable: true,// will let it receive events!
eventReceive: function(info) {
console.log('event received!');
}
});
document.addEventListener('DOMContentLoaded',function() {
srcCalendar.render();
destCalendar.render();
});
$('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
srcCalendar.render();
destCalendar.render();
});
$(".nav-link").on('mouseenter',function(e){
$(this).tab('show');
})
因此,有人告诉我如何通过FullCalendar中的选项卡菜单将事件拖到另一个日历吗?有什么想法。
解决方法
因此,我为我的任务找到了解决方案,为此,我将FullCalendar的源代码链接起来(非常困难)。 首先需要做的是,必须在getMirrorEl方法的ElementMirror类中的文档主体之前创建事件镜像克隆
ElementMirror.prototype.getMirrorEl = function () {
var sourceElRect = this.sourceElRect;
var mirrorEl = this.mirrorEl;
if (!mirrorEl) {
mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
// we don't want long taps or any mouse interaction causing selection/menus.
// would use preventSelection(),but that prevents selectstart,causing problems.
mirrorEl.classList.add('fc-unselectable');
mirrorEl.classList.add('fc-dragging');
applyStyle(mirrorEl,{
position: 'fixed',zIndex: this.zIndex,visibility: '',boxSizing: 'border-box',width: sourceElRect.right - sourceElRect.left,height: sourceElRect.bottom - sourceElRect.top,right: 'auto',bottom: 'auto',margin: 0
});
//this.parentNode.appendChild(mirrorEl);
document.body.appendChild(mirrorEl); // I don't no why not event clone realy create before body?
}
return mirrorEl;
}
第二个:由于此原因,当事件通过选项卡菜单fullCalendar拖动到另一个日历时,HitDragging类将获得新的droppableStore列表,但不会更新offsetTrackers列表。对于解决方案,我只调用方法this.prepareHits();。进行更新:
HitDragging.prototype.queryHitForOffset = function (offsetLeft,offsetTop) {
this.prepareHits(); // for update offsetTrackers list
var _a = this,droppableStore = _a.droppableStore,offsetTrackers = _a.offsetTrackers;
var bestHit = null;
for (var id in droppableStore) {
var component = droppableStore[id].component;
var offsetTracker = offsetTrackers[id];
if (offsetTracker.isWithinClipping(offsetLeft,offsetTop)) {
var originLeft = offsetTracker.computeLeft();
var originTop = offsetTracker.computeTop();
var positionLeft = offsetLeft - originLeft;
var positionTop = offsetTop - originTop;
var origRect = offsetTracker.origRect;
var width = origRect.right - origRect.left;
var height = origRect.bottom - origRect.top;
if (
// must be within the element's bounds
positionLeft >= 0 && positionLeft < width &&
positionTop >= 0 && positionTop < height) {
var hit = component.queryHit(positionLeft,positionTop,width,height);
console.log('hit',hit)
if (hit &&
(
// make sure the hit is within activeRange,meaning it's not a deal cell
!component.props.dateProfile || // hack for DayTile
rangeContainsRange(component.props.dateProfile.activeRange,hit.dateSpan.range)) &&
(!bestHit || hit.layer > bestHit.layer)) {
// TODO: better way to re-orient rectangle
hit.rect.left += originLeft;
hit.rect.right += originLeft;
hit.rect.top += originTop;
hit.rect.bottom += originTop;
bestHit = hit;
}
}
}
}
return bestHit;
};
也许这不是一个很好的解决方案,但确实可行。我希望FullCalendar的开发人员可以添加此功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。