完整日历 (v2.x） 从事件中获取日单元格单击

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

本文关键字：事件 获取 取日 单击 单元格 日历 v2      更新时间：2023-09-26

我正在努力检索单击多天（周期）事件（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 = ??
        };

我尝试使用"可选"但"eventClick"JS 事件不传播，也不会"选择"日期

谢谢

如果您根本不需要捕获事件点击，则只需向所有事件添加一个类即可pointer-events: none;

JSFiddle Demo

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

IE8

浏览器

嘭。有一种黑客方法可以在IE8上模拟pointer-events: none;，但是在尝试实现它时，我找到了一种更简单的方法来实现目标。（此处介绍了模拟pointer-events黑客攻击。

要在光标处获取日期：

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

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
},

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

从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]映射它

这是我的解决方案：

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);
}

以下是 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);
     }

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

使用 visibility/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;
}
相关文章：