Hi,
I have used the fullCalendar js add-on as well as the bootstrap 3 datetimepicker widget.
Upon clicking an event in fullCalendar, the modal window pops up with the title set from the event and the dates pulled correctly.
However, if the modal window is closed and another event clicked then the modal window title is updated properly however the datetimepickers do not update, it still says the content from the first event click.
Is there a way to update these fields? or a better more efficient way of dealing with the event data?
My code for the eventClick is as below:
eventClick: function(event, jsEvent, view) {
console.log(event.start.format('LLL') + " " + event.end.format('LLL'));
$('.datetimepicker').each(function(){
$(this).datetimepicker();
});
$('#modalTitle').html(event.title);
$(function () {
$('#startTime').datetimepicker({
date: event.start
// });
$('#endTime').datetimepicker({
date: event.end
});
});
$('#myModal').modal('show');
}
With my modal HTML code as:
<div class="ibox-content">
<div id="calendar"></div>
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<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 class="modal-body">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<p>User: </p>
<p>Shift Type: </p>
<p>Shift Start: </p>
<div class='input-group datetimepicker'>
<input name="startTime" id="startTime" type='text' class="set-due-date form-control" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
<p></p>
<p>Shift End: </p>
<div class='input-group datetimepicker'>
<input name="endTime" id="endTime" type='text' class="set-due-date form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>