Przeglądaj źródła

[2.0] some test file updates

Adam Shaw 12 lat temu
rodzic
commit
49088fb405
3 zmienionych plików z 188 dodań i 28 usunięć
  1. 12 0
      tests/date_util_test.html
  2. 154 0
      tests/languages-datepicker.html
  3. 22 28
      tests/selectable.html

+ 12 - 0
tests/date_util_test.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src='../lib/jquery/jquery.js'></script>
+<script src='../lib/moment/moment.js'></script>
+<script src='../lib/moment/min/langs.min.js'></script>
+<script>fc = {}</script>
+<script src='../src/date_util.js'></script>
+</head>
+<body>
+</body>
+</html>

+ 154 - 0
tests/languages-datepicker.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<link rel='stylesheet' href='../lib/jquery-ui/themes/cupertino/jquery-ui.min.css' />
+<link href='../build/out/fullcalendar.css' rel='stylesheet' />
+<link href='../build/out/fullcalendar.print.css' rel='stylesheet' media='print' />
+<script src='../lib/moment/moment.js'></script>
+<script src='../lib/jquery/jquery.js'></script>
+<script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
+<script src='../build/out/fullcalendar.js'></script>
+<script src='../build/out/lang/all.js'></script>
+<script>
+
+	$(document).ready(function() {
+		var currentLangCode = 'en';
+
+		// build the language selector's options
+		$.each($.fullCalendar.langs, function(langCode) {
+			$('#lang-selector').append(
+				$('<option/>')
+					.attr('value', langCode)
+					.prop('selected', langCode == currentLangCode)
+					.text(langCode)
+			);
+		});
+
+		// update the language when the selected option changes
+		$('#lang-selector').on('change', function() {
+			if (this.value) {
+				currentLangCode = this.value;
+				// change the language on the datepicker
+				$('#datepicker').datepicker('option', $.datepicker.regional[currentLangCode]);
+				// rerender the calendar
+				$('#calendar').fullCalendar('destroy');
+				renderCalendar();
+			}
+		});
+
+		// initialize the datepicker
+		$('#datepicker').datepicker({
+			dateFormat: 'yy-mm-dd', // needed for defaultDate
+			defaultDate: '2014-01-12',
+			showWeek: true,
+			showButtonPanel: true,
+			calculateWeek: function(nativeDate) {
+				// use Moment to calculate the local week number
+				return moment(nativeDate).lang(currentLangCode).week();
+			}
+		});
+
+		function renderCalendar() {
+			$('#calendar').fullCalendar({
+				header: {
+					left: 'prev,next today',
+					center: 'title',
+					right: 'month,agendaWeek,agendaDay'
+				},
+				date: '2014-01-12',
+				lang: currentLangCode,
+				buttonIcons: false, // show the prev/next text
+				weekNumbers: true,
+				editable: true,
+				events: [
+					{
+						title: 'All Day Event',
+						start: '2014-01-01'
+					},
+					{
+						title: 'Long Event',
+						start: '2014-01-07',
+						end: '2014-01-10'
+					},
+					{
+						id: 999,
+						title: 'Repeating Event',
+						start: '2014-01-09T16:00:00'
+					},
+					{
+						id: 999,
+						title: 'Repeating Event',
+						start: '2014-01-16T16:00:00'
+					},
+					{
+						title: 'Meeting',
+						start: '2014-01-12T10:30:00',
+						end: '2014-01-12T12:30:00'
+					},
+					{
+						title: 'Lunch',
+						start: '2014-01-12T12:00:00'
+					},
+					{
+						title: 'Birthday Party',
+						start: '2014-01-13T07:00:00'
+					},
+					{
+						title: 'Click for Google',
+						url: 'http://google.com/',
+						start: '2014-01-28'
+					}
+				]
+			});
+		}
+
+		renderCalendar();
+	});
+
+</script>
+<style>
+
+	body {
+		margin: 0;
+		padding: 0;
+		text-align: center;
+		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
+		font-size: 14px;
+	}
+
+	#top {
+		background: #eee;
+		border-bottom: 1px solid #ddd;
+		padding: 0 10px;
+		text-align: left;
+		line-height: 40px;
+		font-size: 12px;
+	}
+
+	#calendar {
+		width: 900px;
+		margin: 40px auto;
+	}
+
+	#datepicker {
+		display: inline-block;
+	}
+
+</style>
+</head>
+<body>
+
+	<div id='top'>
+
+		Language:
+		<select id='lang-selector'></select>
+
+	</div>
+
+	<div id='calendar'></div>
+
+	<div id='datepicker'></div>
+
+</body>
+</html>

+ 22 - 28
tests/selectable.html

@@ -3,11 +3,13 @@
 <head>
 <link href='../build/out/fullcalendar.css' rel='stylesheet' />
 <link href='../build/out/fullcalendar.print.css' rel='stylesheet' media='print' />
+<script src='../lib/moment/moment.js'></script>
 <script src='../lib/jquery/jquery.js'></script>
 <script src='../lib/jquery-ui/ui/jquery-ui.js'></script>
 <script src='../build/out/fullcalendar.js'></script>
 <script>
 
+	// TODO: get rid of this!!! (used at the bottom too)
 	var date = new Date();
 	var d = date.getDate();
 	var m = date.getMonth();
@@ -23,6 +25,7 @@
 				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
+			date: '2014-01-12',
 			defaultView: 'month',
 			
 			//firstDay: 1,
@@ -50,12 +53,11 @@
 			//unselectAuto: false,
 			//unselectCancel: '.fc',
 			
-			select: function(start, end, allDay, ev) {
+			select: function(start, end, ev) {
 				console.log(
 					'---- selection ----\n' +
-					'start: ' + start + '\n' +
-					'end: ' + end + '\n' +
-					'allDay: ' + allDay
+					'start: ' + start.format() + '\n' +
+					'end: ' + end.format()
 				);
 				if (ev) {
 					//console.log('select mouse: ' + ev.pageX + ', ' + ev.pageY);
@@ -67,56 +69,48 @@
 					//console.log('unselect mouse: ' + ev.pageX + ', ' + ev.pageY);
 				}
 			},
-			dayClick: function(date, allDay) {
-				console.log('DAYCLICK', date, allDay);
+			dayClick: function(date) {
+				console.log('DAYCLICK', date.format());
 				console.log(this);
 			},
 			editable: true,
 			events: [
 				{
 					title: 'All Day Event',
-					start: new Date(y, m, 1)
+					start: '2014-01-01'
 				},
 				{
 					title: 'Long Event',
-					start: new Date(y, m, d-5, 5, 0),
-					end: new Date(y, m, d-2, 2, 0),
-					allDay: false
+					start: '2014-01-07',
+					end: '2014-01-10'
 				},
 				{
 					id: 999,
 					title: 'Repeating Event',
-					start: new Date(y, m, d-3, 16, 0),
-					allDay: false
+					start: '2014-01-09T16:00:00'
 				},
 				{
 					id: 999,
 					title: 'Repeating Event',
-					start: new Date(y, m, d+4, 16, 0),
-					allDay: false
+					start: '2014-01-16T16:00:00'
 				},
 				{
 					title: 'Meeting',
-					start: new Date(y, m, d, 10, 30),
-					allDay: false
+					start: '2014-01-12T10:30:00',
+					end: '2014-01-12T12:30:00'
 				},
 				{
 					title: 'Lunch',
-					start: new Date(y, m, d, 12, 5),
-					end: new Date(y, m, d, 14, 43),
-					allDay: false
+					start: '2014-01-12T12:00:00'
 				},
 				{
 					title: 'Birthday Party',
-					start: new Date(y, m, d+1, 19, 0),
-					end: new Date(y, m, d+1, 22, 30),
-					allDay: false
+					start: '2014-01-13T07:00:00'
 				},
 				{
 					title: 'Click for Google',
-					start: new Date(y, m, 28),
-					end: new Date(y, m, 29),
-					url: 'http://google.com/'
+					url: 'http://google.com/',
+					start: '2014-01-28'
 				}
 			]
 		});
@@ -140,12 +134,12 @@
 </style>
 </head>
 <body>
-<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), new Date(y, m, d-1), true)">1day, allday</button>
+<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), new Date(y, m, d-2), true)">1day, allday</button>
 <button onclick="calendar.fullCalendar('select', new Date(y, m, d-1))">1day, noend, noallday</button>
 <button onclick="calendar.fullCalendar('select', new Date(y, m, d-1), null, false)">1day, noend, allday=false</button>
 <button onclick="calendar.fullCalendar('select', new Date(y, m, d, 5, 15), new Date(y, m, d, 15, 30), false)">1day, timed</button>
-<button onclick="calendar.fullCalendar('select', new Date(y, m, d-2), new Date(y, m, d), true)">3day, allday</button>
-<button onclick="calendar.fullCalendar('select', new Date(y, m, d-1, 5, 15), new Date(y, m, d+1, 15, 30), false)">3day, timed</button>
+<button onclick="calendar.fullCalendar('select', new Date(y, m, d-3), new Date(y, m, d), true)">3day, allday</button>
+<button onclick="calendar.fullCalendar('select', new Date(y, m, d-2, 5, 15), new Date(y, m, d+1, 15, 30), false)">3day, timed</button>
 <button onclick="calendar.fullCalendar('unselect')">unselect</button>
 <div id='calendar'></div>
 </body>