代码之家 › 专栏 › 技术社区 › Thomas Hesselberg

FullCalendar在添加到月视图时更改事件的开始/结束时间

fullcalendar vue.js

Thomas Hesselberg · 技术社区 · 7 年前

在select上添加新事件时,FullCalendar似乎正在更改我的事件的开始和结束时间。这仅在月视图中发生,而不在agendaWeek视图中发生。

mounted () {
  let vm = this
  $(this.$refs.calendar).fullCalendar({
    defaultView: 'month',
    header: {
      left: 'title',
      center: '',
      right: 'today agendaWeek,month prev,next'
    },
    allDaySlot: false,
    allDayDefault: false,
    firstDay: 1,
    select: function (start, end, jsEvent, view, resourceObj) {
      vm.addEvent(start, end, view)
    }
  })
},
methods: {
  addEvent: function (start, end) {
    // Here this.hour and this.minute are variables which in my example would be 6 and 0
    from = moment(start).set({'hour': this.hour, 'minute': this.minute})
    to = moment(end).set({'hour': this.hour, 'minute': this.minute})
    this.renderEvent(from, to)
  },
  renderEvent: function (start, end) {
    // Make temporary id
    let tmpId = `tmp-${this.getLocalEvtId()}`

    console.log(start.format('YYYY-MM-DD HH:mm'))

    // Add new event
    $(this.$refs.calendar).fullCalendar('renderEvent', {
      id: tmpId,
      title: 'NA',
      start: start,
      end: end,
      color: '#bd362f',
      editable: false
    }, false)

    // Find newly created event
    let event = $(this.$refs.calendar).fullCalendar('clientEvents', tmpId)[0]

    console.log(event.start.format('YYYY-MM-DD HH:mm'))
  }
}

使用此代码添加事件时,第一个控制台。日志记录2018-04-10 06:00(或我设置为开始的任何时间),但第二个2018-04-10 00:00。从agendaWeek视图添加事件时,两个日志都记录在2018-04-10 06:00。有人经历过类似的问题吗?

编辑: JSFIDLE公司 jsfiddle.net/sbxpv25p/494

1 回复 | 直到 7 年前

ADyson 7 年前

我在以下文档的帮助下解决了这个问题: https://fullcalendar.io/docs/moment

fullCalendar扩展了momentJS,使时刻 时间不明确 。当您在无时间视图类型(如month)上选择一个区域时,它会创建一个时间不明确的时刻,并且在这种时刻类型上调用momentJS的“set”方法来设置时间没有任何效果,或者至少fullCalendar没有考虑它(我猜它会在决定如何渲染之前检查“Hastinme”时刻。通过在“month”视图上拖动创建的时刻将此标志设置为 false ,即使在您尝试设置时间组件之后)。

您需要做的是使用fullCalendar的extension“time”方法来设置时间,并使fullCalendar再次将moment对象视为无歧义的(相对于时间):

function addEvent(start, end, view) {
  start.time('06:00:00');
  end.time('06:30:00');

  if (view.name === 'agendaWeek') to.add(1, 'days')
  renderEvent(start, end);
}

看见 http://jsfiddle.net/sbxpv25p/495/ 作为一个工作示例。