【发布时间】：2015-10-21 03:18:04
【问题描述】：
我正在处理 Fullcalendar，但无法呈现事件。 我在单击日历上的任意位置时打开一个引导模式。 当我点击提交时输入所有信息后，我需要在日历中呈现更改，但它说'fullcalendar 不是一个函数。 我在加载时也调用了 FullCalender，它运行良好，但是当我在提交按钮上调用 FullCalendar 时，我认为我做错了。
<!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>
【问题讨论】：
-
您包括两个版本的 jQuery 和 jQueryUI。一开始就不会顺利。
-
@RoryMcCrossan 是的，如果我删除一个，那么它会抛出异常
-
代码中的哪里是点击日历时显示模式的操作？
标签： javascript jquery twitter-bootstrap fullcalendar