github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/fullcalendar/demos/external-dragging.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4  <meta charset='utf-8' />
     5  <link href='../fullcalendar.css' rel='stylesheet' />
     6  <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
     7  <script src='../lib/moment.min.js'></script>
     8  <script src='../lib/jquery.min.js'></script>
     9  <script src='../lib/jquery-ui.custom.min.js'></script>
    10  <script src='../fullcalendar.min.js'></script>
    11  <script>
    12  
    13  	$(document).ready(function() {
    14  	
    15  	
    16  		/* initialize the external events
    17  		-----------------------------------------------------------------*/
    18  	
    19  		$('#external-events .fc-event').each(function() {
    20  		
    21  			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    22  			// it doesn't need to have a start or end
    23  			var eventObject = {
    24  				title: $.trim($(this).text()) // use the element's text as the event title
    25  			};
    26  			
    27  			// store the Event Object in the DOM element so we can get to it later
    28  			$(this).data('eventObject', eventObject);
    29  			
    30  			// make the event draggable using jQuery UI
    31  			$(this).draggable({
    32  				zIndex: 999,
    33  				revert: true,      // will cause the event to go back to its
    34  				revertDuration: 0  //  original position after the drag
    35  			});
    36  			
    37  		});
    38  	
    39  	
    40  		/* initialize the calendar
    41  		-----------------------------------------------------------------*/
    42  		
    43  		$('#calendar').fullCalendar({
    44  			header: {
    45  				left: 'prev,next today',
    46  				center: 'title',
    47  				right: 'month,agendaWeek,agendaDay'
    48  			},
    49  			editable: true,
    50  			droppable: true, // this allows things to be dropped onto the calendar !!!
    51  			drop: function(date) { // this function is called when something is dropped
    52  			
    53  				// retrieve the dropped element's stored Event Object
    54  				var originalEventObject = $(this).data('eventObject');
    55  				
    56  				// we need to copy it, so that multiple events don't have a reference to the same object
    57  				var copiedEventObject = $.extend({}, originalEventObject);
    58  				
    59  				// assign it the date that was reported
    60  				copiedEventObject.start = date;
    61  				
    62  				// render the event on the calendar
    63  				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    64  				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
    65  				
    66  				// is the "remove after drop" checkbox checked?
    67  				if ($('#drop-remove').is(':checked')) {
    68  					// if so, remove the element from the "Draggable Events" list
    69  					$(this).remove();
    70  				}
    71  				
    72  			}
    73  		});
    74  		
    75  		
    76  	});
    77  
    78  </script>
    79  <style>
    80  
    81  	body {
    82  		margin-top: 40px;
    83  		text-align: center;
    84  		font-size: 14px;
    85  		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    86  	}
    87  		
    88  	#wrap {
    89  		width: 1100px;
    90  		margin: 0 auto;
    91  	}
    92  		
    93  	#external-events {
    94  		float: left;
    95  		width: 150px;
    96  		padding: 0 10px;
    97  		border: 1px solid #ccc;
    98  		background: #eee;
    99  		text-align: left;
   100  	}
   101  		
   102  	#external-events h4 {
   103  		font-size: 16px;
   104  		margin-top: 0;
   105  		padding-top: 1em;
   106  	}
   107  		
   108  	#external-events .fc-event {
   109  		margin: 10px 0;
   110  		cursor: pointer;
   111  	}
   112  		
   113  	#external-events p {
   114  		margin: 1.5em 0;
   115  		font-size: 11px;
   116  		color: #666;
   117  	}
   118  		
   119  	#external-events p input {
   120  		margin: 0;
   121  		vertical-align: middle;
   122  	}
   123  
   124  	#calendar {
   125  		float: right;
   126  		width: 900px;
   127  	}
   128  
   129  </style>
   130  </head>
   131  <body>
   132  	<div id='wrap'>
   133  
   134  		<div id='external-events'>
   135  			<h4>Draggable Events</h4>
   136  			<div class='fc-event'>My Event 1</div>
   137  			<div class='fc-event'>My Event 2</div>
   138  			<div class='fc-event'>My Event 3</div>
   139  			<div class='fc-event'>My Event 4</div>
   140  			<div class='fc-event'>My Event 5</div>
   141  			<p>
   142  				<input type='checkbox' id='drop-remove' />
   143  				<label for='drop-remove'>remove after drop</label>
   144  			</p>
   145  		</div>
   146  
   147  		<div id='calendar'></div>
   148  
   149  		<div style='clear:both'></div>
   150  
   151  	</div>
   152  </body>
   153  </html>