Добавить элемент DatePicker пользовательского интерфейса в Vue FullCalendar CustomButton

Question

Используя jQuery, мы можем легко выполнять DOM-манипуляции с viewRender, чтобы мы могли добавить дополнительные DOM / действия, которые мы хотим, к существующему HTML-элементу.

$('#calendar').fullcalendar({
    customButtons: {
        newButton: {
           text: 'New Button', // if possible I want this to have an element ui datepicker component here
           click: function() {
              //I want to show date picker when this button is clicked
           }
        }
    }
})

Однако я хочу применить это в VueFullCalendar, гдепоказан элемент выбора даты пользовательского интерфейса, где мы можем сделать только так:

<full-calendar :events="events" />

Спасибо.

Answer 1

Я закончил воссозданием пользовательской панели инструментов.У Fullcalendar есть свой API, в котором мы можем использовать, например:

Объявление:

    let calendarEl = document.getElementById('fCalendar');
    this.fCalendar = new Calendar(calendarEl, {
         //options
    })
    this.fCalendar.render();

Перейти к примеру метода сегодня:

this.fCalendar.today() // go to today

Обратите внимание, что я использую альфа v4.

Answer 2

pacakage vue-fullcalendar - это просто оболочка для пакета jQuery, поэтому передача ему ссылки даст вам базовый экземпляр DOM, к которому fullcalendar был присоединен:

<full-calendar :events"events" ref="fullcalendar">

Создав ref, мы можем получить элемент DOM, выполнив:

this.$refs.fullcalendar.fullcalendar({
  //your jQuery logic here
})

Но это не совсем то, что вы хотите, не так ли?Вам нужен vue способ использования привязок, а не манипулирования DOM.

К сожалению, вам придется изменить пакеты для этого, поскольку это не настоящий компонент Vue, а просто оболочка вокруг jQuery.компонент