title: Create fullCalendar calendar event on submitting the form in bootstrap modal window
body: <p>I've a fullCalendar implementation and am trying to create a bootstrap modal window on clicking anywhere on the calendar and then saving the calendar entry on "submitting" the form in the modal window.</p>
  
  <pre><code>$(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
    });
  </code></pre>
  
  <p>Here's the HTML for modal screen:</p>
  
  <pre><code>&lt;div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
          &lt;h3 id="myModalLabel1"&gt;Create Appointment&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
      &lt;form id="createAppointmentForm" class="form-horizontal"&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="inputPatient"&gt;Patient:&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&amp;quot;Value 1&amp;quot;,&amp;quot;Value 2&amp;quot;,&amp;quot;Value 3&amp;quot;]"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;
              &lt;label class="control-label" for="when"&gt;When:&lt;/label&gt;
              &lt;div class="controls controls-row" id="when" style="margin-top:5px;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
          &lt;button type="submit" class="btn btn-primary" id="submitButton"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In another javascript file that's called within the main HTML, I've the following:</p>
  
  <pre><code>$('#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
      );
  </code></pre>
  
  <p>This is not working. What am I doing wrong?</p>