FullCalendar 4.0 в приложении Vue

Question

Я использую fullCalendar v4.0 без jquery. Я инициализировал это так

<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-fullcalendar, но он не работает по моей причине. Любая помощь будет благодарна.

Vue v.2.5.21

Answer 1

Вот так я и разобрался.

1. в HTML <div id="calendar"></div>

2. в вашем data() => {}

   calendar: null,
   config: {
     plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, momentPlugin],
     axisFormat: 'HH',
     defaultView: 'timeGridWeek',
     allDaySlot: false,
     slotDuration: '00:60:00',
     columnFormat: 'dddd',
     columnHeaderFormat: { weekday: 'short' },
     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: 'UTC',
     header: {
       left: '',
       center: '',
       right: '',
     },
     header: false,
     editable: true,
     events: 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 в событии, но пользовательские события должны иметь уникальный идентификатор. через который вы найдете и удалите его.

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