时间戳

首页 > 解决方案 > 如何获取 fullcalendar v.4.2.0 实例？

javascript - 如何获取 fullcalendar v.4.2.0 实例？

问题描述

因此，我的页面中有一个 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();

标签： javascriptfullcalendarfullcalendar-4

解决方案

由于您使用的是 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 版升级指南

推荐阅读