将元素UI日期选择器添加到Vue FullCalendar自定义按钮

Question

使用jQuery，我们可以轻松地对viewRender进行DOM操作，这样我们就可以向现有HTML元素添加我们想要的额外DOM/操作。

$('#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中应用这一点，其中显示了一个元素UI日期选择器，我们只能这样做：

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

谢谢。

Answer 1

vue-fullcalendarpacakage只是jQuery包的包装器，因此向其传递ref将为您提供fullcalendar附加到的底层DOM实例：

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

创建ref后，我们可以通过以下操作获得DOM元素：

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

但这不是你真正想要的，是吗？您希望使用vue方式来使用绑定，而不是操纵DOM。

不幸的是，您将不得不为此更改包，因为这不是真正的Vue组件，而是jQuery组件的包装器

Answer 2

我最终重新创建了一个自定义工具栏。Fullcalendar有其API，我们可以在其中使用，例如：

声明：

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

转到今天的方法示例：

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

请注意，我使用的是v4 alpha。