Javascript FullCalendar v4动态设置日历’;s高度

Javascript FullCalendar v4动态设置日历’;s高度,javascript,laravel,npm,fullcalendar,fullcalendar-4,Javascript,Laravel,Npm,Fullcalendar,Fullcalendar 4,在我的Laravel应用程序中,我创建了.js文件“fullCalendar.js”,这是其中的一个文件: import { Calendar } from '@fullcalendar/core'; import dayGridPlugin from '@fullcalendar/daygrid'; import timeGridPlugin from '@fullcalendar/timegrid'; import listPlugin from '@fullcalendar/list';

在我的Laravel应用程序中,我创建了.js文件“fullCalendar.js”,这是其中的一个文件:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import rrulePlugin from '@fullcalendar/rrule';
import interactionPlugin from '@fullcalendar/interaction';
import momentPlugin from '@fullcalendar/moment';
import allLocales from '@fullcalendar/core/locales-all';

import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/list/main.css';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, rrulePlugin, interactionPlugin, momentPlugin ],
    header: {
        left: 'prev, next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    locales: allLocales,
    locale: 'sr-ME',
    timezone : 'local',
    editable: true,
    navLinks: true, // can click day/week names to navigate views
    eventLimit: true, // allow "more" link when too many events
    events: {
        url: '/eventi',
        failure: function() {
            document.getElementById('script-warning').style.display = 'block'
        }
    },
    loading: function(bool) {
        document.getElementById('loading').style.display = bool ? 'block' : 'none';
    }
  });
  calendar.render();
});
在我的blade
calendar.blade.php
中,我包含了该文件

并且我有id
id=“calendar”
,我可以看到我的日历,它工作没有任何问题。
如果我想在某些
blade.php
(视图)中使用我在其网站上看到的这一行动态设置日历的高度
calendar.setOption('height',700)
我收到这样一个错误:uncaughttypeerror:calendar.setOption不是函数
我尝试在文档准备就绪时或之前输入,甚至为
DOMContentLoaded
添加事件侦听器,但错误仍然存在。在.js文件中每次更改后,我都会运行以下命令来编译它。我做错了什么?

正如@ADyson在评论中所说,我只需要将日历声明为全局日历。一旦我这样做了,我就可以使用
calendar.setOption('height',700)
和其他日历功能。

您在代码中调用setOption的具体位置?我在我的刀片中没有看到它,我在刀片中包含了我的
fullCalendar.js
我尝试将它放在文档准备好的内部或外部,但它不起作用。
var calendar
只存在于
文档中。addEventListener('DOMContentLoaded',function(){
block它是在中声明的。因此,您必须在其中的某个位置使用
setOption
,或者您必须使
calendar
全局化,或者您必须找到其他方法将对
calendar
的引用传递到代码中的必要位置。这很有效。谢谢您,先生。