使用 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;
      },