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