update examples do use dynamic option setting

demos/languages.html

@@ -12,100 +12,94 @@
 <script>
 
 	$(document).ready(function() {
-		var currentLangCode = 'en';
+		var initialLangCode = 'en';
+
+		$('#calendar').fullCalendar({
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,agendaWeek,agendaDay'
+			},
+			defaultDate: '2016-06-12',
+			lang: initialLangCode,
+			buttonIcons: false, // show the prev/next text
+			weekNumbers: true,
+			editable: true,
+			eventLimit: true, // allow "more" link when too many events
+			events: [
+				{
+					title: 'All Day Event',
+					start: '2016-06-01'
+				},
+				{
+					title: 'Long Event',
+					start: '2016-06-07',
+					end: '2016-06-10'
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: '2016-06-09T16:00:00'
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: '2016-06-16T16:00:00'
+				},
+				{
+					title: 'Conference',
+					start: '2016-06-11',
+					end: '2016-06-13'
+				},
+				{
+					title: 'Meeting',
+					start: '2016-06-12T10:30:00',
+					end: '2016-06-12T12:30:00'
+				},
+				{
+					title: 'Lunch',
+					start: '2016-06-12T12:00:00'
+				},
+				{
+					title: 'Meeting',
+					start: '2016-06-12T14:30:00'
+				},
+				{
+					title: 'Happy Hour',
+					start: '2016-06-12T17:30:00'
+				},
+				{
+					title: 'Dinner',
+					start: '2016-06-12T20:00:00'
+				},
+				{
+					title: 'Birthday Party',
+					start: '2016-06-13T07:00:00'
+				},
+				{
+					title: 'Click for Google',
+					url: 'http://google.com/',
+					start: '2016-06-28'
+				}
+			]
+		});
 
 		// build the language selector's options
 		$.each($.fullCalendar.langs, function(langCode) {
 			$('#lang-selector').append(
 				$('<option/>')
 					.attr('value', langCode)
-					.prop('selected', langCode == currentLangCode)
+					.prop('selected', langCode == initialLangCode)
 					.text(langCode)
 			);
 		});
 
-		// rerender the calendar when the selected option changes
+		// when the selected option changes, dynamically change the calendar option
 		$('#lang-selector').on('change', function() {
 			if (this.value) {
-				currentLangCode = this.value;
-				$('#calendar').fullCalendar('destroy');
-				renderCalendar();
+				$('#calendar').fullCalendar('option', 'lang', this.value);
 			}
 		});
-
-		function renderCalendar() {
-			$('#calendar').fullCalendar({
-				header: {
-					left: 'prev,next today',
-					center: 'title',
-					right: 'month,agendaWeek,agendaDay'
-				},
-				defaultDate: '2016-06-12',
-				lang: currentLangCode,
-				buttonIcons: false, // show the prev/next text
-				weekNumbers: true,
-				editable: true,
-				eventLimit: true, // allow "more" link when too many events
-				events: [
-					{
-						title: 'All Day Event',
-						start: '2016-06-01'
-					},
-					{
-						title: 'Long Event',
-						start: '2016-06-07',
-						end: '2016-06-10'
-					},
-					{
-						id: 999,
-						title: 'Repeating Event',
-						start: '2016-06-09T16:00:00'
-					},
-					{
-						id: 999,
-						title: 'Repeating Event',
-						start: '2016-06-16T16:00:00'
-					},
-					{
-						title: 'Conference',
-						start: '2016-06-11',
-						end: '2016-06-13'
-					},
-					{
-						title: 'Meeting',
-						start: '2016-06-12T10:30:00',
-						end: '2016-06-12T12:30:00'
-					},
-					{
-						title: 'Lunch',
-						start: '2016-06-12T12:00:00'
-					},
-					{
-						title: 'Meeting',
-						start: '2016-06-12T14:30:00'
-					},
-					{
-						title: 'Happy Hour',
-						start: '2016-06-12T17:30:00'
-					},
-					{
-						title: 'Dinner',
-						start: '2016-06-12T20:00:00'
-					},
-					{
-						title: 'Birthday Party',
-						start: '2016-06-13T07:00:00'
-					},
-					{
-						title: 'Click for Google',
-						url: 'http://google.com/',
-						start: '2016-06-28'
-					}
-				]
-			});
-		}
-
-		renderCalendar();
 	});
 
 </script>

demos/timezones.html

@@ -10,9 +10,43 @@
 <script>
 
 	$(document).ready(function() {
-		var currentTimezone = false;
 
-		// load the list of available timezones
+		$('#calendar').fullCalendar({
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,agendaWeek,agendaDay'
+			},
+			defaultDate: '2016-06-12',
+			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());
+			}
+		});
+
+		// load the list of available timezones, build the <select> options
 		$.getJSON('php/get-timezones.php', function(timezones) {
 			$.each(timezones, function(i, timezone) {
 				if (timezone != 'UTC') { // UTC is already in the list
@@ -23,52 +57,10 @@
 			});
 		});
 
-		// when the timezone selector changes, rerender the calendar
+		// when the timezone selector changes, dynamically change the calendar option
 		$('#timezone-selector').on('change', function() {
-			currentTimezone = this.value || false;
-			$('#calendar').fullCalendar('destroy');
-			renderCalendar();
+			$('#calendar').fullCalendar('option', 'timezone', this.value || false);
 		});
-
-		function renderCalendar() {
-			$('#calendar').fullCalendar({
-				header: {
-					left: 'prev,next today',
-					center: 'title',
-					right: 'month,agendaWeek,agendaDay'
-				},
-				defaultDate: '2016-06-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>