CODEWITHSUNDEEP
wordpresstwitter-bootstrapmodal-dialogfullcalendarbootstrap-modal
Arvind K.
Arvind K.

Reputation: 1294

Wordpress Plugin Fullcalendar not showing in bootstrap modal dialog

I am using WP Fullcalendar Plugin (https://wordpress.org/plugins/wp-fullcalendar/) on my website. It works fine as a shortcode placed on a normal page template. However I want it to work in a Bootstrap Modal Dialog box which is opened on clicking a link.

Here is my code of modal Dialog with Fullcalendar shortcode in it.

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

And here is the link to open this dialog box

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

Now when I open the modal dialog box it does not load the calendar and only shows the loader spinning and spinning.

As suggested in answers like this one, Full calendar not showing inside bootstrap modal, the solution like

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

is not feasible here because the fullCalendar function needs to be passed the "fullcalendar_args" which is set in a footer hook and the related javascript file is located within the plugin files.

Any suggestion to make it work without hacking core plugin files?

Upvotes: 0

Views: 459

Answers (1)

Arvind K.
Arvind K.

Reputation: 1294

Yes I have had to hack the core plugin inline.js file, as there is no other option right now.

1.You have to declare the "fullcalendar_args" variable as global

In line 4 of /includes/js/inline.js, Change

var fullcalendar_args = {

to 

fullcalendar_args = {

2.Comment out 90 and 91 lines in the same file

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

And then

3.Call these two lines in the page template where you have modal to be called, such as:

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

After this has been done, if wanted to show normal calendar on any other page, you may have to call the following two lines where ever you want calendar to appear, such as in footer or something, based on a condition etc.

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

It would be good if further updates to WP Fullcalendar Plugin incorporate these changes based on a shortcode argument or something similar approach.

Upvotes: 1

Related Questions