在我的 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
来编译它。我做错了什么?
最佳答案
正如 @ADyson 在评论中所说,我只需将日历声明为全局日历。完成后,我可以使用 calendar.setOption('height', 700);
和其他日历函数。
关于javascript - FullCalendar v4 动态设置日历的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58075533/