Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 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 
			// store data so the calendar knows to render an event upon drop
22 
			$(this).data('event', {
23 
				title: $.trim($(this).text()), // use the element's text as the event title
24 
				stick: true // maintain when user navigates (see docs on the renderEvent method)
25 
			});
26 
 
27 
			// make the event draggable using jQuery UI
28 
			$(this).draggable({
29 
				zIndex: 999,
30 
				revert: true,      // will cause the event to go back to its
31 
				revertDuration: 0  //  original position after the drag
32 
			});
33 
 
34 
		});
35 
 
36 
 
37 
		/* initialize the calendar
38 
		-----------------------------------------------------------------*/
39 
 
40 
		$('#calendar').fullCalendar({
41 
			header: {
42 
				left: 'prev,next today',
43 
				center: 'title',
44 
				right: 'month,agendaWeek,agendaDay'
45 
			},
46 
			editable: true,
47 
			droppable: true, // this allows things to be dropped onto the calendar
48 
			drop: function() {
49 
				// is the "remove after drop" checkbox checked?
50 
				if ($('#drop-remove').is(':checked')) {
51 
					// if so, remove the element from the "Draggable Events" list
52 
					$(this).remove();
53 
				}
54 
			}
55 
		});
56 
 
57 
 
58 
	});
59 
 
60 
</script>
61 
<style>
62 
 
63 
	body {
64 
		margin-top: 40px;
65 
		text-align: center;
66 
		font-size: 14px;
67 
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
68 
	}
69 
 
70 
	#wrap {
71 
		width: 1100px;
72 
		margin: 0 auto;
73 
	}
74 
 
75 
	#external-events {
76 
		float: left;
77 
		width: 150px;
78 
		padding: 0 10px;
79 
		border: 1px solid #ccc;
80 
		background: #eee;
81 
		text-align: left;
82 
	}
83 
 
84 
	#external-events h4 {
85 
		font-size: 16px;
86 
		margin-top: 0;
87 
		padding-top: 1em;
88 
	}
89 
 
90 
	#external-events .fc-event {
91 
		margin: 10px 0;
92 
		cursor: pointer;
93 
	}
94 
 
95 
	#external-events p {
96 
		margin: 1.5em 0;
97 
		font-size: 11px;
98 
		color: #666;
99 
	}
100 
 
101 
	#external-events p input {
102 
		margin: 0;
103 
		vertical-align: middle;
104 
	}
105 
 
106 
	#calendar {
107 
		float: right;
108 
		width: 900px;
109 
	}
110 
 
111 
</style>
112 
</head>
113 
<body>
114 
	<div id='wrap'>
115 
 
116 
		<div id='external-events'>
117 
			<h4>Draggable Events</h4>
118 
			<div class='fc-event'>My Event 1</div>
119 
			<div class='fc-event'>My Event 2</div>
120 
			<div class='fc-event'>My Event 3</div>
121 
			<div class='fc-event'>My Event 4</div>
122 
			<div class='fc-event'>My Event 5</div>
123 
			<p>
124 
				<input type='checkbox' id='drop-remove' />
125 
				<label for='drop-remove'>remove after drop</label>
126 
			</p>
127 
		</div>
128 
 
129 
		<div id='calendar'></div>
130 
 
131 
		<div style='clear:both'></div>
132 
 
133 
	</div>
134 
</body>
135 
</html>