1 回答

TA貢獻1841條經驗 獲得超3個贊
calendar您使用的變量引用的是calendar.addEventSource與頁面上顯示的不同的 FullCalendar 實例。您創建了一個全新的日歷 - 但隨后沒有將其呈現到頁面上。這就是為什么你不會收到錯誤,但也沒有發生任何有用的事情。
原始塊calendar已在您的塊內定義并填充document.addEventListener('DOMContentLoaded', function() {,但您嘗試在塊內創建一個新塊jQuery(document).ready(function($) {。您需要使用現有的引用calendar- 但當然,當您需要它時它超出了范圍,因為您位于不同的代碼塊中。
現在,document.addEventListener('DOMContentLoaded', function() {和jQuery(document).ready(function($) {本質上是等價的,只是一個是用原生JS編寫的,一個是jQuery語法。它們基本上執行相同的任務 - 即延遲代碼的執行,直到 DOM 完全加載。因此,將它們同時放在頁面中沒有多大意義或增加任何價值。只需使用一個塊來包含所有代碼,然后您就不會遇到任何范圍問題。
除此之外,出于類似的原因,document.addEventListener('DOMContentLoaded', function() { 在jQuery“就緒”塊中再有另一個也是沒有意義的!你根本不需要它。我只能假設您不理解該代碼的作用并認為它是 fullCalendar 的一部分 - 事實并非如此。
和
var i = calendar.initialEvents();
console.log(i);
沒有意義。fullCalendar 中沒有名為initialEvents 的方法,并且您似乎并沒有嘗試使用i任何方法,因此您可以刪除這些行。
例如
jQuery(document).ready(function($) {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//...etc
});
calendar.render();
$('.holiday').on('click', function() {
calendar.addEventSource({
events: [ // put the array in the `events` property
{
title: 'Test-Event',
start: '2020-11-11',
overlap: false,
display: 'background',
color: '#ff9f89'
}
]
});
});
演示: https: //jsfiddle.net/32w4kLvg/
添加回答
舉報