使用 Magnific Popup 从完整日历中打开 Google 日历事件链接

Question

我正在使用 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，我已经在这个特定网站上使用它作为模式。

在 Bootstrap 示例中，模态框初始化为：

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

但是对于 Magnific Popup，它是在您点击的 link 上初始化的。所以我不太确定如何结合这两种技术。

所以在我的 HTML 中，我有：

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

和我的 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: [
        …
    ]
});

目前我正在用 #calendar-popup 初始化 magnificPopup 但那是目标，而不是被点击的 link。

Answer 1

将 Magnific Popup 附加到 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'
          }
      });
}

更多信息在这里：http://fullcalendar.io/docs/event_rendering/eventRender/

使用 Magnific Popup 从完整日历中打开 Google 日历事件链接

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

google-calendar-api

fullcalendar

magnific-popup