starpeak / prototypeui
watch download tarball
public
Forks8Right
Watchers3Right
Fork of xilinus/prototypeui
Description: Prototype UI
Homepage: http://prototype-ui.com
Clone URL: git://github.com/starpeak/prototypeui.git
prototypeui / test / functional / calendar / index.html
100644 91 lines (78 sloc) 2.816 kb
raw blame history 
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Calendar example</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
  <script src="../../../lib/prototype.js" type="text/javascript"></script>
  <script src="../../../lib/effects.js" type="text/javascript"></script>
  <script src="../../../dist/calendar.js" type="text/javascript"></script>
 
  <link href="../../../themes/calendar/calendar.css" rel="stylesheet" type="text/css" />
  <link href="../../../themes/calendar/osx.css" rel="stylesheet" type="text/css" />
  <link href="../../../themes/calendar/ical.css" rel="stylesheet" type="text/css" />
  <link href="../../../themes/calendar/black.css" rel="stylesheet" type="text/css" />
 
  <style type="text/css" media="screen">
    body { 
      margin-top: 0; 
      padding: 0; 
      font-family: serif; 
      font-size: 12pt; 
    }
    
    div.clear {
      clear:both; margin:5px
    }
  </style>
</head>
 
<body>
  
  <h1>Basic default calendar</h1>
  <div id="calendar"></div>
  <div class="clear">&nbsp;</div>
  <label>Selected Date</label>
  <br/><br/>
  <input id="calendar_input" type="text"/>
  <div class="clear">&nbsp;</div>
  <label>Starting week day</label>
  <br/><br/>
  <select id="calendar_select">
    <option value="0">Sunday</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
  </select> 
  <div class="clear">&nbsp;</div>
  
  <h1>Calendar with custom start date</h1>
  <div id="calendar2"></div>
  <div class="clear">&nbsp;</div>
  
  <h1>Calendar with custom events</h1>
  <div id="calendar3"></div>
  <div class="clear">&nbsp;</div>
  <script type="text/javascript">
    document.observe('dom:loaded', function(e){
      this.calendar1 = new UI.Calendar('calendar', {
        startWeekday: 1,
        format: '%B %d, %Y',
        theme: 'osx'
      });
      
      this.calendar1.observe('click', function(e) {     
        $('calendar_input').value = e.memo.formattedDate;
      });
      
      $('calendar_select').observe('change', function(e) {
        this.calendar1.setStartWeekday(e.element().value);
      }.bind(this));
      
      this.calendar2 = new UI.Calendar('calendar2', {
        theme: 'ical'
      });
      
      this.calendar3 = new UI.Calendar('calendar3', {
        format: '%b %d, %Y',
        theme: 'black'
      });
      
      this.calendar3.observe('click', function(e) {
        alert(e.memo.formattedDate);
      });
    }.bind(this));
  </script>
</body>
</html>