SO Qu: http://stackoverflow.com/questions/19358001

by sebababi

HTML

<script src=" //cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<div id="calendar"></div>
<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>

CSS

.cal-popup {
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    background-color:#f5f5f5;
    z-index:9999;
    height:200px;
    border:1px;
    border-color:grey;
    border-radius:3px;
    border-style:solid;
    padding:10px;
    -moz-transition:all .2s ease-out 0;
    -webkit-transition:all .2s ease-out 0;
    transition:all .2s ease-out 0;
}

JavaScript

$(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');
             ...