Tạo sự kiện lịch fullCalendar để gửi biểu mẫu trong cửa sổ phương thức bootstrap

Question

Tôi đang triển khai fullCalendar và đang cố gắng tạo cửa sổ phương thức khởi động khi nhấp vào bất kỳ đâu trên lịch và sau đó lưu mục lịch vào "gửi" biểu mẫu trong cửa sổ phương thức.

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

Dưới đây là HTML cho màn hình modal:

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

Trong một tập tin javascript đó được gọi là trong HTML chính, tôi đã điều sau đây:

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

này không hoạt động. Tôi đang làm gì sai?

Answer 1

Bạn cần giữ các thông số start, end và allDay từ chức năng select.

Ví dụ, lưu trữ chúng trong đầu vào ẩn trong các hình thức thoại:

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

Và trong select chức năng của fullcalendar thiết lập các giá trị của trường dữ liệu ẩ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'); 
    } 

Và sau đó bạn có thể sử dụng các giá trị từ các trường này trong số 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.