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，'模态'类对此负责）。

class Widget(QWidget):
    def __init__(self, parent= None):
        super(Widget, self).__init__(parent)
        layout = QGridLayout()

        self.setLayout(layout)

        btn = QPushButton('Push')
        # connect the signal to the slot
        btn.clicked.connect(self.someFunc)
        layout.addWidget(btn, 0, 0)

        # set an attribute
        self.le = QLineEdit()
        self.le.textChanged.connect(self.otherFunc)
        layout.addWidget(self.le, 0, 1)

    def someFunc(self):
        # use the attribute to get the text
        print('button-clicked:', self.le.text())

    def otherFunc(self, text):
        print('text-changed:', text)

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

$（ '＃日历'）。fullCalendar（{

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

}）;

$（“。ui.full-calendar”）。addClass（'long modal'）; //你可以把你隐藏的模态类放在这里。

这样，日历首先呈现，然后隐藏，显示单击模态的时间。

Answer 2

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

要打开模态才能看到它，对吧？或者也许你的问题是关于库的加载......

无论如何，它在CodePen

中运作良好

Answer 3

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

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

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

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

Fullcalendar没有显示在模态中

3 个答案: