title: jQuery FullCalendar : When click created event disappers
body: <p>I'm using the <strong>fullcalendar</strong> plugin with the resource view. (<a href="http://www.ikelin.com/jquery-fullcalendar-resource-day-view/" rel="nofollow">http://www.ikelin.com/jquery-fullcalendar-resource-day-view/</a>). </p>
  
  <p>I am trying to display a bootstrap form modal when clicking on an empty cell. (defaultView: 'resourceDay'). </p>
  
  <p>When I click on an empty cell modal opens and when I click <strong>Save</strong>, the new event will be added to the calendar. 
  However there is a small bug. </p>
  
  <p>If I click anywhere inside the <strong>modal/browser window</strong>, event <strong>block</strong> will disappear ( I can <strong>click</strong> on the calendar, this will create a coloured block on the empty cells temporally). </p>
  
  <p>If I click <strong>Save</strong>, it will be re-added to the calendar. </p>
  
  <p>For some reason if I put the FullCalendar's <strong>renderEvent</strong> inside a click function this bug occurs. 
  how to fix this? Thanks!</p>
  
  <p>(I have used the jquery UI dialog and tested, but it showed the same result to me)</p>
  
  <p><strong>Call back JS function of the fullcalendar</strong> </p>
  
  <pre><code>   select: function(start, end, allDay, event, resourceId) {//select cell (empty)
  
                  var title = 'Sample event';// event name
  
                  $('#add_appt').modal();//open the modal
  
                  $('#save_appt').click(function(e) {//click on the save button
                      //e.preventDefault();
  
                      if (title) {//Add the event
                          console.log("CONSOLE select event " + event + title + ", start " + start + ", end " + end + ", allDay " + allDay + ", resource " + resourceId);
  
                          calendar.fullCalendar('renderEvent',
                                  {
                                      title: title,
                                      start: start,
                                      end: end,
                                      allDay: allDay,
                                      resourceId: resourceId
                                  }, true); // make the event "stick" as true
  
                      }
                      console.log("closing");
                      calendar.fullCalendar('unselect');
  
                      $('#add_appt').modal('hide');//close the modal
                  });
      }
  </code></pre>
  
  <p><strong>HTML bootstrap modal</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="add_appt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="myModalLabel"&gt;Add New Appointment&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  &lt;!--form --&gt;
                  &lt;form id='appt_from' class="form-horizontal"&gt;
                      &lt;!-- Text input--&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-md-3 control-label" for="textinput"&gt;Text Input&lt;/label&gt;  
                          &lt;div class="col-md-8"&gt;
                              &lt;input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Select Basic --&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-md-3 control-label" for="selectbasic"&gt;Select Basic&lt;/label&gt;
                          &lt;div class="col-md-8"&gt;
                              &lt;select id="selectbasic" name="selectbasic" class="form-control"&gt;
                                  &lt;option value="1"&gt;Option one&lt;/option&gt;
                                  &lt;option value="2"&gt;Option two&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Textarea --&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="col-md-3 control-label" for="textarea"&gt;Text Area&lt;/label&gt;
                          &lt;div class="col-md-8"&gt;                     
                              &lt;textarea class="form-control" id="textarea" name="textarea"&gt;default text&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
  &lt;!--/ from --&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button id='save_appt' type="button" class="btn btn-success"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>