Formun önyükleme modal penceresinde gönderilmesiyle ilgili fullCalendar takvim etkinliği oluşturma

Question

TamCalendar uygulamasının bir parçasıyım ve takvimin herhangi bir yerine tıklatıldığında bir önyükleme modal penceresi oluşturmaya çalışıyorum ve ardından takvim girdisini "gönderen" e modal penceresi. Aşağıdaki ettik ana HTML içinde denir başka JavaScript dosyası olarak

<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> 

: Bu işe yaramıyor

$('#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 
    ); 

$(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 
    }); 

İşte kalıcı ekran için HTML bulunuyor. Neyi yanlış yapıyorum?

Answer 1

select işlevinden start, end ve allDay parametrelerini korumanız gerekir. Örneğin

, iletişim formunda gizli girdiler saklayabilirsiniz:

 <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> 

Ve fullcalendar arasında select işlevinde gizli alanların değerlerini ayarlayın:

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

Sonra yapabilirsiniz Bu alanlardaki değerleri submit:

Fiddle here with a demo.