demos/timezones.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../dist/fullcalendar.css' rel='stylesheet' />
<link href='../dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment/moment.js'></script>
<script src='../lib/jquery/dist/jquery.js'></script>
<script src='../dist/fullcalendar.js'></script>
<script>

	$(document).ready(function() {
		var currentTimezone = false;

		// load the list of available timezones
		$.getJSON('php/get-timezones.php', function(timezones) {
			$.each(timezones, function(i, timezone) {
				if (timezone != 'UTC') { // UTC is already in the list
					$('#timezone-selector').append(
						$("<option/>").text(timezone).attr('value', timezone)
					);
				}
			});
		});

		// when the timezone selector changes, rerender the calendar
		$('#timezone-selector').on('change', function() {
			currentTimezone = this.value || false;
			$('#calendar').fullCalendar('destroy');
			renderCalendar();
		});

		function renderCalendar() {
			$('#calendar').fullCalendar({
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
				defaultDate: '2016-01-12',
				timezone: currentTimezone,
				editable: true,
				selectable: true,
				eventLimit: true, // allow "more" link when too many events
				events: {
					url: 'php/get-events.php',
					error: function() {
						$('#script-warning').show();
					}
				},
				loading: function(bool) {
					$('#loading').toggle(bool);
				},
				eventRender: function(event, el) {
					// render the timezone offset below the event title
					if (event.start.hasZone()) {
						el.find('.fc-title').after(
							$('<div class="tzo"/>').text(event.start.format('Z'))
						);
					}
				},
				dayClick: function(date) {
					console.log('dayClick', date.format());
				},
				select: function(startDate, endDate) {
					console.log('select', startDate.format(), endDate.format());
				}
			});
		}

		renderCalendar();
	});

</script>
<style>

	body {
		margin: 0;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#top {
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 10px;
		line-height: 40px;
		font-size: 12px;
	}
	.left { float: left }
	.right { float: right }
	.clear { clear: both }

	#script-warning, #loading { display: none }
	#script-warning { font-weight: bold; color: red }

	#calendar {
		max-width: 900px;
		margin: 40px auto;
		padding: 0 10px;
	}

	.tzo {
		color: #000;
	}

</style>
</head>
<body>

	<div id='top'>

		<div class='left'>
			Timezone:
			<select id='timezone-selector'>
				<option value='' selected>none</option>
				<option value='local'>local</option>
				<option value='UTC'>UTC</option>
			</select>
		</div>

		<div class='right'>
			<span id='loading'>loading...</span>
			<span id='script-warning'><code>php/get-events.php</code> must be running.</span>
		</div>

		<div class='clear'></div>

	</div>

	<div id='calendar'></div>

</body>
</html>