Create fullCalendar calendar event on submitting the form in bootstrap modal window

Question

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\

Answer 1

You need to preserve the start, end and allDay parameters from the select function.

For example, store them in hidden inputs in the dialog form:

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

And in the select function of fullcalendar set the values of the hidden fields:

  select: function(start, end, allDay) {
      endtime = $.fullCalendar.formatDate(end,'h:mm tt');
      starttime = $.fullCalendar.formatDate(start,'ffffd, 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');
   }

And then you can use the values from these fields in the 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.