如何获取完整日历 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

---

参考文档

view财产的文件

版本

3 到版本 4 升级指南

Answer 2

**Create a config variable like below in js**
uiConfig = {
        calendar: {
          height: 450,
          editable: true,
          eventClick: alertEventOnClick,
          eventDrop: alertOnDrop,
          eventResize: alertOnResize,
          eventRender: eventRender
        }
      };
**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)"
    calendar="myCalendar" data-ng-model="eventSources">
  </div>
**The Following code is another way of accessing calendar**
$('#myCalendar').fullCalendar({
  eventClick: function(event, element) {
    event.title = "CLICKED!";
    $('#calendar').fullCalendar('updateEvent', event);
  }
});
**where Mycalender should be added in HTML like below**
<div ui-calendar="uiConfig.calendar" id="myCalendar"
    calendar="myCalendar" data-ng-model="eventSources">
  </div>