不以模态显示的完整日历
不以模态显示的完整日历
提问于 2017-07-16 11:49:12
我使用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">×</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();
});回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-16 12:44:53
Stack Overflow用户
发布于 2017-09-29 18:07:47
我用一个非常简单的技巧解决了这个问题；
首先，我发现类在模式中添加了“隐藏”属性(在我的例子中，我使用的是语义ui，“模态”类对此负责)。
<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.满日历”).addClass(‘长模态’)；//您可以将隐藏的模态类放在这里。
这样，日历首先呈现，然后隐藏，显示何时单击模式。
Stack Overflow用户
发布于 2017-07-16 13:06:32
我使用了下面的代码来呈现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">×</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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45128214
复制相关文章
相似问题
腾讯云开发者
