我了解您的需求,以下是对于您提到的问题的答案:
问题:我似乎不能在eventDrop和drop上获得resourceId,我正在使用resourceTimelineMonth并试图移动它们。
解答:在使用FullCalendar的resourceTimelineMonth视图时,eventDrop和drop事件确实无法直接获取到resourceId。这是因为在该视图中,事件被放置在不同的资源行(resource column)中,而不是普通的日历格子中。
要解决这个问题,可以通过其他方式获取resourceId。以下是一种可能的解决方法:
以下是一个示例代码,演示了如何通过以上步骤获取resourceId:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeline' ],
defaultView: 'resourceTimelineMonth',
resources: [
{ id: 'a', title: 'Resource A' },
{ id: 'b', title: 'Resource B' },
{ id: 'c', title: 'Resource C' }
],
events: [
{ id: '1', resourceId: 'a', start: '2022-01-01T10:00:00', end: '2022-01-01T12:00:00', title: 'Event 1' },
{ id: '2', resourceId: 'b', start: '2022-01-02T14:00:00', end: '2022-01-02T16:00:00', title: 'Event 2' },
{ id: '3', resourceId: 'c', start: '2022-01-03T08:00:00', end: '2022-01-03T10:00:00', title: 'Event 3' }
],
eventDrop: function(info) {
var resourceId = getResourceIdFromEventDrop(info);
console.log('Dropped event to resource with ID: ' + resourceId);
},
drop: function(info) {
var resourceId = getResourceIdFromDrop(info);
console.log('Dropped external event to resource with ID: ' + resourceId);
}
});
calendar.render();
function getResourceIdFromEventDrop(info) {
var eventStart = info.event.start;
var eventEnd = info.event.end;
var eventPosition = info.draggedEl.getBoundingClientRect();
var resourceColumns = Array.from(document.querySelectorAll('.fc-resource-cell'));
var matchingResourceColumn = resourceColumns.find(function(column) {
var columnPosition = column.getBoundingClientRect();
return eventPosition.left > columnPosition.left && eventPosition.right < columnPosition.right;
});
var resourceId = matchingResourceColumn.dataset.resourceId;
return resourceId;
}
function getResourceIdFromDrop(info) {
var eventPosition = info.draggedEl.getBoundingClientRect();
var resourceColumns = Array.from(document.querySelectorAll('.fc-resource-cell'));
var matchingResourceColumn = resourceColumns.find(function(column) {
var columnPosition = column.getBoundingClientRect();
return eventPosition.left > columnPosition.left && eventPosition.right < columnPosition.right;
});
var resourceId = matchingResourceColumn.dataset.resourceId;
return resourceId;
}
});
在上述代码中,通过在eventDrop和drop事件中调用getResourceIdFromEventDrop和getResourceIdFromDrop方法,可以获取到对应的resourceId,并将其输出到控制台。
请注意,以上代码仅是一种示例,实际应用中您可能需要根据自己的业务逻辑进行相应的调整。
希望以上信息对您有所帮助!如果需要了解更多关于FullCalendar和资源视图的内容,您可以访问腾讯云的全球加速器产品页面:腾讯云全球加速器。
领取专属 10元无门槛券
手把手带您无忧上云