title: Add Event to Calendar in fullcalendar
body: <p>I have a problem again and do not really get on with it.
  I would like to know that you can enter an appointment and I already have the following script.
  Unfortunately, no entries are entered in the calendar :-( can someone help me there?
  I've already asked quite a bit about google and co. Unfortunately, I come to no real point of help.
  can it be that I already use the eventRender and then want to use it again below?</p>
  
  <p>here once my code:</p>
  
  <pre><code>&lt;link rel='stylesheet' href='kalender2/fullcalendar.css' /&gt;
  &lt;script src='kalender2/fullcalendar.js'&gt;&lt;/script&gt;
  &lt;script src='kalender2/locale/de.js'&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="kalender2/lib/hour.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      var CalenderEvent;
      var datenPruefenDatenSenden;
      var terminPruefenDatenSenden;
      var datenPruefenDatenVerarbeiten;
      var termin_nachberechnung;
      var TerminAddZeit;
      var AddEventToCalener;
      $(document).ready(function() {
          function DeleteEvent(id){
              SendFormData(id,'',"delete");
              $('#calendar').fullCalendar('removeEvents',id);
          }
          var initialLocaleCode = 'de';
          $('#calendar').fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay,listWeek'
              },
              dayClick: function(date, jsEvent, view) {
                  $('#calenderAdEvent').modal('show');
                  $('#start_date_add_day').val(date.format('DD.MM.YYYY'));
                  $('#start_date_add_time').val(date.format('HH:mm'));
              },
              eventRender: function(eventObj, $el) {
                      $el.popover({
                          title: eventObj.title,
                          content: eventObj.description,
                          trigger: 'hover',
                          placement: 'top',
                          container: 'body'
                      });
                      $el.html(eventObj.title + '&lt;span class="removebtn" onclick="DeleteEvent('+eventObj.id+');" id="Delete"&gt;X&lt;/span&gt;');
                      $el.find(".removebtn").click(function() {
                          $('#calendar').fullCalendar('removeEvents',eventObj.id);
                      });
              },
              businessHours: [
                  &lt;?php echo $Offen;?&gt;
              ],
              eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {
                  var Alertback = SendFormData(event.id,$.fullCalendar.moment(event.start._d), $.fullCalendar.moment(event.end._d),"update");
                  alert(Alertback);
              },
              eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) { 
                  var Alertback = SendFormData(event.id,$.fullCalendar.moment(event.start._d), $.fullCalendar.moment(event.end._d),"update");
                  alert(Alertback);
              },
              timezone: 'Europe/Berlin',
              nowIndicator: true,
              now: '&lt;?php echo date("Y-m-d", time() ) .'T'. date("H:i:s");?&gt;',
              locale: 'de',
              buttonIcons: true, // show the prev/next text
              defaultView: 'agendaWeek',
              defaultDate: '&lt;?php echo date("Y-m-d", time() );?&gt;',
              navLinks: true, // can click day/week names to navigate views
              editable: true,
              eventLimit: true, // allow "more" link when too many events
              allDaySlot: true,
              droppable: true,
              events: [
                  &lt;?php echo $aus;?&gt;
              ],
              timeFormat: 'H(:mm)',
              eventClick: function(event, jsEvent, view) {
                  CalenderEvent = event;
                  $('#id_termin').val(event.id);
                  $('#name').val(event.title);
                  $('#Time_Event').val(event.TimeEvent);
                  $('#description').val(event.description);
                  $('#start_date_day').val(moment(event.start).format('DD.MM.YYYY'));
                  $('#start_date_time').val(moment(event.start).format('HH:mm'));
                  if(event.end) {
                      $('#end_date_day').val(moment(event.end).format('DD.MM.YYYY'));
                      $('#end_date_time').val(moment(event.end).format('HH:mm'));
                  } else {
                      $('#end_date_day').val(moment(event.end).format('DD.MM.YYYY'));
                      $('#end_date_time').val(moment(event.end).format('HH:mm'));
                  }
                  $('#event_id').val(event.id);
                  $('#calenderEditEvent').modal();
              }
          });
  
          datenPruefenDatenSenden = function(){
              var start = $('#start_date_day').val()+'//'+$('#start_date_time').val();
              var end = $('#end_date_day').val()+'//'+$('#end_date_time').val();
              var erg = SendFormData($("#id_termin").val(),start,end,'TerminEditSave');
              $('#calenderEditEvent').modal('hide');
              CalenderEvent.start = moment($('#start_date_day').val()+' '+$('#start_date_time').val(), "DD.MM.YYYY HH:MM");
              CalenderEvent.end = moment($('#end_date_day').val()+' '+$('#end_date_time').val(), "DD.MM.YYYY HH:MM");
              $('#calendar').fullCalendar('updateEvent', CalenderEvent);
          }
  
          datenPruefenDatenVerarbeiten = function (daten){
              if(daten == 1){$('#submit_erg').html('&lt;div class="alert alert-danger"&gt;Termin&amp;uuml;berschneidung&lt;/div&gt;&lt;button class="btn btn-info" onclick="terminPruefenDatenSenden();"&gt;Erneut pr&amp;uuml;fen&lt;/button&gt;');}
              $('#submit_button').html('&lt;button type="button" class="btn btn-warning" onclick="datenPruefenDatenSenden();"&gt;Termin Speichern&lt;/button&gt;');
          }
  
          terminPruefenDatenSenden = function (){
              $('#submit_erg').html('');
              var start = $('#start_date_day').val()+'//'+$('#start_date_time').val();
              var end = $('#end_date_day').val()+'//'+$('#end_date_time').val();
              var erg = SendFormData($("#id_termin").val(),start,end,'pruefen');
          }
  
          termin_nachberechnung = function (){
              var TimePlus = new Hour($('#Time_Event').val());
              var zeit = new Hour($('#start_date_time').val()+':00');
              $('#end_date_time').val(zeit.add(TimePlus));
          }
  
          TerminAddZeit = function (){
              var erg = SendFormData($("#id_termin_add").val(),$('#start_date_add_time').val(),'','TimePlus');
              $('#start_date_add_time_end').val(erg);
          }
          AddEventToCalener = function(){
              var Start = moment($('#start_date_add_day').val()+' '+$('#start_date_add_time').val(), "DD.MM.YYYY HH:MM");
              var End = moment($('#start_date_add_day').val()+' '+$('#start_date_add_time_end').val(), "DD.MM.YYYY HH:MM");
              var event = new Object();
              event = {
                  title: 'Testtermin',
                  start: Start,
                  end: End,
                  allDay: false,
              };
              console.log(event);
              $('#calendar').fullCalendar('renderEvent', event);
          }
      });
  
      $(function() {
        $('[data-toggle="datepicker_bearbeiten"]').datepicker({
          autoHide: true,
          format: 'dd.mm.yyyy',
          zIndex: 2048,
        });
      });
  
      function SendFormData(id,start,end,aufruf){
          var erg;
          if(aufruf == 'update'){start = start/1000;end = end/1000;}
          $.ajax({type: "post",url: "kalender2/kalender.class.php",data : {id : id,sta : start,end : end,aufruf : aufruf}
          }).done(function( dataEnd ){if(aufruf == 'pruefen'){datenPruefenDatenVerarbeiten(dataEnd);}erg = dataEnd;});
          return erg;
      }
  
  
  &lt;/script&gt;
  
  &lt;div id='calendar'&gt;&lt;/div&gt;
  
  &lt;div class="modal" id="calenderAdEvent" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Termin eintragen&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="input-group mb-3"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Datum&lt;/span&gt;
              &lt;/div&gt;
              &lt;input type="text" id="start_date_add_day" name="start_date_add_day" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Dienstleistung&lt;/span&gt;
              &lt;/div&gt;
              &lt;select class="custom-select" id="id_termin_add"&gt;
                  &lt;option selected&gt;bitte w&amp;auml;hlen&lt;/option&gt;
                  &lt;?php echo $dienst;?&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Termin von&lt;/span&gt;
              &lt;/div&gt;
              &lt;input type="text" id="start_date_add_time" name="start_date_add_time" class="form-control"&gt;
              &lt;div class="input-group-append"&gt;
                  &lt;span class="input-group-text"&gt;-&lt;/span&gt;
              &lt;/div&gt;
               &lt;input type="text" name="start_date_add_time_end" id="start_date_add_time_end" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="input-group mb-3"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;Kundenname&lt;/span&gt;
              &lt;/div&gt;
              &lt;input type="text" list="kunden" id="KundenName" name="KundenName" class="form-control" onkeyup="KundenListe();"&gt;
              &lt;datalist id="kunden"&gt;
                  &lt;?php echo $KundenListe;?&gt;
              &lt;/datalist&gt;
              &lt;div class="input-group-append"&gt;
                  &lt;span class="input-group-text"&gt;oder KN&lt;/span&gt;
              &lt;/div&gt;
               &lt;input type="text" name="KIDTerminBuchen" id="KIDTerminBuchen" class="form-control"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" onclick="AddEventToCalener();"&gt;Save changes&lt;/button&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="modal" id="calenderEditEvent" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title"&gt;Termin bearbeiten&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="input-group mb-3"&gt;
                      &lt;div class="input-group-prepend"&gt;
                          &lt;span class="input-group-text" id="basic-addon1"&gt;Start&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;input type="text" name="termin" id="start_date_day" class="form-control" data-toggle="datepicker_bearbeiten"&gt;
                      &lt;input type="text" id="start_date_time" onkeyup="termin_nachberechnung('Hallo');" class="form-control datetimepicker-input" data-target="#datetimepicker3" data-target-input="nearest"/&gt;
                      &lt;div class="input-group-append"&gt;
                          &lt;span class="input-group-text"&gt;
                                  &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHfSURBVEhLzZW9L91hFMcvaby0HUi9VKJNE2ZbvWxERQdTO5h0YLCQWLAykehUJAYWIWZSjBJtojqQog1TUyotwl8g+HyfU7fXffm9Mfgkn+ScJzf3/J7n+Z3zi90HHuBrnMBveITneIhfcRhrMDJvcA8/Yw9W4RPMxqdYiwP4A1cwVLFcnMYNrNdCAtrZOwvjqGgb7mOfFvzIwU84g3laSOI5/rIwhTJcw1GXeaAdqECWy1LxKiIeok6gy2VpeIubmG4H1/gVEeX4FytcloDOehcbXJaZIEWE7mbOwv/oNV210JOgRXQap1jisn+oD/Sa+hG0iJjFDguNLVQf+BGmiApMWmgcoxrNDz3dBfa7zJsmXLbQ0KhQU3mhJlWBS9zWgg/VqL6J8wdLLcxIJ+p3O9iqBR9acN5CYx01izKhAj/xhcuCoYYct9AYwkELU4hSQHxEDdk4Or/vmHwvypcwbIFiPMPHLktA4zp5wkblA45YeBPtRuNa0/Q26G41uwpdloZe/IKPXBYeNetvbHSZB2Oocf3MZcGpwwO8MUq80Oun77l2lq8FD4pQD6bv/isthKESNa5PUB+ydmzGl6hG68ZF1LR9jwUYGY1rHcEU6k/VuAuoRlMfRL2/uyQWuwKiRlWN6WWKKwAAAABJRU5ErkJggg=="&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="input-group mb-3"&gt;
                      &lt;div class="input-group-prepend"&gt;
                          &lt;span class="input-group-text" id="basic-addon1"&gt;Ende&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;input type="text" name="termin" id="end_date_day" class="form-control" data-toggle="datepicker_bearbeiten"&gt;
                      &lt;input type="text" id="end_date_time" class="form-control datetimepicker-input" data-target="#datetimepicker3" data-target-input="nearest"/&gt;
                      &lt;div class="input-group-append"&gt;
                          &lt;span class="input-group-text"&gt;
                                  &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHfSURBVEhLzZW9L91hFMcvaby0HUi9VKJNE2ZbvWxERQdTO5h0YLCQWLAykehUJAYWIWZSjBJtojqQog1TUyotwl8g+HyfU7fXffm9Mfgkn+ScJzf3/J7n+Z3zi90HHuBrnMBveITneIhfcRhrMDJvcA8/Yw9W4RPMxqdYiwP4A1cwVLFcnMYNrNdCAtrZOwvjqGgb7mOfFvzIwU84g3laSOI5/rIwhTJcw1GXeaAdqECWy1LxKiIeok6gy2VpeIubmG4H1/gVEeX4FytcloDOehcbXJaZIEWE7mbOwv/oNV210JOgRXQap1jisn+oD/Sa+hG0iJjFDguNLVQf+BGmiApMWmgcoxrNDz3dBfa7zJsmXLbQ0KhQU3mhJlWBS9zWgg/VqL6J8wdLLcxIJ+p3O9iqBR9acN5CYx01izKhAj/xhcuCoYYct9AYwkELU4hSQHxEDdk4Or/vmHwvypcwbIFiPMPHLktA4zp5wkblA45YeBPtRuNa0/Q26G41uwpdloZe/IKPXBYeNetvbHSZB2Oocf3MZcGpwwO8MUq80Oun77l2lq8FD4pQD6bv/isthKESNa5PUB+ydmzGl6hG68ZF1LR9jwUYGY1rHcEU6k/VuAuoRlMfRL2/uyQWuwKiRlWN6WWKKwAAAABJRU5ErkJggg=="&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;input type="hidden" id="id_termin"&gt;
                  &lt;input type="hidden" id="Time_Event"&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;span id="submit_erg"&gt;&lt;/span&gt;
                  &lt;span id="submit_button"&gt;&lt;button type="button" class="btn btn-info" onclick="terminPruefenDatenSenden();"&gt;Pr&amp;uuml;fen&lt;/button&gt;&lt;/span&gt;
                  &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have done some more tests. As soon as I take the <code>eventRender: function (eventObj, $ el) { ........ },</code> out, I use the function <code>AddEventToCalener = function () { $ ('# calendar'). fullCalendar ('renderEvent', { title: 'dynamic event', start: '2018-11-26', allDay: true }); }</code> successfully.</p>
  
  <p>But as soon as I insert eventRender again, I get the following message: </p>
  
  <blockquote>
    <p>Error: TOOLTIP: Option "content" provided type "undefined" but
    expected type "(string | element | function)"</p>
  </blockquote>
  
  <p>So the problem is still that the event is not entered in the calendar. the console gives me the following with console.log </p>
  
  <pre><code>{…} ​ allDay: false ​ end: Object { _isAMomentObject: true, _i: "26.11.2018 12:00", _f: "DD.MM.YYYY HH:MM", … } ​ start: Object { _isAMomentObject: true, _i: "26.11.2018 11:30", _f: "DD.MM.YYYY HH:MM", … } ​ title: "Testtermin" ​ &lt;prototype&gt;: Object { … }
  </code></pre>