Question

我在我的网站上使用WP Fullcalendar插件（https://wordpress.org/plugins/wp-fullcalendar/）。它作为普通页面模板上的短代码工作正常。但是我希望它能够在单击链接时打开的Bootstrap模式对话框中工作。

这是我的模态对话框的代码，其中包含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函数需要传递＆＃34; fullcalendar_args＆＃34;这是在页脚钩子中设置的，相关的javascript文件位于插件文件中。

有什么建议可以让它在不破坏核心插件文件的情况下运行吗？

Answer 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.在页面模板中调用这两行，您可以在其中调用模式，例如：

$('#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插件的进一步更新根据短代码参数或类似的方法包含这些更改，那将是一件好事。

Wordpress插件Fullcalendar没有显示在bootstrap模式对话框中

1 个答案: