.fullcalendar is not a function on Submit Button Click
Question
I am working on Fullcalendar and I am not able to render event. I am opening a Bootstrap Modal on clicking anywhere on calendar. After entering all the info when I click on Submit I need to render the changes in Calendar but its saying 'fullcalendar is not a function. I called FullCalender while loading as well and it worked perfectly but I think I am doing something wrong when I call FullCalendar on Submit button.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script src='http://cdn.jsdelivr.net/fullcalendar/1.5.4/gcal.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js'></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<title>Bootstrap Scheduler</title>
<h3 class="text-center">Bootstrap Scheduler</h3>
<style>
.nopadding {
padding-left: 0px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: true,
selectable: true,
//header and other values
select: function(start, end, allDay) {
endtime = moment(end).format('h:mm tt');
starttime = moment(start).format('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);
jQuery.noConflict();
$('#createEventModal').modal('show');
}
});
$('#submitButton').on('click', function(e){
$("#createEventModal").modal('hide');
alert("form submitted");
var newEvent = {
title: $('#eventTitle').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
};
$('#calendar').fullCalendar('renderEvent',
newEvent,
true);
});
});
</script>
<div class="container" id="calendar"></div>
<div id="createEventModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="myModalLabel">Create new event</h4>
</div>
<div class="modal-body">
<h5>Event Title</h5>
<input id="eventTitle" type="text" class="form-control"></input>
<input type="hidden" id="apptAllDay" />
<h5>Link to loan file</h5>
<select class="form-control">
<option value="loanPicker">Loan Picker / Search</option>
</select>
<div class="container">
<div class="row">
<div class='col-sm-3 nopadding'>
<div class="form-group">
<h5>Start date & time</h5>
<div class='input-group date' id='apptStartTime'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class="form-group">
<h5>End date & time</h5>
<div class='input-group date' id='apptEndTime'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div >
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#apptStartTime').datetimepicker();
$('#apptEndTime').datetimepicker();
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="submitButton" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
2 answers
solution1
1 ACCPTED 2015-10-20 17:54:36
Ok, I figured it out.
Here is a codepen.
- Moved
id='apptStartTime'andid='apptEndTime'to inputs (you had them in divs).
- Changed selectors in Javascript for datempicker (it is related to first issue).
- Added button below calendar to open the modal.
HTML:
<h3 class="text-center">Bootstrap Scheduler</h3>
<div class="container" id="calendar">
<button class="btn btn-primary btn-lg btn-block" type="button" data-toggle="modal" data-target="#createEventModal">Create Event</button>
</div>
<div id="createEventModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="myModalLabel">Create new event</h4>
</div>
<div class="modal-body">
<h5>Event Title</h5>
<input id="eventTitle" type="text" class="form-control"></input>
<input type="hidden" id="apptAllDay" />
<h5>Link to loan file</h5>
<select class="form-control">
<option value="loanPicker">Loan Picker / Search</option>
</select>
<div class="container">
<div class="row">
<div class='col-sm-3 nopadding'>
<div class="form-group">
<h5>Start date & time</h5>
<div class='input-group date'>
<input type='text' id='apptStartTime' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class="form-group">
<h5>End date & time</h5>
<div class='input-group date'>
<input type='text' class="form-control" id='apptEndTime' />
<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-default" data-dismiss="modal">Close</button>
<button id="submitButton" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
CSS:
body {
padding-bottom: 100px;
}
.nopadding {
padding-left: 0px;
}
.btn {
margin-top: 20px !important;
border-radius: 0;
}
JS:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: true,
selectable: true,
//header and other values
select: function(start, end, allDay) {
endtime = moment(end).format('h:mm tt');
starttime = moment(start).format('ddd, MMM d, h:mm tt');
var mywhen = starttime + ' - ' + endtime;
jQuery('#createEventModal #apptStartTime').val(start);
jQuery('#createEventModal #apptEndTime').val(end);
jQuery('#createEventModal #apptAllDay').val(allDay);
jQuery('#createEventModal #when').text(mywhen);
jQuery.noConflict();
$('#createEventModal').modal('show');
}
});
$('#submitButton').on('click', function(e) {
$("#createEventModal").modal('hide');
var newEvent = {
title: $('#eventTitle').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
};
$('#calendar').fullCalendar('renderEvent',
newEvent,
true);
});
});
$(document).ready(function() {
$('#apptStartTime').parent().datetimepicker();
$('#apptEndTime').parent().datetimepicker();
});
solution2
0 2015-10-20 19:15:23
The issue was in my code. I had to do the following to make it work:
- Remove the duplicate jquery.min.js & jQuery.ui.min
- Remove jQuery.noConflict()
- Substitute $ with 'jQuery' all over the code.
Thanks to @Rory and @makshh
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Call function on submit button click
How to stop one Submit button from running the Submit Click function
Form submit and javascript function calling on submit button click in spring mvc?
on submit button click, execute function then submit form react.js
fullcalendar, deleting event on button click
FullCalendar: remove events on button click
Unexpected submit on “submit” button click
jquery click() in submit button
click on a submit button is not working
Trigger on click of submit button
Related Tags