我有一个fullCalendar实现,我试图创建一个引导模式窗口,点击日历上的任何地方,然后保存日历条目“在模式窗口中”提交“表单.
$(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
});
这是模态屏幕的HTML：
<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>
在另一个在主HTML中调用的javascript文件中,我有以下内容：
$('#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
);
这不起作用.我究竟做错了什么？
解决方法
您需要保留select函数中的start,end和allDay参数.
例如,将它们存储在对话框窗体中的隐藏输入中：
<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 3"]">
<input type="hidden" id="apptStartTime"/>
<input type="hidden" id="apptEndTime"/>
<input type="hidden" id="apptAllDay" />
</div>
在fullcalendar的select函数中设置隐藏字段的值：
select: function(start,allDay) {
endtime = $.fullCalendar.formatDate(end,'h:mm tt');
starttime = $.fullCalendar.formatDate(start,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');
}
然后您可以在提交中使用这些字段中的值：
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);
}
