在引導模式窗口中提交表單時創建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。