I've a fullCalendar implementation and am trying to create a bootstrap modal window on clicking anywhere on the calendar and then saving the calendar entry on "submitting" the form in the modal window.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
//header and other values
select: function(start, end, allDay) {
var endtime = $.fullCalendar.formatDate(end,'h:mm tt');
var starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
var mywhen = starttime + ' - ' + endtime;
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
},
//other functions
});
Here's the HTML for modal screen:
<div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel1">Create Appointment</h3>
</div>
<div class="modal-body">
<form id="createAppointmentForm" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputPatient">Patient:</label>
<div class="controls">
<input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Value 1","Value 2","Value 3"]">
</div>
</div>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</form>
</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>
</div>
In another javascript file that's called within the main HTML, I've the following:
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#createAppointmentForm').submit();
});
$('#createAppointmentForm').on('submit', function(){
alert("form submitted");
$("#createEventModal").modal('hide');
$calendar.fullCalendar('renderEvent',
{
title: $('#patientName').val();,
start: start,
end: end,
allDay: allDay
},
true
);
This is not working. What am I doing wrong?
You need to preserve the start
, end
and allDay
parameters from the select
function.
For example, store them in hidden inputs in the dialog form:
<div class="controls">
<input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Value 1","Value 2","Value 3"]">
<input type="hidden" id="apptStartTime"/>
<input type="hidden" id="apptEndTime"/>
<input type="hidden" id="apptAllDay" />
</div>
And in the select
function of fullcalendar set the values of the hidden fields:
select: function(start, end, allDay) {
endtime = $.fullCalendar.formatDate(end,'h:mm tt');
starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
var mywhen = starttime + ' - ' + endtime;
$('#createEventModal #apptStartTime').val(start);
$('#createEventModal #apptEndTime').val(end);
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
}
And then you can use the values from these fields in the submit
:
function doSubmit(){
alert("form submitted");
$("#createEventModal").modal('hide');
$("#calendar").fullCalendar('renderEvent',
{
title: $('#patientName').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
},
true);
}
Fiddle here with a demo.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With