Fullcalendar沒有顯示在模式

我正在使用FullCalendar jQuery插件來顯示日曆。Fullcalendar沒有顯示在模式

究竟發生了什麼，它不適用於引導模式。
我嘗試了一些我從互聯網上得到的東西，但仍然沒有運氣。

有人請幫幫我。

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

來源

2017-07-16 master mind

當模式彈出窗口打開時，是否顯示完整日曆？ –

我只加$("#doc-cal").modal(open);也試過。

必須打開模式才能看到它，對不對？
或者，也許你的問題是關於圖書館的負載起來......

不管怎麼說，它是在這個CodePen

來源

2017-07-16 12:44:53

不，有一個錨標記打開模式， –

因此，檢查庫加載...因爲它在Codepen中有效。控制檯錯誤？ –

在控制檯中沒有錯誤..我認爲它是因爲當頁面加載時，模式被隱藏，當我們點擊錨標籤時，dom被改變了，但是我們的日曆並沒有選擇它，類似的東西。 –

偉大的工作，我用下面的代碼來呈現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>

來源

2017-07-16 13:06:32

爲什麼這不起作用在我的系統中??包含庫的序列有所作爲??我的意思是第一次包括我的css文件比之前關閉身體標記im inclding我所有的js腳本 –

這實際上是一個好習慣，問題可能是別的。 –

我解決了這個一個非常簡單的一招;

首先 - 我發現在模態中添加'hidden'屬性的類（在我的情況下，我使用語義ui，'modal'類可以響應這個）。

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

然後，在jQuery代碼我這樣做：

$（ '＃日曆'）fullCalendar（{

dayClick: function() { 



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

}）; （「.ui.full-calendar」）。addClass（'long modal'）; //你可以在這裏放置你的隱藏模態類。

日曆先呈現然後隱藏，顯示何時點擊模式。

來源

2017-09-29 18:07:47

Fullcalendar沒有顯示在模式

回答

相關問題