在bootstrap模式窗口中提交表单时创建fullCalendar日历事件

我有一个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：

 
 
 x 
Create Appointment
 
 
 
 
 Patient: 
  
 
 
 When: 
 
 
 
 
 
 Cancel Save 
  

在另一个在主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 ); 

这不起作用。 我究竟做错了什么？

Answer 1

您需要保留select函数中的start ， end和allDay参数。

例如，将它们存储在对话框窗体中的隐藏输入中：

在fullcalendar的select函数中设置隐藏字段的值：

  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'); } 

然后您可以在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); } 

在这里摆弄一个演示 。