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='../fullcalendar.min.js'></script>
10 
<script>
11 
 
12 
	$(document).ready(function() {
13 
		var currentTimezone = false;
14 
 
15 
		// load the list of available timezones
16 
		$.getJSON('php/get-timezones.php', function(timezones) {
17 
			$.each(timezones, function(i, timezone) {
18 
				if (timezone != 'UTC') { // UTC is already in the list
19 
					$('#timezone-selector').append(
20 
						$("<option/>").text(timezone).attr('value', timezone)
21 
					);
22 
				}
23 
			});
24 
		});
25 
 
26 
		// when the timezone selector changes, rerender the calendar
27 
		$('#timezone-selector').on('change', function() {
28 
			currentTimezone = this.value || false;
29 
			$('#calendar').fullCalendar('destroy');
30 
			renderCalendar();
31 
		});
32 
 
33 
		function renderCalendar() {
34 
			$('#calendar').fullCalendar({
35 
				header: {
36 
					left: 'prev,next today',
37 
					center: 'title',
38 
					right: 'year,month,agendaWeek,agendaDay'
39 
				},
40 
				defaultDate: '2015-02-12',
41 
				timezone: currentTimezone,
42 
				editable: true,
43 
				eventLimit: true, // allow "more" link when too many events
44 
				events: {
45 
					url: 'php/get-events.php',
46 
					error: function() {
47 
						$('#script-warning').show();
48 
					}
49 
				},
50 
				loading: function(bool) {
51 
					$('#loading').toggle(bool);
52 
				},
53 
				eventRender: function(event, el) {
54 
					// render the timezone offset below the event title
55 
					if (event.start.hasZone()) {
56 
						el.find('.fc-title').after(
57 
							$('<div class="tzo"/>').text(event.start.format('Z'))
58 
						);
59 
					}
60 
				}
61 
			});
62 
		}
63 
 
64 
		renderCalendar();
65 
	});
66 
 
67 
</script>
68 
<style>
69 
 
70 
	body {
71 
		margin: 0;
72 
		padding: 0;
73 
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
74 
		font-size: 14px;
75 
	}
76 
 
77 
	#top {
78 
		background: #eee;
79 
		border-bottom: 1px solid #ddd;
80 
		padding: 0 10px;
81 
		line-height: 40px;
82 
		font-size: 12px;
83 
	}
84 
	.left { float: left }
85 
	.right { float: right }
86 
	.clear { clear: both }
87 
 
88 
	#script-warning, #loading { display: none }
89 
	#script-warning { font-weight: bold; color: red }
90 
 
91 
	#calendar {
92 
		max-width: 900px;
93 
		margin: 40px auto;
94 
		padding: 0 10px;
95 
	}
96 
 
97 
	.tzo {
98 
		color: #000;
99 
	}
100 
 
101 
</style>
102 
</head>
103 
<body>
104 
 
105 
	<div id='top'>
106 
 
107 
		<div class='left'>
108 
			Timezone:
109 
			<select id='timezone-selector'>
110 
				<option value='' selected>none</option>
111 
				<option value='local'>local</option>
112 
				<option value='UTC'>UTC</option>
113 
			</select>
114 
		</div>
115 
 
116 
		<div class='right'>
117 
			<span id='loading'>loading...</span>
118 
			<span id='script-warning'><code>php/get-events.php</code> must be running.</span>
119 
		</div>
120 
 
121 
		<div class='clear'></div>
122 
 
123 
	</div>
124 
 
125 
	<div id='calendar'></div>
126 
 
127 
</body>
128 
</html>