Vue应用程序中的FullCalendar 4.0

Question

我使用的是没有jquery的fullCalendar v4.0。我把它初始化成这样

<div id="calendar"></div>

在数据对象中我有这个。

    calendar: null,
    config: {
      plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
      axisFormat: 'HH',
      defaultView: 'timeGridWeek',
      allDaySlot: false,
      slotDuration: '00:60:00',
      columnFormat: 'dddd',
      titleFormat: 'dddd, MMMM D, YYYY',
      defaultDate: '1970-01-01',
      dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      eventLimit: true,
      eventOverlap: false,
      eventColor: '#458CC7',
      firstDay: 1,
      height: 'auto',
      selectHelper: true,
      selectable: true,
      timezone: 'local',
      header: {
        left: '',
        center: '',
        right: '',
      },
      select: (event) => {
        this.selectCalendar(event)
      },
      header: false,
      events: null
    }
  }

虽然在数据变量中有一个日历，但现在我可以从任何地方使用render()和destroy()。但我在处理日历事件时遇到了一个问题：

比如

  select: (event) => {
    this.selectCalendar(event)
  }

我在methods: {}中定义了另一个方法为selectCalendar()，以便在select中调用它，但是我得到了一个错误

Uncaught TypeError: Cannot read property 'selectCalendar' of undefined

我想对select、eventClick、eventDrop、eventResize进行很少的操作，但是我无法在配置中调用方法。

此外，是否可以将select或任何方法定义为

select: this.selectCalendar

这样它就可以直接将一个事件发送到定义的方法中？

我试过了万年历，但这对我的事业不起作用。任何帮助都是感恩的。

Vue诉2.5.21

Answer 1

我就是这样解决这件事的。

1. 在html <div id="calendar"></div>中
2. 在你的data() => {}里 日历: null，config：{ plugins: interactionPlugin，dayGridPlugin，timeGridPlugin，listPlugin，momentPlugin，axisFormat：'HH'，defaultView：'timeGridWeek'，allDaySlot: false，slotDuration：'00:60:00'，columnFormat：'dddd'，columnHeaderFormat：{Wed：'short‘}，defaultDate：'1970-01-01'，dayNamesShort："Sun"，"Mon"，"Tue"，"Wed"，“清华”，"Fri"，"Sat"，eventLimit: true，eventOverlap: false，eventColor：'#458CC7'，firstDay: 1，高度：'auto'，selectHelper:真，可选:真，时区：'UTC'，标题：{左侧：''，中间：''，''，}，标题: false，可编辑: true : true : null }

不要第一次在配置中定义任何select、resize或dropEvent，但接下来要呈现日历的部分执行如下操作

    if (this.calendar == null) {
      console.log(this.schedule)
      let calendarEl = document.getElementById('calendar');

      let calendarConfig = this.config

      let select = (event) => {
        this.selectCalendar(event)
      }

      let eventClick = (event) => {
        this.clickCalendar(event)
      }

      let eventDrop = (event) => {
        this.dropCalendar(event)
      }

      let eventResize = (event) => {
        this.resizeCalendar(event)
      }

      calendarConfig.select = select;
      calendarConfig.eventClick = eventClick;
      calendarConfig.eventDrop = eventDrop;
      calendarConfig.eventResize = eventResize;

      this.calendar = new Calendar(calendarEl, calendarConfig);
      this.calendar.render();

      this.renderEvents()
    }

现在，您可以在自己的方法中处理FullCalendar的那些事件。

同时，在this.calendar中有日历可以让你在任何地方，在methods: {}中销毁它

在FullCalendar 4.0中，情况发生了变化，但非常简单。

这些是附加到FullCalendar事件的方法

  selectCalendar(event) {
    this.calendar.addEvent(event)
  },

  clickCalendar(event) {
    if (window.confirm("Are you sure you want to delete this event?")) {
      let findingID = null
      if (event.event.id === "") {
        findingID = event.el
      } else {
        findingID = event.event.id
      }
      let removeEvent = this.calendar.getEventById( findingID )
      removeEvent.remove()
    }
  },

  dropCalendar(event) {

  },

  resizeCalendar(event) {

  },

  destroyCalendar() {
    if (this.calendar != null) {
      this.calendar.destroy();
      this.calendar = null
    }
  }

当您添加事件时。您可以在事件中通过el找到它，但是自定义事件应该有一个唯一的ID.。通过这个ID.，您将找到并删除它。

Answer 2

我使用的是vue完整日历，您可以像下面的代码那样处理完整日历的事件

  <full-calendar :event-sources="eventSources" @event-selected="myEventSelected"></full-calendar>


export default{
    methods:{
    caculateSomething(event){
        //do st here
    },
    myEventSelected(event){
        //do st here
      this.caculateSomething(event)
      console.log(event)
    }
  }
}