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

Question

我有一个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="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]"> 
      </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> 

在另一个JavaScript文件被称为主HTML内，我下面的：

$('#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参数。

例如，他们隐藏的输入存储在该对话框的形式：

 <div class="controls"> 
      <input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]"> 
       <input type="hidden" id="apptStartTime"/> 
       <input type="hidden" id="apptEndTime"/> 
       <input type="hidden" id="apptAllDay" /> 
     </div> 

而在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); 
} 

Fiddle here with a demo。