CODEWITHSUNDEEP
jquerytwitter-bootstrapfullcalendar
ItWorksOnLocal
ItWorksOnLocal

Reputation: 167

Fullcalendar not showing in a modal

I'm using FullCalendar jQuery plugin to show calendar.

What happening is it's not working on a bootstrap modal.
I've tried somethings that I got from internet, but still no luck.

Someone please help me.

<a href="#" id="see-doc-cal" data-toggle="modal" data-target="#doc-cal" >See Doctor Calendar</a>
<div class="modal fade" id="doc-cal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Doctor's Appointments</h4>
      </div>

      <div class="modal-body">
        <div class="doctor-detail-wrap">
          <div id="doctor-calendar"></div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- <input type="submit" class="btn btn-warning" id="doc-update" value="Update"> -->
        <button type="button" class="btn btn-default" id="plist-close" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Main.js

$("#doctor-calendar").fullCalendar({
  header:{
    left:'prev',
    center:'title',
    right:'next'
  },
  defaultView:'agendaDay'
});

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

Also tried with this

$(document).on("click","#see-doc-cal",function(){

  $('#doctor-calendar').fullCalendar();
});

Upvotes: 0

Views: 3082

Answers (3)

Lucas Barbosa
Lucas Barbosa

Reputation: 11

I solved this with a very simple trick;

first - i find the class who add 'hidden' property in the modal (in my case, i'm using semantic ui, 'modal' class are responsable for that).

<div class = 'ui <!--long modal--> full-calendar'> 
    <div id="calendar"></div>
</div>

Then, in jquery code i do that:

$('#calendar').fullCalendar({

    dayClick: function() {



    },
    weekends: false,
    showNonCurrentDates: false,
    locale: 'pt-br',
    render: true

});

$(".ui.full-calendar").addClass('long modal');// you can put here your hidden modal class.

that way the calendar is rendered first and then are hidden, showing when the modal is clicked.

Upvotes: 1

Hassan Imam
Hassan Imam

Reputation: 22534

I have used the below code to render fullCalendar since it is hidden in the modal pop up.

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

Fullcalendar is not displayed when the element which contain it is hidden in page. See the working example.

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

$("#doctor-calendar").fullCalendar({
    header:{
      left:'prev',
      center:'title',
      right:'next'
    },
    defaultView:'agendaDay'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<a href="#" id="see-doc-cal" data-toggle="modal" data-target="#doc-cal" >See Doctor Calendar</a>

<div class="modal fade" id="doc-cal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Doctor's Appointments</h4>
      </div>

      <div class="modal-body">
        <div class="doctor-detail-wrap">
          <div id="doctor-calendar"></div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- <input type="submit" class="btn btn-warning" id="doc-update" value="Update"> -->
        <button type="button" class="btn btn-default" id="plist-close" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I only added $("#doc-cal").modal(open);.

Got to open the modal to see it, right?
Or maybe your problem was about the load-up of the libraries...

Anyway, it is working great in this CodePen

Upvotes: 0

Related Questions