将元素 UI DatePicker 添加到 Vue FullCalendar 自定义按钮答案

【问题标题】：Add Element UI DatePicker to Vue FullCalendar CustomButton将元素 UI DatePicker 添加到 Vue FullCalendar 自定义按钮
【发布时间】：2018-12-03 08:55:58
【问题描述】：

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

但是，我想在显示元素 UI 日期选择器的 VueFullCalendar 中应用它，我们只能这样做：

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

谢谢。

【问题讨论】：

标签： vue.js fullcalendar element-ui

【解决方案1】：

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

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

ref 创建完成后，我们可以通过以下方式获取 DOM 元素：

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

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

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

【讨论】：

【解决方案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。

【讨论】：