FullCalendar modification by event does not display correctly
I am trying to make a popup delete / delete on fullcalendar when I click on an existing event.
Using the JQueryUI dialog, something is partially displayed.
(note that my events are all external events that have been removed from the side menu)
The next two methods are closest to getting me to display something.
Method 1 with dialog in eventRender
$('#calendar').fullCalendar({
….
eventRender: function (event, element){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
and
Method 2 with dialog in eventClick
$('#calendar').fullCalendar({
….
eventClick: function(event){
$("#eventContent").dialog({ modal: true, title: event.title, width:350}); });
….
});
<div id="eventContent" title="Event Details" >
</div>
both behaviors are the same It shows the name of the fectched event and close buttons. But the popup dialog does not exist (not surrounded).
It only displays texts on fullcalendar.
Anyone why the dialog isn't showing correctly? The window displays only text.
Also, I don't want to include any specific css code for the popup, but this is all the css from my code.
So if I am missing some css for the popup, can anyone please tell me the css reference for the 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>
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>
source to share
I am answering my own question. I found a solution myself. but i cant explain because i am new to this. but i think it might help someone with similar problems and for my own backup. I decided to post an answer to my own question.
I was unable to succeed in the dialog (the window does not display only displaying the text).
After a few days of effort and with [reference] for code 2) 3), I decided to try bootstrap modal again. then I'm in luck .. so here is the working code.
1) First all the links I needed (I figured out what combination of links I needed and that was the key part that makes 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 part: eventClick code in fullcalendar code
$('#calendar').fullCalendar({
….
eventClick: function(event){
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
….
});
3) html, loading 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>
and thanks to @slicedtoad, motivate me!
source to share
The modal is not showing correctly because you don't have jquery ui css loaded.
<link href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css' rel='stylesheet' />
And go with the eventClick method.
Edit 1:
I have no luck showing the dialog ... it only shows the text ...
Ok, try this:
eventClick: function(event){
$("<div>").dialog({ modal: true, title: event.title, width:350});
},
This will create a new element and make it a dialog.
source to share