事件单击上的FullCalendar模态无法正确显示 [英] FullCalendar modal on event click not displaying correctly
问题描述
当我单击现有事件时，我试图在全日历上进行删除/删除弹出窗口.
I'm trying to make a delete/remove popup on fullcalendar when I click the existing event.
使用JQueryUI对话框，部分显示某些内容.
(注意.我的事件是从侧面菜单中删除的所有外部事件)
(note. my events are all external events which have been dropped from side menu)
以下两种方法是我最接近显示事物的方法.
The following two methods are the closest I got to displaying something.
方法1在eventRender中带有对话框
$('#calendar').fullCalendar({
….
eventRender: function (event, element){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
和
方法2(带有事件对话框中的对话框)
$('#calendar').fullCalendar({
….
eventClick: function(event){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
两种行为都相同 它显示了受影响事件的标题和关闭按钮. 但是弹出对话框窗口不存在(不被包围).
both behaviors are same It shows the title of fectched event and close button. But popup dialog window is not there (not surrounded).
它仅在fullcalendar上显示文本.
It displays only texts on fullcalendar .
有人为什么对话框不能正确显示?该窗口仅显示文本.
Does anyone why the dialog isn't displaying properly? The window is only displaying text.
此外，我是否不应该在弹出窗口中包含任何特定的CSS代码，但这些都是我代码中的CSS.
Also, I don't if I should include any particular css code for the popup window but these are all css from my code.
因此，如果我在弹出窗口中缺少某些CSS，是否有人可以将对话框弹出窗口的参考CSS代码通知我?
So if I am missing some css for popup window, can anyone inform me of the reference css code for the dialog popup?
<style>
body {
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
和我的.js链接..
and my .js links..
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
推荐答案
我回答了我自己的问题.我自己找到了解决方案.但由于我是新手，所以我真的无法解释.但是我认为这可能会对遇到类似问题的人有所帮助，并有助于我自己进行内存备份.我决定发布自己的问题的答案.
I answer my own question. I have found solution myself. but I am not really able to explain since I am new to this. but I think this may help someone with similar trouble and for my own memory backup. I decide to post answer to my own question.
我无法通过对话框成功(对话框不显示只能显示文本).
I couldn't succeed with dialog (box doesn't display only able to display text).
经过几天的努力，并且使用> [参考] 对于代码2)3)，我决定再次尝试使用引导模式. 然后我很幸运..所以这是工作代码.
After several days of efforts and with [reference] for the code 2) 3), I decide to try with bootstrap modal again. then I got a luck.. so here is working code.
1)首先，我需要所有链接(我确定了所需的链接组合，这是使链接起作用的关键部分)=>
1) At first, all links I need (I figured what combination of links I need and this was kind of key part that make it work) =>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.4/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal-bs3patch.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/css/bootstrap-modal.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/img/ajax-loader.gif"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modalmanager.min.js"></script>
2)javascript部分:完整日历代码中的eventClick代码
2)javascript part : eventClick code in fullcalendar code
$('#calendar').fullCalendar({
….
eventClick: function(event){
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
….
});
3)html，引导程序模版部分
3) html, bootstrap modal part
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Remove</button>
</div>
</div>
</div>
</div>
感谢@slicedtoad，继续激励我！
and thanks to @slicedtoad , keep motivating me!
这篇关于事件单击上的FullCalendar模态无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
