更好的IE8解决方法

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 = ??
        };

我尝试过使用＆＃34; selectable＆＃34;但是＆＃34; eventClick＆＃34; JS事件没有传播，也没有选择＆＃34;那天

由于

Answer 1

如果您根本不需要捕获事件点击，则可以使用pointer-events: none;

为所有事件添加一个类

JSFiddle Demo

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

IE8

的Bleh。在IE8上模拟pointer-events: none;有一种hacky方法，但在尝试实现它时，我找到了一种更简单的方法来实现目标。（模拟的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解决方法

（这似乎不起作用）

事实证明，锚标签有更好的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
},

Answer 2

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

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

$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 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一起使用，并且还考虑了窗口的当前滚动位置：

     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.可以按月/周/日的方式查看。

使用可见性/ z-index解决了隐藏事件层时“全天”容器暂时缩小的问题。

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获取day-cell？

5 个答案:

IE8

更好的IE8解决方法