Fullcalendar：在周视图或日视图中检测点击

Question

我目前正在检测月视图中的双击事件。这很好用：

dayRender: (date, element) => {
  element.bind('dblclick', ...)
}

我正在寻找的是一种在用户处于日视图或周视图时执行相同操作的方法。我希望能够检测到点击事件，并获取他们点击的日期和时间（请注意，时间与 day/week 视图相关，但与月视图无关）。

有什么想法吗？

Answer 1

对于将来发现此问题的任何人，这是我想出的 hacky 解决方案：

因为 fullcalendar 不会在每个时间段呈现 <div>（例如，单个 div 表示 2015 年 1 月 2 日下午 1 点到 1:30），而是在视觉上表示单个time slot 作为一行和一列的交集，我们需要一种方法来计算给定点击的时间。日期信息已经以 data-date 属性的形式附加到每个列（天）DOM 元素。我所做的是 forked fullcalendar, and added time info to each row (time slot) with a new data-time attribute.

然后，我在 ViewRender 上监听双击事件，找出用户点击的元素，并从中推导出日期和时间段：

viewRender: (view, element) ->

  if view.type in ['agendaDay', 'agendaWeek']
    element.on 'dblclick', (event) ->

      els = document
        .elementsFromPoint event.pageX, event.pageY
        .filter (e) -> (e.hasAttribute 'data-date') or (e.hasAttribute 'data-time')
      date = (_.find els, (e) -> e.hasAttribute 'data-date').getAttribute 'data-date'
      time = (_.find els, (e) -> e.hasAttribute 'data-time').getAttribute 'data-time'

      return unless date and time

      startTime = moment "#{ date } #{ time }"
      endTime = (moment startTime).add 30, 'minutes' # clone + increment

这是一个非常棘手的解决方案，并且混合了各种问题。然而，在 fullcalendar 添加对 timeClick 事件的支持之前，这工作得很好。

希望这对其他人有帮助！

Fullcalendar：在周视图或日视图中检测点击

Fullcalendar: detect click in week or day view

javascript

fullcalendar

frontend