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

Question

我有一个 fullCalendar 实现，并尝试通过单击日历上的任意位置来创建 Bootstrap 模式窗口，然后在模式窗口中“提交”表单时保存日历条目。

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

在主 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 参数。

例如，将它们存储在对话框表单中的隐藏输入中:

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

然后您可以在提交中使用这些字段中的值:

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 。