Question

在select上添加新事件时，似乎FullCalendar正在更改事件的开始和结束时间。这只发生在月视图中，而不是在AgendaWeek-view中。

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

当我使用此代码添加事件时，第一个console.log日志2018-04-10 06:00（或我设置为开始的任何时间），但第二个2018-04-10 00:00。从agendaWeek-view添加事件时，两者都记录2018-04-10 06:00。任何人都有类似的问题吗？

编辑： JSFiddle jsfiddle.net/sbxpv25p/494

Answer 1

我在本文档的帮助下完成了这项工作：https://fullcalendar.io/docs/moment

fullCalendar扩展了momentJS，使得时刻可能模糊定时。当您在无时间视图类型（例如月份）上选择某个区域时，会创建一个模糊的定时时刻，并且在此类型的时刻调用momentJS的“set”方法来设置时间无效，或者至少fullCalendar不会占用任何帐户它（我猜它会在决定如何渲染之前检查当前是否“hasTime”。通过拖动“月”视图创建的时刻将此标志设置为false，即使您尝试设置时间的组成部分。

你需要做的是使用fullCalendar的扩展“time”方法来设置时间，并使fullCalendar再次考虑当前对象是非模糊的（相对于时间）：

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/。

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

1 个答案: