starpeak / prototypeui forked from xilinus/prototypeui

Prototype UI

This URL has Read+Write access

prototypeui / test / functional / calendar / index.html
raw normal view history
bb6c94f3 » sgruhier 2008-05-01 init git repository 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4 <head>
5 <title>Calendar example</title>
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7
8 <script src="../../../lib/prototype.js" type="text/javascript"></script>
9 <script src="../../../lib/effects.js" type="text/javascript"></script>
10 <script src="../../../dist/calendar.js" type="text/javascript"></script>
11
12 <link href="../../../themes/calendar/calendar.css" rel="stylesheet" type="text/css" />
8e85aa2f » starpeak 2008-06-29 Reworked theme of calendar 13 <link href="../../../themes/calendar/osx.css" rel="stylesheet" type="text/css" />
bb6c94f3 » sgruhier 2008-05-01 init git repository 14 <link href="../../../themes/calendar/ical.css" rel="stylesheet" type="text/css" />
0748ac54 » starpeak 2008-07-03 added black theme for calendar 15 <link href="../../../themes/calendar/black.css" rel="stylesheet" type="text/css" />
bb6c94f3 » sgruhier 2008-05-01 init git repository 16
17 <style type="text/css" media="screen">
18 body {
19 margin-top: 0;
20 padding: 0;
ab42fa67 » starpeak 2008-06-29 Improved themes for calendar 21 font-family: serif;
22 font-size: 12pt;
bb6c94f3 » sgruhier 2008-05-01 init git repository 23 }
24
25 div.clear {
26 clear:both; margin:5px
27 }
28 </style>
29 </head>
30
31 <body>
32
33 <h1>Basic default calendar</h1>
34 <div id="calendar"></div>
35 <div class="clear">&nbsp;</div>
36 <label>Selected Date</label>
37 <br/><br/>
38 <input id="calendar_input" type="text"/>
39 <div class="clear">&nbsp;</div>
40 <label>Starting week day</label>
41 <br/><br/>
42 <select id="calendar_select">
43 <option value="0">Sunday</option>
44 <option value="1">Monday</option>
45 <option value="2">Tuesday</option>
46 <option value="3">Wednesday</option>
47 <option value="4">Thursday</option>
48 <option value="5">Friday</option>
49 <option value="6">Saturday</option>
50 </select>
51 <div class="clear">&nbsp;</div>
52
53 <h1>Calendar with custom start date</h1>
54 <div id="calendar2"></div>
55 <div class="clear">&nbsp;</div>
56
57 <h1>Calendar with custom events</h1>
58 <div id="calendar3"></div>
0748ac54 » starpeak 2008-07-03 added black theme for calendar 59 <div class="clear">&nbsp;</div>
bb6c94f3 » sgruhier 2008-05-01 init git repository 60 <script type="text/javascript">
61 document.observe('dom:loaded', function(e){
62 this.calendar1 = new UI.Calendar('calendar', {
63 startWeekday: 1,
8e85aa2f » starpeak 2008-06-29 Reworked theme of calendar 64 format: '%B %d, %Y',
65 theme: 'osx'
bb6c94f3 » sgruhier 2008-05-01 init git repository 66 });
67
68 this.calendar1.observe('click', function(e) {
69 $('calendar_input').value = e.memo.formattedDate;
70 });
71
72 $('calendar_select').observe('change', function(e) {
73 this.calendar1.setStartWeekday(e.element().value);
74 }.bind(this));
75
76 this.calendar2 = new UI.Calendar('calendar2', {
77 theme: 'ical'
78 });
79
80 this.calendar3 = new UI.Calendar('calendar3', {
0748ac54 » starpeak 2008-07-03 added black theme for calendar 81 format: '%b %d, %Y',
82 theme: 'black'
bb6c94f3 » sgruhier 2008-05-01 init git repository 83 });
84
85 this.calendar3.observe('click', function(e) {
86 alert(e.memo.formattedDate);
87 });
88 }.bind(this));
89 </script>
90 </body>
91 </html>