首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我似乎不能在eventDrop和drop上获得resourceId,我正在使用resourceTimelineMonth并试图移动它们

我了解您的需求,以下是对于您提到的问题的答案:

问题:我似乎不能在eventDrop和drop上获得resourceId,我正在使用resourceTimelineMonth并试图移动它们。

解答:在使用FullCalendar的resourceTimelineMonth视图时,eventDrop和drop事件确实无法直接获取到resourceId。这是因为在该视图中,事件被放置在不同的资源行(resource column)中,而不是普通的日历格子中。

要解决这个问题,可以通过其他方式获取resourceId。以下是一种可能的解决方法:

  1. 在eventDrop或drop事件中,通过获取事件的开始时间(start)和结束时间(end),以及事件所在的位置信息(draggedEl或relatedTarget),来确定事件被拖动到的资源行。
  2. 通过比较事件的位置信息和资源行的位置信息,找到对应的资源行。
  3. 通过找到的资源行,获取其对应的resourceId。

以下是一个示例代码,演示了如何通过以上步骤获取resourceId:

代码语言:txt
复制
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和资源视图的内容,您可以访问腾讯云的全球加速器产品页面:腾讯云全球加速器

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券