jQuery Full Calendar

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.3/jquery/jquery-1.7.1.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<!--
Example:
http://arshaw.com/js/fullcalendar-1.5.3/demos/external-dragging.html

eventDrop api jQuery FullCalendar
http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/
-->

<div id='wrap'>
    <div id='external-events'>
        <h4>Draggable Events</h4>
        <div class='external-event'>My Event 1</div>
        <div class='external-event'>My Event 2</div>
        <div class='external-event'>My Event 3</div>
        <div class='external-event'>My Event 4</div>
        <div class='external-event'>My Event 5</div>
        <p>
            <input type='checkbox' id='drop-remove' />
            <label for='drop-remove'>remove after drop</label>
        </p>
    </div>


<div id='calendar'></div>
</div>

<div style='clear:both'></div>

CSS

body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
		
	#wrap {
		width: 1100px;
		margin: 0 auto;
		}
		
	#external-events {
		float: left;
		width: 150px;
		padding: 0 10px;
		border: 1px solid #ccc;
		background: #eee;
		text-align: left;
		}
		
	#external-events h4 {
		font-size: 16px;
		margin-top: 0;
		padding-top: 1em;
		}
		
	.external-event { /* try to mimick the look of a real event */
		margin: 10px 0;
		padding: 2px 4px;
		background: #3366CC;
		color: #fff;
		font-size: .85em;
		cursor: pointer;
		}
		
	#external-events p {
		margin: 1.5em 0;
		font-size: 11px;
		color: #666;
		}
		
	#external-events p input {
		margin: 0;
		vertical-align: middle;
		}

	#calendar {
		float: right;
		width: 900px;
		}

JavaScript

/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };
    
    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);
    
    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the 
    });
});

/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
        alert(
            event.title + " was moved " +
            dayDelta + " days and " +
            minuteDelta + " minutes."
        );

        if (allDay) {
            alert("Event is now all-day");
        }else{
            alert("Event has a time-of-day");
        }

        if (!confirm("Are you sure about this change?")) {
            revertFunc();
        }
    },
    
    droppable: true, // this allows things to be dropped onto the calendar !!!
    
    drop: function(date, allDay) { // this function is called when something is dropped
        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');
        
        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);
        //...