FullCalendar v4 动态设置日历的高度

Posted 2023-03-14

【中文标题】FullCalendar v4 动态设置日历的高度

【英文标题】：FullCalendar v4 dynamically set a calendar’s height

【发布时间】：2020-01-24 07:07:06

【问题描述】：

在我的 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();
);

在我的刀片 calendar.blade.php 中，我已经包含了该文件 <script src=" asset('js/fullCalendar.js') " ></script> 我有 <div>，ID 为 id="calendar" 我可以看到我的日历，它可以正常工作。 如果我想用我在他们的网站上看到的这条线动态设置某个blade.php（视图）中日历的高度calendar.setOption('height', 700); 我收到一条错误消息：Uncaught TypeError: calendar.setOption is not a function 我尝试在文档准备好时或之前放入，甚至为DOMContentLoaded 添加事件侦听器，但错误仍然存​​在。每次更改 .js 文件后，我都会运行以下命令 npm run dev 来编译它。我做错了什么？

【问题讨论】：

您在代码中究竟在哪里调用 setOption？没看到

在我包含 fullCalendar.js 的刀片中，我尝试将其放入准备好的文档中或外部，但它不起作用。

好吧，var calendar 只存在于声明它的 document.addEventListener('DOMContentLoaded', function() 块中。所以要么你必须在其中的某个地方使用 setOption，要么你必须使 calendar 全局，或者你有找到其他方式将calendar 的引用传递到代码中的必要位置。

成功了。谢谢你，先生。

【参考方案1】：

正如@ADyson 在他的评论中所说，我只需要将日历声明为全局。完成后，我可以使用calendar.setOption('height', 700); 和其他日历功能。