Getting new full calendar event in bootstrap modal

I am using bootstrap modal to display event details. When the event will be clicked the start, end and title will be displayed in the popup.

The events are created using a boostrap modal form.

Here is the code

$(function()
$('#calendar').fullCalendar(
header:
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
,
views:
month:
titleFormat: 'YYYY, MM, DD'

,
validRange: function(nowDate)
return
start: nowDate,
end: nowDate.clone().add(1, 'months')
;
,
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end)
startDate = moment(new Date(start)).format("MM-DD-YYYY");
$('#createBookingModal .modal-header .modal-title span').text(startDate);
$('#createBookingModal').modal('show');
,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback)
$.ajax(
url: '/api/bookings',
dataType: 'json',
data:
start: start.unix(),
end: end.unix(),
,
success: function(response)
var events = ;
$(response).each(function()
events.push(
title: $(this).attr('title'),
start: $(this).attr('start_time'),
end: $(this).attr('end_time'),
);
);
callback(events);

);
,
eventClick: function(event, jsEvent, view)
//Todo
//Get event end date here
console.log(event);
startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");

$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
,

loading: function(bool)
$('#loading').toggle(bool);

);

$('#submitButton').on('click', function(e)
e.preventDefault();
doSubmit();
);

function doSubmit()
//validate end date here
endDate = new Date($('#bookingEndDate').val());
if (! moment(endDate, 'MM/DD/YYYY', true).isValid() )
alert('Invalid Date');
else
eventData =
title: $('#bookingName').val(),
start: new Date($('#createBookingModal .modal-header .modal-title span').text()),
end: endDate
;
$.ajax(
url: '/api/bookings/create',
data:
title: eventData.title,
start_time: eventData.start,
end_time: eventData.end
,
success: function(response)
console.log(response);
// if ( response == 0 )
// alert('Invalid Date');
// return false;
// else
// return true;
//

);
$('#createBookingModal form').get(0).reset();
$("#createBookingModal").modal('hide');
$("#calendar").fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');


);


HTML code

<div class="card-body full-calendar">
<div id='calendar'></div>
<!-- Display Create Booking form in modal -->
<div id="createBookingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add an Booking on: <span class="startDate"></span>></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<form>
<div class="form-group">
<label for="bookingName">Booking Title</label>
<input class="form-control" type="text" placeholder="Booking Name" id="bookingName">
</div>

<div class="form-group">
<label for="bookingEndDate">End Date</label>
<div class="input-group date" data-provide="datepicker">
<input type="text" id="bookingEndDate" class="form-control" placeholder="mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>

<!--<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Booking Description" id= "eventDescription"></textarea>
</div>-->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Display Booking in modal -->
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<p class="start">Start At: <span></span></p>
<p class="end">End At: <span></span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>-->
</div>
</div>
</div>
</div>


I am not getting the end date for the newly created event when trying to display it in modal, you can notice //todo, that is where I want to get end date.May be it need to delegated, but I have no idea how it should be done?

//todo

I have added a fiddle here, you can see, the end date is coming "01-01-1970", because eventClick() is not getting the end date.

eventClick()

Update
It happens only when you are giving same start and end date.

2 Answers
2

I fixed it with just a small workaround, if anyone has a better solution, feel free to post.

eventClick: function(event, jsEvent, view)
if ( event.end == null )
event.end = event.start;

startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");

$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
,


*@ADyson has a huge contribution on this solution, I was expecting to post this as an answer after our discussion, he did not post, so I am posting it.

I had a similar issue (about 2 years ago!) Had to use submitHandler: function() like below

submitHandler: function (form)
var dataRow = CreateDataSetup();
$.ajax(
type: 'POST',
url: "/BookingTwo/SaveEvent",
data: dataRow,
success: function ()
$("#myform")[0].reset();
ClearPopupFormValues();
$('#popupEventForm').modal('hide');
,
statusCode:
201: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Success Event Created.", "success", 4000)
,
500: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Internal Server Error - Logged with System Admins", "danger", 4000)
$('#popupEventForm').modal('hide');
,
400: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Duration Service Returned 0 - Event NOT Created.", "danger", 4000)
$('#popupEventForm').modal('hide');
,
401: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - You do not have permission to delete this.", "danger", 4000)
$('#popupEventForm').modal('hide');
,
403: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - Can't delete approved events.", "danger", 4000)
,
409: function (response)
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("There is already an event for the user for this date.", "danger", 4000)


);



Also created a DataSetup funtion -

function CreateDataSetup()
console.log("Attempting to Setup POST Values...")
var intEtad = parseInt($('#ETADType').val());
var intEtadSub = parseInt($('#ETADSubType').val());

var normStart = $('#LeaveStart').val();
var normEnd = $('#LeaveFinish').val();

var ahStart = $('#ADHOCLeaveStart').val();
var ahEnd = $('#ADHOCLeaveFinish').val();

var dataRow =
'Id': $('#id').val(),
'Subject': $('#title').val(),
'Description': $('#customdescription').val(),
'StartTime': normStart,
'EndTime': normEnd,
'AHStartTime': ahStart,
'AHEndTime': ahEnd,
'SelectRole': $('#SelectRole').val(),
'ETADType': intEtad,
'ETADSubType': intEtadSub,
'StaffID': $('#StaffID').val(),
'EventStatus': $('#EventStatus').val(),
'AllRoles': $('#AllRoles').is(':checked'),
'AllDay': $('#AllDay').is(':checked'),
'AM': $('#AM').is(':checked'),
'PM': $('#PM').is(':checked'),
'ADHOC': $('#ADHOC').is(':checked'),

;

console.log("Setup Complete");
return dataRow;



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.