Question

我正在尝试扩展FullCalender JS插件的功能。我是javascript OOP概念以及jQuery插件开发的新手。在第一步中，我想知道如何使用和访问FullCalendar插件。可以在任何DOM元素上调用fullCalendar方法，而日历参数可以作为JSON对象给出：

$('#calendar').fullCalendar({   
    editable: true,             // a parameter  
    events: "./events.php",     // some events

    eventRender: function(event, element) {     // a callback
        // do something here
    }
});

我尝试再次调用此创建方法并更改回调eventRender，但它不起作用。我猜它是因为日历只允许DOM元素上有一个活动实例。但是，如何在不破坏和重新创建日历的情况下更改参数和回调？

此外，我试图直接访问日历对象，但我想由于封装它不会通过FullCalendar公开。相反，我看到可以使用指定要在Calendar上调用的方法的字符串来调用fullCalendar函数。这是插件封装的常用机制吗？

Answer 1

关于第一部分，FullCalendar在初始化期间合并选项

var options = mergeOptions({}, defaults, instanceOptions);

因此您只能通过

更改eventRender

var currentHandler

$('#calendar').fullCalendar({   
eventRender: function(event, element) {     // a callback
    currentHandler(event, element)
}
});

然后更改currentHandler实施（即currentHandler = myFirstHandler）

当谈到调用插件方法时，是的，这是一种常见的做法，并在此处进行了描述How to create a jQuery plugin with methods?

Answer 2

相反eventRender我会使用官方eventAfterAllRender回调，请参阅docs。

        // hide div after fullcalendar has initialized
        eventAfterAllRender: function(view)
        {
            $('.mycustomdiv').hide();
        }

这有点隐藏在文档中。最好将此功能重命名为afterinit或类似。

Answer 3

不确定您在发布时使用的是什么版本的fullcalendar，但对于现在使用v2或v3查看的任何人来说，fullcalendar具有允许您添加/删除处理程序的on/off和get/set实用程序函数或在init之后动态获取/设置选项。

https://fullcalendar.io/docs/utilities/handlers/

https://fullcalendar.io/docs/utilities/dynamic_options/

根据文件：

var calendar = $('#calendar').fullCalendar('getCalendar');

calendar.on('eventRender', function(event, element, view) {
  console.log('event rendered!', event);
});

Javascript - 初始化后更改FullCalendar.js回调

3 个答案: