Fullcalendar (v2.x) 从 eventClick 获取日期单元格？

Question

我在点击多天（期间）事件 (eventClick) 时很难检索点击的日期。

点击背景单元格，很简单：

function dayClick(date, jsEvent, view) {         

   //todo: store related day
   $scope.selectedDay = date;
}

但是当点击一个事件（在几天的时间段内）时，我无法检索到用户具体在哪一天。（我需要根据背景天执行不同的操作）：

function alertEventOnClick(event, jsEvent, view) {

            // "event" stores only start and end date without any reference to the current day
            // "jsEvent" retrieve the "td" element but fullcalendar HTML structure is complex and it's impossible to go-up to find the day-cell
            // $scope.selectedDay = ??
        };

我试过 "selectable" 但 "eventClick" JS 事件没有传播，"select" 那天

谢谢

Answer 1

所以我终于找到了一个依赖于解析关闭 DOM Table 元素的快速（&dirty？）解决方案。

从 eventClick js 事件中，我可以检索 currentTarget 单击并返回 table headers ：第一行包含 thead headers 包含单元格日期映射的定义。

$scope.alertEventOnClick = function(event, jsEvent, view) {

    var columnIndex = $(jsEvent.currentTarget).parent('td').get(0).cellIndex + 1;
    var parentTable = $(jsEvent.currentTarget).closest('table');
    var dateString = $('thead td:nth-child('+ columnIndex +')', parentTable).attr('data-date');

    $scope.selectedDay = moment(dateString);
};

编辑：解决方案适用于每天 1 个事件。但是每天KO不止一场比赛...

另一种解决方案是确定单击单元格的 x/y 位置（通过计算 div/td 个子单元）并将其映射到 view.coordMap.grid.cellDates[position]

Answer 2

如果您根本不需要捕获事件点击，您可以只添加一个 class 到所有带有 pointer-events: none;

的事件

JSFiddle Demo

eventRender: function (event, element) {
    $(element).addClass('clickThrough');
},

IE8

呸。有一个 hacky 方法可以在 IE8 上模拟 pointer-events: none; 但在尝试实现它时我发现了一种更简单的方法来实现目标。（模拟的 pointer-events hack 描述为 here。）

获取光标处的日期：

隐藏活动table
获取光标下的元素
显示事件table

JSFiddle Demo

eventClick: function (calEvent, jsEvent, view) {
    var topLayer = $(jsEvent.currentTarget).closest("tbody");
    topLayer.hide(); //hide the entire event layer (makes it work with multiple events)
    var dayElement = document.elementFromPoint(jsEvent.pageX, jsEvent.pageY); //get the element under the cursor (should be a day cell)
    topLayer.show();
    alert($(dayElement).data("date"));
}

更好的 IE8 解决方法

（这个好像不行）

事实证明，锚标签有更好的 pointer-events: none; 解决方法。

您只需将属性 disabled="disabled" 添加到 <a> 即可点击。

JSFiddle Demo

eventRender: function (event, element) {
    $(element).addClass('clickThrough').attr("disabled","disabled"); //disabled attribute is a IE workaround for pointer-events
},

Answer 3

这是我的解决方案：

eventClick: function(event, jsEvent, view) {
    var day=$(this).closest('.'+(view.type=='month'?'fc-row':'fc-time-grid')).find('.fc-bg td:eq('+$(this).closest('td').index()+')').data('date');
    console.log(day);
}

Answer 4

这里是 slicedtoad 的解决方案，经过修改后可以与 fullcalendar 的 v4 一起使用，并且还考虑到了 window 的当前滚动位置：

     eventClick: function(ev) {
        var topLayer = $(ev.el).closest(".fc-row");
        var eventLayer = topLayer.find(".fc-content-skeleton");
        eventLayer.hide();
        var dayElement = $(document.elementFromPoint(ev.jsEvent.pageX - window.pageXOffset, ev.jsEvent.pageY - window.pageYOffset));
        eventLayer.show();
        var current_day = dayElement.attr("data-date");
        console.log(current_day);
     }

Answer 5

我稍微更新了 Dane Iracleous 的解决方案以使其适用于 1. 当同一天有多个事件时单击多日事件。和 2. 这在 month/week/day 视图中有效。

使用 visibility/z-index 解决了我的 'all day' 容器在隐藏事件层时暂时收缩的问题。

getClickedDate(event) {
   //used to get specific date clicked on multiple day event
   let topLayer = $(event.el).closest(".fc-row");
   let eventLayer = topLayer.find(".fc-content-skeleton");
   let initialZIndex = $(eventLayer).css('z-index')

   $(eventLayer).css({ 'visibility': 'hidden', 'z-index': '-1'});

   let dayElement = $(document.elementFromPoint(event.jsEvent.pageX - window.pageXOffset, event.jsEvent.pageY - window.pageYOffset));

   $(eventLayer).css({ 'visibility': 'visible', 'z-index': initialZIndex });

   let clickedDate = dayElement.attr("data-date");
   console.log('clicked date', clickedDate)
   return clickedDate;
}

Fullcalendar (v2.x) 从 eventClick 获取日期单元格？

Fullcalendar (v2.x) Getting day-cell from an eventClick?

javascript

events

fullcalendar

IE8

更好的 IE8 解决方法