【问题标题】:Setting the default click selection highlighting in FullCalendar issues在 FullCalendar 问题中设置默认单击选择突出显示
【发布时间】:2013-09-26 23:34:48
【问题描述】:

我正在使用全日历,网格设置为 1/2 小时间隔(slotMinutes 设置为 30 分钟)。我希望默认单击选择至少为 1 小时事件,但我希望开始时间以 30 分钟为增量。换句话说,我不希望用户能够突出显示小于一小时的任何时间段,但我希望他们能够突出显示从一小时或半小时开始的 1 小时时间段(即: 1:30 - 2:30)。

如果我将 snapMinutes 设置为 60,这通过不让它们突出显示少于 1 小时的任何内容来解决第一部分。但是,它不会让用户选择不完全在偶数小时内的 1 小时时段(即:它将允许选择 1:00-2:00 但不允许选择 1:30-2:30)。有什么办法可以实现吗?

这是我正在使用的日历(CoffeeScript)

options = {
    defaultView: 'agendaWeek'
    defaultEventMinutes: 60
    selectable: true
    selectHelper: true
    eventTextColor: 'black'
    allDayDefault: false
    header: {
        left: 'prev,next today'
        center: ''
        right: 'title'
    }
    titleFormat: {
        month: 'MMMM yyyy'
        week: "MMM d[, yyyy]{ '—'[ MMM] d, yyyy}"
        day: 'dddd, MMM d, yyyy'
    }
    ignoreTimezone: true
    slotMinutes: 30
    snapMinutes: 60
}
elm.fullCalendar(options)

这是一个 JSFiddle: http://jsfiddle.net/lcrees/9f82c/

我的问题的第二部分是我希望能够动态设置上面的默认最小点击选择。从这个问题看来,我无法在不破坏和重新创建日历的情况下动态更新 snapMinutes 选项:
https://code.google.com/p/fullcalendar/issues/detail?id=293

还有其他建议吗?
洛里尔

【问题讨论】:

  • 在 SO 上,您通常需要展示第一次尝试;您是否尝试过自己编写代码?如果是这样,请继续发布相关代码。否则,这个问题就太宽泛了。
  • 嗨 Teeg,我已经添加了用于日历的代码。
  • 选项的动态更新作为一项功能请求已经受到关注有一段时间了:code.google.com/p/fullcalendar/issues/…
  • 我在这里向 FullCalendar 添加了一个新功能请求,以将选择持续时间功能与 snapMinutes 功能分开:code.google.com/p/fullcalendar/issues/detail?id=2018
  • 我仍然希望这个问题能够得到妥善解决,但已经实施了一种解决方法,如果用户选择的持续时间少于所需的持续时间,它会提醒他们持续时间无效并取消选择什么他们刚刚选择了。不理想,但总比没有好。

标签: javascript jquery calendar fullcalendar


【解决方案1】:

如果我正确理解了您的问题,您可以覆盖 dayClick 方法(参见文档),并在内部使用 fullcalendar 选择方法进行自己的选择(再次参见文档)。 您可以使用dayClick的'date'参数作为统计时间进行选择,并通过添加1h获得结束时间。 上述效果将是,在单击指定日期时,您将从长度为 1 小时的单击单元格中获得选择。 希望这会有所帮助,如果您需要更具体的建议,请告诉我(我最近花了很多时间在 fullcalendar 中处理此类问题)

【讨论】:

  • 嗨 4rlekin,我认为这行不通。 dayClick 回调仅在释放鼠标时触发,并且仅在未进行选择时触发(即:如果在一个插槽内单击并释放,则会触发它,但如果您单击并拖动以进行选择并且在不同的插槽中释放鼠标,dayClick 不会触发)。我在上面的小提琴中试过这个并确认了这一点。
猜你喜欢
  • 1970-01-01
  • 2019-04-11
  • 2013-08-08
  • 2021-11-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多