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

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

  •  0
  • Thomas Hesselberg  · 技术社区  · 6 年前

    在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 回复  |  直到 6 年前
        1
  •  1
  •   ADyson    6 年前

    我在以下文档的帮助下解决了这个问题: 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/ 作为一个工作示例。