.fullcalendar不是提交按钮单击的功能
我正在使用Fullcalendar，我无法渲染事件。 我在点击日历上的任何地方打开Bootstrap模态。 在我点击提交后输入所有信息后，我需要在日历中呈现更改，但它说'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>
2 个答案:
答案 0 :(得分：1)
好的，我明白了。
Here is a codepen.
- 将
id='apptStartTime'和id='apptEndTime'移至输入（您将它们放入div中）。 - 在Javascript中为datempicker更改了选择器（它与第一个问题相关）。
- 在日历下方添加按钮以打开模式。
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();
});
答案 1 :(得分：0)
问题出在我的代码中。我必须执行以下操作才能使其正常工作：
- 删除重复的jquery.min.js＆amp; jQuery.ui.min
- 删除jQuery.noConflict（）
- 在代码中用'jQuery'替换$。
感谢@Rory和@makshh
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？