javascript - 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 事件不会传播，也不会“选择”日期

谢谢

Answer 1

如果您根本不需要捕获事件点击，您可以使用 pointer-events: none; 为所有事件添加一个类。

JSFiddle Demo

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

IE8

呸。有一个 hacky 方法来模拟 pointer-events: none;在 IE8 上，但在尝试实现它时，我发现了一种更简单的方法来实现目标。 (模拟的 pointer-events 黑客被描述为 here 。)

获取光标处的日期:

• 隐藏事件表
• 获取光标下的元素
• 显示事件表

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 解决方法

(这个好像不行)

事实证明 anchor 标签有更好的pointer-events: none;解决方法。 https://stackoverflow.com/a/18118092/728393

您只需添加属性 disabled="disabled"到 <a>它可以被点击。

JSFiddle Demo

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