Fullcalendar:检测周视图或日视图中的点击



我当前在月视图中检测到双击事件。这很好用:

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

我正在寻找的是当用户处于日视图或周视图时也能做到这一点的方法。我希望能够检测到点击事件,并获得他们点击的日期和时间(注意,时间在日/周视图中是相关的,但在月视图中不是相关的)。

有什么想法吗?

对于将来发现这一点的人,以下是我提出的破解解决方案:

由于fullcalendar不会为每个时隙呈现<div>(例如,单个div表示2015年1月2日下午1点至1点30分),而是将单个时隙可视化为行和列的交叉点,因此我们需要一种方法来计算给定点击的时间。Day信息已经以data-date属性的形式附加到每个列(Day)DOM元素。我所做的是分叉fullcalendar,并用一个新的data-time属性将时间信息添加到每一行(时隙)。

然后,我在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事件的支持之前,这项工作效果非常好。

希望这能帮助其他人!

相关内容

  • 没有找到相关文章

最新更新