亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

fullcalendar.io 5:addEventSource 無法通過外部函數工作

fullcalendar.io 5:addEventSource 無法通過外部函數工作

富國滬深 2023-09-28 15:31:13
對于一個小項目,我想在運行時添加事件。實際的日歷是使用數據庫中的數據創建的。單獨的腳本創建其他事件,這些事件是在日歷運行時動態創建的。這些事件隨后應添加到現有日歷中。為了進行測試,我有一個日歷和一個外部按鈕。如果單擊該按鈕,則會將事件添加到日歷中。創建日歷并識別單擊。但沒有添加任何事件。思想錯誤在哪里?超文本標記語言<button class="holiday">Add Feiertage</button> <div id='calendar'></div>代碼:document.addEventListener('DOMContentLoaded', function() {  var calendarEl = document.getElementById('calendar');  var calendar = new FullCalendar.Calendar(calendarEl, {    headerToolbar: {      left: 'prev,next today',      center: 'title',      right: 'dayGridMonth,timeGridWeek'    },    initialDate: '2020-11-12',    businessHours: true, // display business hours    editable: true,    events: [      {        title: 'Business Lunch',        start: '2020-11-03T13:00:00',        constraint: 'businessHours'      },      {        title: 'Meeting',        start: '2020-11-13T11:00:00',        constraint: 'availableForMeeting', // defined below        color: '#257e4a'      },      {        title: 'Conference',        start: '2020-11-18',        end: '2020-11-20'      },      {        title: 'Party',        start: '2020-11-29T20:00:00'      },      // areas where "Meeting" must be dropped      {        groupId: 'availableForMeeting',        start: '2020-11-11T10:00:00',        end: '2020-11-11T16:00:00',        display: 'background'      },      {        groupId: 'availableForMeeting',        start: '2020-11-13T10:00:00',        end: '2020-11-13T16:00:00',        display: 'background'      },      // red areas where no events can be dropped      {        start: '2020-11-18',        title: 'Test-Holiday',        overlap: false,        display: 'background',        color: '#ff9f89'      }    ]  });  calendar.render();});這是我的測試: https: //jsfiddle.net/LukasHH/tu14xfwr/
查看完整描述

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/


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 106 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號