Fullcalendar 未在模式中显示

Question

我正在使用 FullCalendar jQuery 插件来显示日历。

发生的情况是它不适用于引导模式。
我尝试了一些从互联网上获得的东西，但仍然没有运气。

请有人帮帮我。

<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');
});

也试过这个

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

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

Answer 1

我用一个非常简单的技巧解决了这个问题；

首先 - 我找到在模态中添加“隐藏”属性的类（在我的情况下，我使用语义 ui，“模态”类对此负责）。

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

然后，在 jquery 代码中我这样做：

$('#calendar').fullCalendar({

    dayClick: function() {



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

});

$(".ui.full-calendar").addClass('long modal');//你可以把你隐藏的modal类放在这里。

这样日历会先呈现然后隐藏，在单击模式时显示。

Answer 2

我只添加了$("#doc-cal").modal(open);。

必须打开模态才能看到它，对吗？
或者也许你的问题是关于图书馆的加载......

无论如何，它在CodePen 中工作得很好

Answer 3

我使用下面的代码来渲染 fullCalendar，因为它隐藏在模式弹出窗口中。

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

当包含它的元素隐藏在页面中时，不显示完整日历。请参阅工作示例。

$('#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>