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

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

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

谢谢。

Answer 1

using namespace string;封装只是vue-fullcalendar包的包装，因此将ref传递给它，将为您提供jQuery附加到的基础DOM实例：

fullcalendar

创建<full-calendar :events"events" ref="fullcalendar">后，我们可以通过执行以下操作获得DOM元素：

ref

但这不是您真正想要的，是吗？您想要this.$refs.fullcalendar.fullcalendar({ //your jQuery logic here })使用绑定而不处理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。

将Element UI DatePicker添加到Vue FullCalendar CustomButton

2 个答案: