How to disable event links in FullCalendar when using Google Calendar feed?

Question

I am using FullCalendar library to load events in my calendar from Google Calendars. Unfortunately after events have been added to the calendar, they are clickable. When you click on the event you are automatically redirected to the Google Calendars page to view that specific event, or if you have enaught access rights - to directly edit it. While this is very useful for event management, I cannot imagine why a site visitor would like to be redirected to an external page every time he clicks on event in a calendar.

Is there a way to disable "open on click" in the FullCalendar, overwriting link opening to an empty javascript function call could also be an option.

Solution 1

Might be worth trying your own event renderer in the fullcalendar options:

{ eventRender:function (event, element)}  

To do this, you will need to write all of the rendering code yourself - can start with the original implementation and tweak as needed.
Have not tried this wih a google calendar implementation, but have used it with custom json to turn on or off href as needed.

Alternatively, you could:
Hack the gcal.js file to make it not set the href property on the event objects.
Or
Intercept the event data before rendering, and remove the href property.

Solution 2

The documentation on the FullCalendar website refers to the callback function 'eventClick':

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

If the url property is set on the Event Object, then returning false prevents the browser from visiting the event url. So, when you intialise FullCalendar add the eventClick callback function with something along the lines of...

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

Solution 3

Edit file 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']

Delete line: url: url,

Solution 4

This worked for me

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

Solution 5

Old question, but here's how I "fixed" it.

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

This will most likely prevent you from implementing other click behaviors, like opening a form to edit an event when you click it.

If you added a className to your Google Calendar events you might want to do it like this

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

That might work…

View more solutions

Comments

[a20]

-1 because editting the original library is a very bad suggestion. Fullcalendar offers many options for overriding it's functions, including eventClick().

[Sebastian Giro]

good catch, but you should start using => instead of function. Thanks for the solution.

[Silvestre Herrera]

Yeah, back in 2015 when I posted that answer ES6's arrow functions weren't broadly supported.

[Yousaf Hassan]

Thanks man, it worked for me too! One thing to keep in mind, If you cancel event bubbling, it will not allow you to click on any other icon on the event as well (Not what I wanted) so I removed the first line and just preventDefault was enough.

[Vl4dimyr]

This no longer works with version 5.5 use this: stackoverflow.com/a/55801956/7015138

[Vl4dimyr]

Deprecated. For version 5.5 use stackoverflow.com/a/55801956/7015138

[Trees4theForest]

Any thoughts on how to remove the <a> tag itself so the cursor doesn't change to a link?