问题描述
我有一个fullCalendar实现,并试图在点击日历上的任意位置时创建一个引导模式窗口,然后在模式窗口中提交表单时保存日历条目。
$(document).ready(function(){
var calendar = $('#calendar')。fullCalendar({
//头文件和其他值
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');
},
//其他函数
});
以下是模态界面的HTML:
< div id =createEventModalclass =modal hidetabindex = - 1role =dialogaria-labelledby =myModalLabel1aria- hidden =true>
< div class =modal-header>
< h3 id =myModalLabel1>创建预约< / h3>
< / div>
< div class =modal-body>
< form id =createAppointmentFormclass =form-horizontal>
< div class =control-group>
< label class =control-labelfor =inputPatient> Patient:< / label>
< div class =controls>
< input type =textname =patientNameid =patientNametyle =margin:0 auto; data-provide =typeaheaddata-items =4data-source =[& quot; value 1& quot;,& quot; value 2& quot;& quot; value 3& quot;] >
< / div>
< / div>
< div class =control-group>
< label class =control-labelfor =when> When:< / label>
< div class =controls controls-rowid =whenstyle =margin-top:5px;>
< / div>
< / div>
< / form>
< / div>
< div class =modal-footer>
< button class =btndata-dismiss =modalaria-hidden =true>取消< /按钮>
< button type =submitclass =btn btn-primaryid =submitButton>保存< /按钮>
< / div>
< / div>
在主HTML中调用的另一个JavaScript文件中,我有以下内容:
$('#submitButton')。on('click',function(e){//我们不想要这作为链接,以取消链接操作
e.preventDefault();
//查找表单并提交
$('#createAppointmentForm')。submit );
}); ('submit',function(){
alert(form submitted);
$(#createEventModal)。
$('#createAppointmentForm')。 modal('hide');
$ calendar.fullCalendar('renderEvent',
{
title:$('#patientName')。val();,
start:开始,
结束:结束,
allDay:allDay
},
true
);
$ p $ 您需要保存
start
, end
和 allDay
参数选择
函数。 例如,将它们存储在对话框形式的隐藏输入中:
< div class =controls>
< input type =textname =patientNameid =patientName tyle =margin:0 auto;data-provide =typeaheaddata-items =4data-source =[& quot; Value 1& quot ;值2,值3)>,<值2& quot;,"值3& quot;]>
< input type =hiddenid =apptStartTime/>
< input type =hiddenid =apptEndTime/>
< input type =hiddenid =apptAllDay/>
< / div>
然后在中选择fullcalendar set的
函数隐藏字段的值:
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');
}
然后您可以使用<$ c $中这些字段的值c> submit :
function doSubmit(){
alert(form submitted );
$(#createEventModal)。modal('hide');
$(#calendar)。fullCalendar('renderEvent',
{
title:$('#patientName')。val(),
start :新日期($('#apptStartTime').val()),
end:new Date($('#apptEndTime').val()),
allDay:($(' ()),
},
true);
}
。
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);
}
这篇关于在引导模式窗口中提交表单时创建fullCalendar日历事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!