我直接从文档中获取了事件部分代码,该代码显示了如果传递多个源和多个事件,您将如何获得事件代码。这看起来很棒,但我不知道如何使它动态生成。我从数据库获取了一个包含php中数据的查询,并将其传递到javascript数组,并且需要将结果打印在x返回的行数的适当标签中。
我的任何尝试做一段时间,for循环或函数的尝试,都会使其中的关键字变量(例如eventSource,event,Title,Start)变得无效且无法被javascript读取,从而导致我的日历崩溃。如果要采用数组,必须要有一种动态生成此部分的方法?感谢任何提示。在我想“循环”或动态生成的地方添加了评论。
<html lang='en'>
<head>
<meta charset='utf-8' />
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
// I want to loop from here...
eventSources: [
// your event source
{
events: [ // put the array in the `events` property
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
}
],
color: 'black', // an option!
textColor: 'yellow' // an option!
}
// any other event sources...
]
// to here. Passing an array I would have gotten from a database query
// with some integer that goes down until rows = 0
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
答案 0 :(得分:0)
我本应该对此发表评论,但是我没有足够的声誉来做到这一点。 从我看来,您正在尝试在初始化日历后动态添加事件,但是如果在DOMContentLoaded事件中初始化日历,则不会发生这种情况。这样做会导致您无法访问日历变量,因为运行代码的范围很大。您应该做的(对我有用)是直接将Calendar元素和Calendar本身附加为各自的变量,而不必将其包装在DOMContentLoaded事件侦听器中。所以基本上您的代码现在看起来像这样:
<script>
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]});
</script>
然后,您可以通过调用calendar.addEvent()