Q:

Fullcalendar popup issue

I have little problem with my popup in fullcalendar for add title. When I click to fullcalendar popup is showed and I can add title and submit. After submit is event already added but when I click again into calendar popup is showed with old title and next adding is not possible, only after refresh whole website.
http://jsfiddle.net/Nw3fL/3/
There is my code:
  $(document).ready(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        aspectRatio: 1.45,
        droppable: true,
        weekend: true,
        firstHour: 7,
        columnFormat: {
          month: 'dddd',    
          week: 'ddd, dS', 
          day: 'dddd, MMM dS'
        },
        header: {
            right: 'prev,next',
            center: 'title',
            left: 'month,agendaWeek,agendaDay'
        },
        viewDisplay: function(view) {
              try {
                  setTimeline();
              } catch(err) {}
        },          
        agenda: 'h:mm{ - h:mm}',
                '': 'h(:mm)t',
        drop: function (date, allDay) {
            var originalEventObject = $(this).data('eventObject');
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start = date;
            copiedEventObject.end = new Date(date.getDate()+2);
            copiedEventObject.allDay = allDay;
            start = $.fullCalendar.formatDate(copiedEventObject.start, "yyyy-MM-dd HH:mm:ss");
            end = $.fullCalendar.formatDate(copiedEventObject.end, "yyyy-MM-dd HH:mm:ss");
            $.ajax({
                   url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
                   data: 'title=' + copiedEventObject.title + '&start=' +start + '&end=' +end + "&backgroundColor=" + copiedEventObject.backgroundColor + '&creator=<?php print_r($_SESSION["uid"]); ?>',
                   type: "POST",
                   success: function (response) {
                       console.log(response);
                       $('#calendar').fullCalendar('refetchEvents');
                     }
                  });
              if ($('#drop-remove').is(':checked')) {
                  $(this).remove();
              }
        },
        editable: true,
        defaultView: 'agendaWeek',
        firstDay: 1,
        handleWindowResize: true,
        dragOpacity: 0.7,
        allDayDefault: false,
        events: "<?php echo SITEURL; ?>/fullcalendar/events.php?creator=<?php print_r($_SESSION['uid']); ?>",
        timeFormat:  'HH:mm { - HH:mm}',
        selectable: true,
        selectHelper: true,

// my select function
        select: function (start, end, allDay) {
          $(".popup").css({'display':'block', 'opacity':'0'}).animate({'opacity':'1','top':'45%'}, 300);
          $(".submitForm").click(function(){
            var title = $(".title").val();
            if (title) {
                start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
                end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
                $.ajax({
                    url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
                    data: 'title=' + title + '&start=' + start + '&end=' + end +  '&creator=<?php print_r($_SESSION["uid"]); ?>',
                    type: "POST",
                    success: function (json) {
                        console.log(json);
                        $('#calendar').fullCalendar('refetchEvents');
                    }
                });
             console.log("start " + start + " end " + end);
            }
            calendar.fullCalendar('unselect');
            $(".popup").css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','top':'55%','display':'none'}, 300);
          });
          $(".exit").click(function(){
            $(".popup").css({'display':'block', 'opacity':'1'}).animate({'opacity':'0','top':'55%','display':'none'}, 300);
          });
        },

//
        eventDrop: function (event, delta) {
              start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
              end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
              $.ajax({
                  url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
                  data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                  type: "POST",
                  success: function (response) {
                           console.log(response);
                  }
              });
        },
        eventClick: function (event, jsEvent, view) {
              if (confirm("Really delete event " + event.title + "with id " + event.id + "?") ) {
                $.ajax({
                  url:   "<?php echo SITEURL; ?>/fullcalendar/delete_event.php",
                  data: 'eid='+event.id,
                  type: "POST",
                  success: function (response) {
                       console.log(response); 
                       calendar.fullCalendar('removeEvents', event.id);
                  }
                });
              }
        },
        eventResize: function (event) {
              start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
              end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
              $.ajax({
                  url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
                  data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                  type: "POST",
                  success: function (response) {
                        console.log(response);
                  }
              });
        },
  });
$('#external-events div.external-event').each(function () {
    var eventObject = {
        title: $.trim($(this).text()),
        backgroundColor : $.trim($(this).attr('bgc'))
    };
    $(this).data('eventObject', eventObject);
    $(this).draggable({
        zIndex: 999,
        revert: true, 
        revertDuration: 0
    });
    });
});

My html:
<div class="popup cal-popup">
  <h2>Add event!</h2>
  <br />
  <legend>Event title:</legend>
  <input class="title eventcal-title" type="text" size="26" />      
  <a href="#" onclick="return false" class="submitForm" style="color:black;"><button>Submit</button></a>&emsp;
  <a href="#" onclick="return false" class="exit" style="color:black;"><button>cancel</button></a>
</div>

Very thanks for any help!!!
Best regards
Makromat

A:

Try following JS...
There were issues with date formatting.
I have replaced below lines...
start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");

With following...
start = $.fullCalendar.formatDate(new Date(start), "yyyy-MM-dd HH:mm:ss");
end = $.fullCalendar.formatDate(new Date(end), "yyyy-MM-dd HH:mm:ss");

Demo Fiddle
 $(document).ready(function () {
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();
      var calendar = $('#calendar').fullCalendar({
          aspectRatio: 1.45,
          droppable: true,
          weekend: true,
          firstHour: 7,
          columnFormat: {
              month: 'dddd',
              week: 'ddd, dS',
              day: 'dddd, MMM dS'
          },
          header: {
              right: 'prev,next',
              center: 'title',
              left: 'month,agendaWeek,agendaDay'
          },
          viewDisplay: function (view) {
              try {
                  setTimeline();
              } catch (err) {}
          },
          agenda: 'h:mm{ - h:mm}',
              '': 'h(:mm)t',
          drop: function (date, allDay) {
              var originalEventObject = $(this).data('eventObject');
              var copiedEventObject = $.extend({}, originalEventObject);
              copiedEventObject.start = date;
              copiedEventObject.end = new Date(date.getDate() + 2);
              copiedEventObject.allDay = allDay;
              $.fullCalendar.formatDate(copiedEventObject.start, "yyyy-MM-dd HH:mm:ss");
              end = $.fullCalendar.formatDate(copiedEventObject.end, "yyyy-MM-dd HH:mm:ss");
              $.ajax({
                  url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
                  data: 'title=' + copiedEventObject.title + '&start=' + start + '&end=' + end + "&backgroundColor=" + copiedEventObject.backgroundColor + '&creator=<?php print_r($_SESSION["uid"]); ?>',
                  type: "POST",
                  success: function (response) {
                      console.log(response);
                      $('#calendar').fullCalendar('refetchEvents');
                  }
              });
              if ($('#drop-remove').is(':checked')) {
                  $(this).remove();
              }
          },
          editable: true,
          defaultView: 'agendaWeek',
          firstDay: 1,
          handleWindowResize: true,
          dragOpacity: 0.7,
          allDayDefault: false,
          events: "<?php echo SITEURL; ?>/fullcalendar/events.php?creator=<?php print_r($_SESSION['uid']); ?>",
          timeFormat: 'HH:mm { - HH:mm}',
          selectable: true,
          selectHelper: true,
          select: function (start, end, allDay) {
              $(".popup").css({
                  'display': 'block',
                      'opacity': '0'
              }).animate({
                  'opacity': '1',
                      'top': '45%'
              }, 300);
              $(".submitForm").click(function () {
                  var title = $(".title").val();
                  if (title) {
                      start = $.fullCalendar.formatDate(new Date(start), "yyyy-MM-dd HH:mm:ss");
                      end = $.fullCalendar.formatDate(new Date(end), "yyyy-MM-dd HH:mm:ss");
                      $.ajax({
                          url: '<?php echo SITEURL; ?>/fullcalendar/add_events.php',
                          data: 'title=' + title + '&start=' + start + '&end=' + end + '&creator=<?php print_r($_SESSION["uid"]); ?>',
                          type: "POST",
                          success: function (json) {
                              console.log(json);
                              $('#calendar').fullCalendar('refetchEvents');
                          }
                      });
                      console.log("start " + start + " end " + end);
                  }
                  calendar.fullCalendar('unselect');
                  $(".popup").css({
                      'display': 'block',
                          'opacity': '1'
                  }).animate({
                      'opacity': '0',
                          'top': '55%',
                          'display': 'none'
                  }, 300);
              });
              $(".exit").click(function () {
                  // clear all info, unselect events and...
                  $(".popup").css({
                      'display': 'block',
                          'opacity': '1'
                  }).animate({
                      'opacity': '0',
                          'top': '55%',
                          'display': 'none'
                  }, 300);
              });
          },
          eventDrop: function (event, delta) {
              start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
              end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
              $.ajax({
                  url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
                  data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                  type: "POST",
                  success: function (response) {
                      console.log(response);
                  }
              });
          },
          eventClick: function (event, jsEvent, view) {
              if (confirm("Really delete event " + event.title + "with id " + event.id + "?")) {
                  $.ajax({
                      url: "<?php echo SITEURL; ?>/fullcalendar/delete_event.php",
                      data: 'eid=' + event.id,
                      type: "POST",
                      success: function (response) {
                          console.log(response);
                          calendar.fullCalendar('removeEvents', event.id);
                      }
                  });
              }
          },
          eventResize: function (event) {
              start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
              end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
              $.ajax({
                  url: '<?php echo SITEURL; ?>/fullcalendar/update_events.php',
                  data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                  type: "POST",
                  success: function (response) {
                      console.log(response);
                  }
              });
          },
      });
      $('#external-events div.external-event').each(function () {
          var eventObject = {
              title: $.trim($(this).text()),
              backgroundColor: $.trim($(this).attr('bgc'))
          };
          $(this).data('eventObject', eventObject);
          $(this).draggable({
              zIndex: 999,
              revert: true,
              revertDuration: 0
          });
      });
  });

