如何获取在 Fullcalendar v4 中双击背景事件的日期？答案

【问题标题】：How to get date where was background event double clicked in Fullcalendar v4?如何获取在 Fullcalendar v4 中双击背景事件的日期？
【发布时间】：2020-07-29 07:52:48
【问题描述】：

我的 Fullcalendar 中有背景事件，我使用时间线视图。我添加了一个双击触发器来处理此操作，但我需要获取日期，双击完成的位置。

例如，如果用户点击突出显示的方块，它应该触发“11 月 6 日被双击”。（绿线是背景事件）。

eventRender: function(info) {
  $(info.el).on('dblclick', function() {
    // I need to somehow get clicked date here
    alert('XYZ was double clicked!');
  });
});

这里有办法获取点击日吗？

【问题讨论】：

The docs 表明info 包括event。所以info.event.start 会给你开始日期。
它给了我背景事件的开始，而不是我需要的点击日期。
哦，我明白了，如果您有多日活动，它们会有所不同。
这是不可能的。你为什么要这样做？你打算用这个日期做什么？
我的用例是，用户 dblclick 到字段并弹出带有两个日期（从 - 到）的弹出窗口。第一个日期填写点击日期，用户可以从日历中选择第二个日期。提交后是根据填写的日期创建的新事件。它适用于较长的事件，例如，如果它们达到另一个月。还有其他想法怎么可能吗？

标签： fullcalendar double-click fullcalendar-4

【解决方案1】：

我提出了解决方案。它有点脏，但它可以工作。

我用鼠标点击坐标计算
获取日期列的宽度
计算点击列的顺序
按点击列的顺序，我在标题中得到相同的列
我从标题列中的data-date 属性中获取日期

$(info.el).on('dblclick', function(event) {
    // get the element of the whole row
    var element = $(this).parent().offset();

    // get the x position of cursor
    var x = event.pageX - element.left;

    // get the width of column, dynamically calculated because width of viewport can be changed
    var width = $('.fc-head .fc-time-area th.fc-widget-header').outerWidth() - 1;

    // order number of clicked column
    var number = Math.ceil(x / width);

    // now we have a date of clicked date (despite we clicked background event)
    alert($('.fc-head .fc-time-area th.fc-widget-header:nth-of-type(' + number + ')').data('date'));
});

也许它可以帮助某人。请注意，此解决方案计入背景事件 - 点击这些事件。

【讨论】：