How to handle links in FullCalendar event body?

Question

I'm using FullCalendar 2 on a project. I've been working with it before, I'm quite familiar with its API.

I need to put a delete link in my events body (below date, title...). I did it using eventRender, where I also put my events description. My delete link is a simple

<a class="delete-event-link" href="...">delete</a>

But I also used eventClick : when I click on an event a modal box appears with an edition form.

Here's my trouble : when I click on my delete link, eventClick fires first (so my modal show up), then the link target page is loaded.

I added a small listener on my link click event, and tried to stopPropagation() for this event but since eventClick fires first it doesn't work :

$('#calendar-wrapper').on('click', '.delete-event-link', function(e) {
  console.log('link click');
  e.stopPropagation();
});

Am I misunderstanding something here ? What would be a good solution to handle links AND eventClick with FullCalendar 2 ?

Perhaps change your eventClick functionality to be the click event for the event Title? — MikeSmithDev, Nov 18 '14 at 13:18
It should work, but I would like to keep the eventClick for my edition modal box, I find it more user friendly... — Florian Motteau, Nov 18 '14 at 13:21

MikeSmithDev · Accepted Answer · 2014-11-18T15:13:32.910

I was able to get the results by adding the following code to the eventRender:

$(element).find('.delete-event-link').click(function(e) {
    e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
    alert('deleted');
});

Working example:

Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
}

$('#fullCal').fullCalendar({
      events: [{
        title: 'Main Event 1',
        start: new Date(),
        end: (new Date()).addHours(2),
        allDay: false
      }, {
        title: 'Main Event 2',
        start: (new Date()).addHours(5),
        end: (new Date()).addHours(7),
        allDay: false,
      }],
      header: {
        left: '',
        center: 'prev title next',
        right: ''
      },
      timezone:'local',
      defaultView: 'agendaWeek',
      eventRender: function(event, element) {
        $(element).find('.fc-title').append('<br><a href="javascript:void(0);" class="delete-event-link">delete</a>');
      
        $(element).find('.delete-event-link').click(function(e) {
            e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
            alert('deleted');
        });
      },
      eventClick: function(event, element) {
        alert('clicked event');
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script>

<div id="fullCal"></div>

Works great for my use case, see http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation for more information — Florian Motteau, Nov 19 '14 at 08:02

score 0 · Answer 2 · answered Aug 26 '17 at 18:57

0

For me e.stopImmediatePropagation(); din't work, but e.preventDefault(); does.

answered Aug 26 '17 at 18:57

RomkaLTU

3,683
8
40
63

How to handle links in FullCalendar event body?

2 Answers2