如何获得 fullcalendar v.4.2.0 实例？

Question

所以我的页面中有一个 fullCalendar (v.4.2.0) 实例（在 document.ready 上加载/构建），我想在其他函数中访问该 fullCalendar 实例以动态添加事件。

使用$('#calendar').fullCalendar('getView')它会显示 fullCalendar() 方法不存在的错误：

$(...).fullCalendar 不是函数

如何访问该实例？

我用来生成日历的代码如下：

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {

    plugins: [ 'timeGrid', 'dayGrid' ],

        defaultView: 'timeGridWeek', 

        height: 700,

        locale: 'pt',

        allDaySlot: false,

        handleWindowResize: true,

        events: [

            {

                title: 'Teste1', // a property!

                start: '2019-07-23 16:00', 

                end: '2019-07-23 17:00', 

                backgroundColor: '#fcba03',

                borderColor: '#fcba03',

            }

        ]

    });

calendar.render();

Answer 1

由于您使用的是 fullCalendar 版本 4，它不再被编写为 jQuery 插件，因此无法使用 jQuery 语法来访问这些方法。相反，只需引用您的calendar变量（它可能需要在您的应用程序中具有广泛的范围 - 全局或易于通过其他方式访问）。您会注意到现有代码在调用calendar.render();.此外，在“getView”方法的特定情况下，这已被简单地替换view为引用当前视图的属性。例如（见最后一行）：var calendarEl = document.getElementById('calendar');var calendar = new FullCalendar.Calendar(calendarEl, {    plugins: [ 'timeGrid', 'dayGrid' ],        defaultView: 'timeGridWeek',         height: 700,        locale: 'pt',        allDaySlot: false,        handleWindowResize: true,        events: [            {                title: 'Teste1', // a property!                start: '2019-07-23 16:00',                 end: '2019-07-23 17:00',                 backgroundColor: '#fcba03',                borderColor: '#fcba03',            }        ]    });calendar.render();var vw = calendar.view; //get the current view

Answer 2

**Create a config variable like below in js**uiConfig = {&nbsp; &nbsp; &nbsp; &nbsp; calendar: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 450,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; editable: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventClick: alertEventOnClick,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventDrop: alertOnDrop,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventResize: alertOnResize,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eventRender: eventRender&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };**defines the above methods in js file**alertEventOnClick = function (date, jsEvent, view) {}alertOnDrop = function (date, jsEvent, view) {}alertOnResize = function (date, jsEvent, view) {}eventRender = function (date, jsEvent, view) {}**and in html add below lines of code**<div ui-calendar="uiConfig.calendar" id="myCalendar" calendar-watch-event="extraEventSignature(event)"&nbsp; &nbsp; calendar="myCalendar" data-ng-model="eventSources">&nbsp; </div>**The Following code is another way of accessing calendar**$('#myCalendar').fullCalendar({&nbsp; eventClick: function(event, element) {&nbsp; &nbsp; event.title = "CLICKED!";&nbsp; &nbsp; $('#calendar').fullCalendar('updateEvent', event);&nbsp; }});**where Mycalender should be added in HTML like below**<div ui-calendar="uiConfig.calendar" id="myCalendar"&nbsp; &nbsp; calendar="myCalendar" data-ng-model="eventSources">&nbsp; </div>