Opening Google Calendar event links from within Full Calendar using Magnific Popup

Question

I'm using Full Calendar to pull in Google Calendar information and would like to do something similar to this which populates empty elements in a hidden element when links in the calendar are clicked, and then displays it in a Bootstrap modal window, except with Magnific Popup which I'm already using for modals on this particular site.

In the Bootstrap example, the modal is initialised with:

$('#modal').modal();

but with Magnific Popup, it's initalised on the link you click on instead. So I'm not really sure how to go about combining the two techniques.

So in my HTML, I have:

<div id="calendar"></div>
<div id="calendar-popup" class="white-popup mfp-hide">
    <h2 id="modalTitle" class="modal-title"></h2>
    <div id="modalBody" class="modal-body"></div>
    <a id="eventUrl" class="button" rel="external">Event page</a>
</div>

and my js:

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,basicDay'
    },
    googleCalendarApiKey: 'XXXX',
    eventClick:  function(event, jsEvent, view) {
        $('#modalTitle').html(event.title);
        $('#eventUrl').attr('href',event.url);
        $('#calendar-popup').magnificPopup({type:'inline'});
    },
    eventSources: [
        …
    ]
});

At the moment I'm initialising magnificPopup with #calendar-popup but that's the target, not the link that's being clicked.

Answer 1

Attach Magnific Popup to the eventRender:

eventRender: function(event, element) {
     //Initialize Magnific Popup Plugin for event info on eventClick
     element.magnificPopup({
          items: {
               // Set the source to the div containing event's data
               src: '#eventContent',
               type: 'inline'
          }
      });
}

More info here: http://fullcalendar.io/docs/event_rendering/eventRender/