github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/fullcalendar/demos/languages.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4  <meta charset='utf-8' />
     5  <link rel='stylesheet' href='../lib/cupertino/jquery-ui.min.css' />
     6  <link href='../fullcalendar.css' rel='stylesheet' />
     7  <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
     8  <script src='../lib/moment.min.js'></script>
     9  <script src='../lib/jquery.min.js'></script>
    10  <script src='../fullcalendar.min.js'></script>
    11  <script src='../lang-all.js'></script>
    12  <script>
    13  
    14  	$(document).ready(function() {
    15  		var currentLangCode = 'en';
    16  
    17  		// build the language selector's options
    18  		$.each($.fullCalendar.langs, function(langCode) {
    19  			$('#lang-selector').append(
    20  				$('<option/>')
    21  					.attr('value', langCode)
    22  					.prop('selected', langCode == currentLangCode)
    23  					.text(langCode)
    24  			);
    25  		});
    26  
    27  		// rerender the calendar when the selected option changes
    28  		$('#lang-selector').on('change', function() {
    29  			if (this.value) {
    30  				currentLangCode = this.value;
    31  				$('#calendar').fullCalendar('destroy');
    32  				renderCalendar();
    33  			}
    34  		});
    35  
    36  		function renderCalendar() {
    37  			$('#calendar').fullCalendar({
    38  				header: {
    39  					left: 'prev,next today',
    40  					center: 'title',
    41  					right: 'month,agendaWeek,agendaDay'
    42  				},
    43  				defaultDate: '2014-09-12',
    44  				lang: currentLangCode,
    45  				buttonIcons: false, // show the prev/next text
    46  				weekNumbers: true,
    47  				editable: true,
    48  				eventLimit: true, // allow "more" link when too many events
    49  				events: [
    50  					{
    51  						title: 'All Day Event',
    52  						start: '2014-09-01'
    53  					},
    54  					{
    55  						title: 'Long Event',
    56  						start: '2014-09-07',
    57  						end: '2014-09-10'
    58  					},
    59  					{
    60  						id: 999,
    61  						title: 'Repeating Event',
    62  						start: '2014-09-09T16:00:00'
    63  					},
    64  					{
    65  						id: 999,
    66  						title: 'Repeating Event',
    67  						start: '2014-09-16T16:00:00'
    68  					},
    69  					{
    70  						title: 'Conference',
    71  						start: '2014-09-11',
    72  						end: '2014-09-13'
    73  					},
    74  					{
    75  						title: 'Meeting',
    76  						start: '2014-09-12T10:30:00',
    77  						end: '2014-09-12T12:30:00'
    78  					},
    79  					{
    80  						title: 'Lunch',
    81  						start: '2014-09-12T12:00:00'
    82  					},
    83  					{
    84  						title: 'Meeting',
    85  						start: '2014-09-12T14:30:00'
    86  					},
    87  					{
    88  						title: 'Happy Hour',
    89  						start: '2014-09-12T17:30:00'
    90  					},
    91  					{
    92  						title: 'Dinner',
    93  						start: '2014-09-12T20:00:00'
    94  					},
    95  					{
    96  						title: 'Birthday Party',
    97  						start: '2014-09-13T07:00:00'
    98  					},
    99  					{
   100  						title: 'Click for Google',
   101  						url: 'http://google.com/',
   102  						start: '2014-09-28'
   103  					}
   104  				]
   105  			});
   106  		}
   107  
   108  		renderCalendar();
   109  	});
   110  
   111  </script>
   112  <style>
   113  
   114  	body {
   115  		margin: 0;
   116  		padding: 0;
   117  		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
   118  		font-size: 14px;
   119  	}
   120  
   121  	#top {
   122  		background: #eee;
   123  		border-bottom: 1px solid #ddd;
   124  		padding: 0 10px;
   125  		line-height: 40px;
   126  		font-size: 12px;
   127  	}
   128  
   129  	#calendar {
   130  		max-width: 900px;
   131  		margin: 40px auto;
   132  		padding: 0 10px;
   133  	}
   134  
   135  </style>
   136  </head>
   137  <body>
   138  
   139  	<div id='top'>
   140  
   141  		Language:
   142  		<select id='lang-selector'></select>
   143  
   144  	</div>
   145  
   146  	<div id='calendar'></div>
   147  
   148  </body>
   149  </html>