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

by

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.

8 thoughts on “How to disable event links in FullCalendar when using Google Calendar feed?”

  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.

    Reply

  2. 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,

    Reply

  3. I edited the fullcalendar.fullcalendar.js file in sites/all/modules/fullcalendar
    and commented out the lines 12 to 17 like : 

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

  4. This worked for me

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

  5. Adding a solution that works with FullCalendar v3 as of today (Aug 2018).

    To prevent eventClick from redirecting to the url specified in events, just use .preventDefault() like:

    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
}
    Reply

  6. 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…

    Reply

  7. 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;
        }
    }
});
    Reply

Leave a Comment