使用 Google 日歷提要時如何禁用 FullCalendar 中的事件鏈接？

Question

我正在使用 FullCalendar 庫從 Google 日歷加載日歷中的事件。 不幸的是，在事件被添加到日歷后，它們是可點擊的。 當您點擊事件時，您會自動重定向到 Google 日歷頁面以查看該特定事件，或者如果您沒有訪問權限 - 直接對其進行編輯。 雖然這對事件管理非常有用，但我無法想象為什么站點訪問者每次單擊日歷中的事件時都希望被重定向到外部頁面。

有沒有辦法在 FullCalendar 中禁用“點擊打開”，也可以選擇覆蓋打開一個空 javascript 函數調用的鏈接。

Answer 1

FullCalendar 網站上的文檔是指回調函數“eventClick”：

http://arshaw.com/fullcalendar/docs/mouse/eventClick/

如果事件對象上設置了 url 屬性，則返回 false 會阻止瀏覽器訪問事件 url。 因此，當您初始化 FullCalendar 時，請添加 eventClick 回調函數，其中包含以下內容...

$('#calendar').fullCalendar({
    eventClick: function(event) {
        if (event.url) {
            return false;
        }
    }
});

Answer 2

可能值得在 fullcalendar 選項中嘗試自己的事件渲染器：

{ eventRender:function (event, element)}  

為此，您需要自己編寫所有渲染代碼 - 可以從原始實現開始並根據需要進行調整。
還沒有在谷歌日歷實現中嘗試過這個，但已經將它與自定義 json 一起使用以根據需要打開或關閉 href。

或者，您可以：
破解 gcal.js 文件，使其不在事件對象上設置 href 屬性。
要么
渲染前截取事件數據，去掉href屬性。

Answer 3

編輯文件 gcal.js

events.push({
    id: entry['gCal$uid']['value'],
    title: entry['title']['$t'],
    //url: url,
    start: start,
    end: end,
    allDay: allDay,
    location: entry['gd$where'][0]['valueString'],
    description: entry['content']['$t']

刪除行: url: url,

Answer 4

老問題，但這是我“修復”它的方法。

eventRender(event, element) {
    element.on('click', e => e.preventDefault());
}

這很可能會阻止您實現其他點擊行為，例如在您點擊事件時打開一個表單來編輯它。

如果您將className添加到您的 Google 日歷活動中，您可能希望這樣做

eventRender(event, element) {
    element.on('click', e => {
        if (!!element.closest('.your-gcalendar-class-name').length) {
            e.preventDefault();
        }
    });
}

那可能有用……

Answer 5

這對我有用

eventClick: function (event) {
    // Prevent redirect to Google Calendar
    event.jsEvent.cancelBubble = true;
    event.jsEvent.preventDefault();
}

Answer 6

添加一個適用於今天（2018 年 8 月）的 FullCalendar v3 的解決方案。

要防止eventClick重定向到events指定的url ，只需使用.preventDefault()如：

eventClick: function( event, jsEvent, view ) {
    jsEvent.preventDefault();


    // click events previously defined will also be prevented
    // so, any alternate tasks (like showing modal) on eventClick must go here
}

Answer 7

我發現這些解決方案不再適用於v5.5.1 。

無論如何，另一種選擇是使用eventDataTransform用空白覆蓋event.url 。

這樣event.title將呈現為純文本，因此，與基於eventClick的輸出不同，瀏覽器不會在左下角/右下角等處顯示 URL。

    eventDataTransform: function(event) {
        event.url = "";
        return event;
    }

Answer 8

我編輯了sites/all/modules/fullcalendar的fullcalendar.fullcalendar.js文件，並注釋掉了第 12 到 17 行，例如：

 var options = {
      eventClick: function (calEvent, jsEvent, view) {
      /* if (settings.sameWindow) {
          window.open(calEvent.url, '_self');
        }
        else {
          window.open(calEvent.url);
        } */
        return false;
      },