github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/fullcalendar/demos/timezones.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='../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: 'month,agendaWeek,agendaDay'
    39  				},
    40  				defaultDate: '2014-09-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>