Support » Plugin: WP FullCalendar » The calendar does not show in a Twitter Boostrap 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>

    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, https://stackoverflow.com/questions/20330166/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? Perhaps you need to make fullcalendar_args variable Global?

    • This topic was modified 2 years, 4 months ago by  Arvind Kumar.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support angelo_nwl

    (@angelo_nwl)

    sorry but I’m afraid that you might need to hack into the javascript files of the plugin to make this work.

    Yes, I had to. It is a simple fix which could be put into the inline.js file:

    1.
    in line Line 4, Change

    var fullcalendar_args = {
    to
    fullcalendar_args = {
    (making variable global)

    2.

    Comment out 90 and 91 lines

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

    And then call it in the page template 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, you may have to call the two lines whereever you want calendar to appear normally, 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 incorporate these changes based on a shortcode argument or something similar.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘The calendar does not show in a Twitter Boostrap Modal Dialog’ is closed to new replies.