添加元素 UI DatePicker 到 Vue FullCalendar CustomButton

Question

使用 jQuery，我们可以轻松地对 viewRender 进行 DOM 操作，这样我们就可以将我们想要的额外 DOM/actions 添加到现有的 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
           }
        }
    }
})

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

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

谢谢。

Answer 1

vue-fullcalendar pacakage 只是 jQuery 包的包装器，因此传递一个 ref 给它会给你底层的 DOM 实例，即 fullcalendar 是附于：

<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。

添加元素 UI DatePicker 到 Vue FullCalendar CustomButton

Add Element UI DatePicker to Vue FullCalendar CustomButton

fullcalendar

vue.js

element-ui