Fullcalendar & Bootstrap: Callbacks work for .modal() but not .dropdown('toggle')

Question

I am building a calendar application and would like a context menu to be triggered when a user drags a selection of time or clicks on a time of day. (Using Bootstrap's .dropdown() on an element positioned absolutely at jsEvent.pageX,jsEvent.pageY).

Unfortunately there's a problem - The dropdown menu does not appear to be triggered correctly. What is strange is that .modal() triggers just perfectly.

My assumption is that the code Fullcalendar uses to listen to and capture the events in order to acknowledge/render user selection is preventing Bootstrap from triggering correctly, but why not fail for .modal() as well?

Any help is much appreciated.

jsFiddle: http://jsfiddle.net/sqjz558x/

function eventCreate(start, end, jsEvent, view) {
  // Works 
  //$('.modal-new-event').modal(); 

  // Doesn't work, notice highlighting of button during drag
  $('.dropdown-toggle').dropdown('toggle'); 

  // Works but is unreliable (using unselect handler)
  //$('.dropdown-menu').toggle(); 
}

$(document).ready(function() {
    $('#calendar').fullCalendar({
        defaultView: 'agendaWeek',
        selectable: true,
        select: function (start, end, jsEvent, view) {
          return eventCreate(start, end, jsEvent, view); 
        },      
        dayClick: function (date, jsEvent, view) { 
          return eventCreate(date, null, jsEvent, view); 
        },
        unselect: function (view, jsEvent) { 
         // $('.dropdown-menu').toggle();
        }       
    })
});

Answer 1

Just stop the event propagation in the calendar:

document.getElementById("calendar").addEventListener("click", function (e) {
    e.stopPropagation();
});

See working JSFiddle

The dropdown is being opened by the original click event. Then the event propagates, triggered again and closes the dropdown. e.stopPropagation(); will prevent this behavior.