CalendarJS/index.htm at master · briemens/CalendarJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE HTML>
<html>
<head>
	<link href="calendar-0.0.1.css" rel="stylesheet" type="text/css"/>
	<title>Calendar Demo</title>
	<script src="jquery.js"></script>
	<script src="calendar-0.0.1.js"></script>
</head>
<body>
<h1>Calendar Demo</h1>

<div id="main">
	<label for="calendar1">Limited single selection</label>
	<input type="text" id="calendar1" name="calendar1" class="calendar selectabledates" value="" />

	<label for="calendar2">Limited multiple selection</label>
	<input type="text" id="calendar2" name="calendar2" class="calendar multipleselectabledates"/>

	<label for="calendar3">Single selection</label>
	<input type="text" id="calendar3" name="calendar3" class="calendar singleselection" value="Sun Apr 03 2011"/>

	<label for="calendar4">Multiple selection</label>
	<input type="text" id="calendar4" name="calendar4" class="calendar multipleselection" value="Sun Apr 03 2011; Sun Apr 10 2011; Sun Apr 17 2011"/>
</div>
<script>
	/*global $, console*/
	$(function () {
		$(".calendar.selectabledates")
			.calendar({
				selectableDates: [
					new Date(2011, 5 - 1, 18),
					new Date(2011, 4 - 1, 16)
				],
				onselected: function onDateSelected(date) {
					console.log("Date selected", date);
					console.log("this", this);
					$("input", this).fadeIn(400);
				}
			}).hide().fadeIn(1000);

		$(".calendar.multipleselectabledates")
			.calendar({
				multiple: true,
				selectableDates: [
					new Date(2011, 5 - 1, 18),
					new Date(2011, 4 - 1, 16)
				],
				onselected: function onDateSelected(date) {
					console.log("Date selected", date);
					console.log("this", this);
					$("input", this).fadeIn(400);
				}
			}).hide().fadeIn(1000);

		$(".calendar.singleselection")
			.calendar({
				multiple: false,
				onselected: function onDateSelected(date) {
					console.log("Date selected", date);
					$("input", this).fadeIn(400);
				}
			}).hide().fadeIn(1000);

		$(".calendar.multipleselection")
			.calendar({
				multiple: true,
				onselected: function onDateSelected(date) {
					console.log("Date selected", date);
					$("input", this).fadeIn(400);
				}
			}).hide().fadeIn(1000);

	});
</script>
</body>
</html>