Support » Plugin: WP FullCalendar » The calendar does not show in a Twitter Boostrap Modal Dialog

  • I am using WP Fullcalendar Plugin ( 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 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>

    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,, the solution like

    $('#myCalendarModal').on('', function () {

    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


    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:

    in line Line 4, Change

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


    Comment out 90 and 91 lines

    $(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);

    And then call it in the page template such as:

      $('#myCalendarModal').on('', function () {
        $(document).trigger('wpfc_fullcalendar_args', [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]);

    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.