如何在全日歷中禁用按鈕冒泡？

Question

Fullcalendar 版本是 3.9.0。

當我雙擊左上角的“上一個”或“下一個”按鈕時，視圖將向后或向前兩個月。 沒關系。 但是在這種情況下，通過 Promise 檢索到的視圖中的事件是重復的。 快速點擊后，它們甚至會變成三倍。

我嘗試使用'event.stopPropagation();' 停止事件冒泡但沒有運氣。 將事件 dblclick 事件轉換為單擊后，Fullcalendar 似乎沒有相應的響應。 如果觸發雙擊，可能會跳到下一年或上一年。 它仍然跳過幾個月並顯示重復的事件。

$("button[aria-label='prev']").on('dblclick', function(e) {
    e.stopPropagation();
});

在 Fullcalendar 中檢索事件，請找到以下代碼。

$('#calendar').fullCalendar({ 
    theme: true,
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth,listYear'
        },
    viewRender : function(view, element) {     
        viewRenderInit(view, element);
    },
    ... 
});

//when switch/init view, only get events related to current calendar view

let viewRenderInit = function (view, element) {

    $('#calendar').fullCalendar( 'removeEvents');

    let u = '/getbookings';
    let r = '';
    let _common_params = '_token='+$("[name=\'_token\']").val()+'&view='+view.name+'&time_frame='+ view.title;

    get(u, _common_params).then(function(response) {
        r = response;
        $('#calendar').fullCalendar( 'addEventSource', JSON.parse(r));
    }, function(error) {
        console.error("Failed!", error);
    });
}


let get = function(url, params) {
    return new Promise(function(resolve, reject) {    
        var req = new XMLHttpRequest();
        req.open('GET', url+"?"+params, true);

        req.onload = function() {      
            if (req.status == 200) {       
                resolve(req.response);
            }
            else {        
                reject(Error(req.statusText));
            }
        };

        req.onerror = function() {
            reject(Error("Network Error"));
        };

        req.send();
    });
}

我希望為按鈕“上一個”或“下一個”禁用事件 dblclick。 或者，通過 Ajax 調用禁止通過 Promise 檢索重復事件。

感謝任何建議。

Answer 1

好的，您的方法不是在 fullCalendar 中添加事件的推薦方法。 該文檔提到了三種合適的方式（請參閱https://fullcalendar.io/docs/v3/event-data ）。 對於您的情況，我認為“事件作為 JSON 提要”方法是合適的，並為您節省了大量代碼。 有關詳細信息，請參閱https://fullcalendar.io/docs/v3/events-json-feed 。

這種方法的想法是 fullCalendar 處理代表您發送 AJAX 請求的所有細節。 它會

a) 每次日歷移動到新的日期范圍時發送一個新請求

b) 在請求中自動發送開始和結束日期，以便您的服務器可以返回一組合適的要顯示的事件（即屬於這些日期的事件）。 （現在，您的代碼不發送日期，所以我假設您的服務器必須一直返回日期，在您使用應用程序一段時間后，這可能最終成為一個非常大的列表，其中大部分沒有人會看。）

c) 仍然允許您向​​請求添加額外信息，例如您的安全令牌

設置真的很簡單：

$('#calendar').fullCalendar({ 
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth,listYear'
    },
    events: {
      url: "/getbookings",
      data: {
        _token: $("[name='_token']").val()
      }
    }
});

這就是你所需要的......沒有額外的 viewRender 代碼，也不需要 XHR 或 Promises。 fullCalendar 將完成剩下的工作。

---

注意在您的原始代碼中，您似乎根據視圖類型下載了不同的事件。 我不太明白這其中的邏輯，因為視圖只是查看同一時間段的不同方式。 如果某個事件發生在特定日期，那么無論使用哪種類型的視圖，您肯定都希望在該日期看到它？ 這只是布局問題，而不是數據問題。

但是，如果您出於某種原因確實需要這樣做，盡管也會自動接收相關的開始/結束日期，您仍然可以將額外的數據發送到服務器，您可以使用動態data回調來完成（根據文檔）：

events: {
  url: "/getbookings",
  data: function() { // a function that returns an object
    var view = $('#calendar').fullCalendar('getView');
    return {
      _token: $("[name='_token']").val(),
      view: view.name,
      time_frame: view.title
    };
}
}

您還需要關閉延遲獲取以使其在每次視圖切換時與服務器通信（否則它只會在日期范圍更改時發送請求，因此在同一個月內從月到周切換不會通常會導致一個新的請求）：

lazyFetching: false

Answer 2

您可以考慮簡單地關閉事件處理程序，然后在一兩秒鍾后重新綁定它。

$("button[aria-label='prev']").on('click', function(e) {
    $("button[aria-label='prev']").off();
    //the rest of your function here
    setTimeout(function() {
      //rebind the original function
      $("button[aria-label='prev']").on('click', yourOriginalFunction);
    }, 3000);
});