Wordpress 插件 Fullcalendar 未显示在引导模式对话框中答案

【问题标题】：Wordpress Plugin Fullcalendar not showing in bootstrap modal dialogWordpress 插件 Fullcalendar 未显示在引导模式对话框中
【发布时间】：2017-07-13 12:21:36
【问题描述】：

我在我的网站上使用 WP Fullcalendar 插件 (https://wordpress.org/plugins/wp-fullcalendar/)。它可以作为放置在普通页面模板上的简码正常工作。但是我希望它在单击链接时打开的引导模式对话框中工作。

这是我的模态对话框代码，其中包含 Fullcalendar 短代码。

  <!-- Modal -->
  <div class="modal fade" id="myCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myCalendarModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myCalendarModalLabel">Modal title</h4>
        </div>
        <div class="modal-body"><?php echo do_shortcode( ' [fullcalendar] ' );  ?></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

这里是打开这个对话框的链接

<a class="open-cal" href="#" data-toggle="modal" data-target="#myCalendarModal">Open Calendar</a>

现在，当我打开模式对话框时，它不会加载日历，只显示加载器旋转和旋转。

正如在Full calendar not showing inside bootstrap modal 这样的答案中所建议的那样，解决方案就像

$('#myCalendarModal').on('shown.bs.modal', function () {
   $(".wpfc-calendar").fullCalendar('render');
});

这里不可行，因为 fullCalendar 函数需要传递在页脚挂钩中设置的“fullcalendar_args”，并且相关的 javascript 文件位于插件文件中。

有什么建议可以让它在不破解核心插件文件的情况下工作？

【问题讨论】：

标签： wordpress twitter-bootstrap modal-dialog fullcalendar bootstrap-modal

【解决方案1】：

是的，我不得不破解核心插件 inline.js 文件，因为目前没有其他选择。

1.您必须将“fullcalendar_args”变量声明为全局变量

在/includes/js/inline.js的第4行，更改

var fullcalendar_args = {

到

fullcalendar_args = {

2.注释掉同一文件中的90行和91行

/*
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);    
$('.wpfc-calendar').first().fullCalendar(fullcalendar_args);
*/

然后

3.在你有modal要调用的页面模板中调用这两行，如：

$('#myCalendarModal').on('shown.bs.modal', function () {
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
});

完成此操作后，如果想在任何其他页面上显示普通日历，您可能必须根据条件等在您希望日历出现的任何地方调用以下两行，例如在页脚或其他内容中。

$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);

如果 WP Fullcalendar 插件的进一步更新基于短代码参数或类似方法包含这些更改，那就太好了。

【讨论】：