← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/calendar/calendar-simple.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/calendar/calendar-simple.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Simple Calendar with Selection</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Simple Calendar with Selection</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><style>
21
 
.example {
22
 
        font-size:15px;
23
 
}
24
 
 
25
 
.example h4 {
26
 
        border: none;
27
 
        text-transform: none;
28
 
}
29
 
 
30
 
.example th {
31
 
        background: none;
32
 
        color: #000;
33
 
        text-transform: none;
34
 
        border: none;
35
 
}
36
 
</style>
37
 
 
38
 
<div class="intro">
39
 
<p>
40
 
This example demonstrates how to instantiate a simple Calendar, with an initial date setting of September 2011. The Calendar is preconfigured to show the previous and next month's dates.
41
 
</p>
42
 
 
43
 
<p>
44
 
Try clicking on the toggle buttons to change the initial settings for showing the previous and next months' dates. You can also select dates in the calendar and see selected date on the right, reported via a <code>selectionChange</code> event, and formatted using DataType utility.
45
 
</p>
46
 
</div>
47
 
 
48
 
<div class="example yui3-skin-sam">
49
 
    <!-- Load the YUI CSSButton CSS file from gallery to create simple and quick buttons -->
50
 
<link href="http://yui.yahooapis.com/gallery-2011.08.31-20-57/build/gallerycss-cssbutton/gallerycss-cssbutton.css" type="text/css" rel="stylesheet" />
51
 
 
52
 
<!-- Add an additional blue button style -->
53
 
<style>
54
 
.yui3-skin-sam .yui3-button-color-blue {
55
 
  color: #fff;
56
 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3476b7));
57
 
  background-image: -webkit-linear-gradient(top, #599bdc, #3476b7);
58
 
  background-image: -moz-linear-gradient(top, #599bdc, #3476b7);
59
 
  background-image: -ms-linear-gradient(top, #599bdc, #3476b7);
60
 
  background-image: -o-linear-gradient(top, #599bdc, #3476b7);
61
 
  background-image: linear-gradient(top, #599bdc, #3476b7);
62
 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#599bdc', EndColorStr='#3476b7');
63
 
  background-color: #3476b7;
64
 
}
65
 
</style>
66
 
 
67
 
<div id="demo" class="yui3-skin-sam yui3-g">
68
 
  <div id="leftcolumn" class="yui3-u">
69
 
     <!-- Container for the calendar -->
70
 
     <div id="mycalendar"></div>
71
 
  </div>
72
 
  <div id="rightcolumn" class="yui3-u">
73
 
   <div id="links" style="padding-left:20px;">
74
 
      <!-- The buttons are created simply by assigning the correct CSS class -->
75
 
      <div id="togglePrevMonth" class="yui3-button yui3-button-color-blue">Toggle Previous Month's Dates</div><br>
76
 
      <div id="toggleNextMonth" class="yui3-button yui3-button-color-blue">Toggle Next Month's Dates</div><br>
77
 
      Selected date: <span id="selecteddate"></span>
78
 
   </div>
79
 
  </div>
80
 
</div>
81
 
 
82
 
<script type="text/javascript">
83
 
YUI().use('calendar', 'datatype-date',  function(Y) {
84
 
    
85
 
    // Create a new instance of calendar, placing it in 
86
 
    // #mycalendar container, setting its width to 340px,
87
 
    // the flags for showing previous and next month's 
88
 
    // dates in available empty cells to true, and setting 
89
 
    // the date to August 2011.           
90
 
    var calendar = new Y.Calendar({
91
 
      contentBox: "#mycalendar",
92
 
      width:'340px',
93
 
      showPrevMonth: true,
94
 
      showNextMonth: true,
95
 
      date: new Date(2011, 07, 01)}).render();
96
 
    
97
 
    // Get a reference to Y.DataType.Date
98
 
    var dtdate = Y.DataType.Date;
99
 
 
100
 
    // Listen to calendar's selectionChange event.
101
 
    calendar.on("selectionChange", function (ev) {
102
 
 
103
 
      // Get the date from the list of selected
104
 
      // dates returned with the event (since only
105
 
      // single selection is enabled by default,
106
 
      // we expect there to be only one date)
107
 
      var newDate = ev.newSelection[0];
108
 
 
109
 
      // Format the date and output it to a DOM
110
 
      // element.
111
 
      Y.one("#selecteddate").setContent(dtdate.format(newDate));
112
 
    });
113
 
 
114
 
 
115
 
    // When the 'Show Previous Month' link is clicked,
116
 
    // modify the showPrevMonth property to show or hide
117
 
    // previous month's dates
118
 
    Y.one("#togglePrevMonth").on('click', function (ev) {
119
 
      ev.preventDefault();
120
 
      calendar.set('showPrevMonth', !(calendar.get("showPrevMonth")));      
121
 
    });
122
 
 
123
 
    // When the 'Show Next Month' link is clicked,
124
 
    // modify the showNextMonth property to show or hide
125
 
    // next month's dates
126
 
    Y.one("#toggleNextMonth").on('click', function (ev) {
127
 
      ev.preventDefault();
128
 
      calendar.set('showNextMonth', !(calendar.get("showNextMonth")));      
129
 
    });
130
 
});
131
 
</script>
132
 
 
133
 
</div>
134
 
 
135
 
<h2>Complete Example Source</h2>
136
 
 
137
 
<pre class="code prettyprint">&lt;!-- Load the YUI CSSButton CSS file from gallery to create simple and quick buttons --&gt;
138
 
&lt;link href=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;gallery-2011.08.31-20-57&#x2F;build&#x2F;gallerycss-cssbutton&#x2F;gallerycss-cssbutton.css&quot; type=&quot;text&#x2F;css&quot; rel=&quot;stylesheet&quot; &#x2F;&gt;
139
 
 
140
 
&lt;!-- Add an additional blue button style --&gt;
141
 
&lt;style&gt;
142
 
.yui3-skin-sam .yui3-button-color-blue {
143
 
  color: #fff;
144
 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3476b7));
145
 
  background-image: -webkit-linear-gradient(top, #599bdc, #3476b7);
146
 
  background-image: -moz-linear-gradient(top, #599bdc, #3476b7);
147
 
  background-image: -ms-linear-gradient(top, #599bdc, #3476b7);
148
 
  background-image: -o-linear-gradient(top, #599bdc, #3476b7);
149
 
  background-image: linear-gradient(top, #599bdc, #3476b7);
150
 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#x27;#599bdc&#x27;, EndColorStr=&#x27;#3476b7&#x27;);
151
 
  background-color: #3476b7;
152
 
}
153
 
&lt;&#x2F;style&gt;
154
 
 
155
 
&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam yui3-g&quot;&gt;
156
 
  &lt;div id=&quot;leftcolumn&quot; class=&quot;yui3-u&quot;&gt;
157
 
     &lt;!-- Container for the calendar --&gt;
158
 
     &lt;div id=&quot;mycalendar&quot;&gt;&lt;&#x2F;div&gt;
159
 
  &lt;&#x2F;div&gt;
160
 
  &lt;div id=&quot;rightcolumn&quot; class=&quot;yui3-u&quot;&gt;
161
 
   &lt;div id=&quot;links&quot; style=&quot;padding-left:20px;&quot;&gt;
162
 
      &lt;!-- The buttons are created simply by assigning the correct CSS class --&gt;
163
 
      &lt;div id=&quot;togglePrevMonth&quot; class=&quot;yui3-button yui3-button-color-blue&quot;&gt;Toggle Previous Month&#x27;s Dates&lt;&#x2F;div&gt;&lt;br&gt;
164
 
      &lt;div id=&quot;toggleNextMonth&quot; class=&quot;yui3-button yui3-button-color-blue&quot;&gt;Toggle Next Month&#x27;s Dates&lt;&#x2F;div&gt;&lt;br&gt;
165
 
      Selected date: &lt;span id=&quot;selecteddate&quot;&gt;&lt;&#x2F;span&gt;
166
 
   &lt;&#x2F;div&gt;
167
 
  &lt;&#x2F;div&gt;
168
 
&lt;&#x2F;div&gt;
169
 
 
170
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
171
 
YUI().use(&#x27;calendar&#x27;, &#x27;datatype-date&#x27;,  function(Y) {
172
 
    
173
 
    &#x2F;&#x2F; Create a new instance of calendar, placing it in 
174
 
    &#x2F;&#x2F; #mycalendar container, setting its width to 340px,
175
 
    &#x2F;&#x2F; the flags for showing previous and next month&#x27;s 
176
 
    &#x2F;&#x2F; dates in available empty cells to true, and setting 
177
 
    &#x2F;&#x2F; the date to August 2011.           
178
 
    var calendar = new Y.Calendar({
179
 
      contentBox: &quot;#mycalendar&quot;,
180
 
      width:&#x27;340px&#x27;,
181
 
      showPrevMonth: true,
182
 
      showNextMonth: true,
183
 
      date: new Date(2011, 07, 01)}).render();
184
 
    
185
 
    &#x2F;&#x2F; Get a reference to Y.DataType.Date
186
 
    var dtdate = Y.DataType.Date;
187
 
 
188
 
    &#x2F;&#x2F; Listen to calendar&#x27;s selectionChange event.
189
 
    calendar.on(&quot;selectionChange&quot;, function (ev) {
190
 
 
191
 
      &#x2F;&#x2F; Get the date from the list of selected
192
 
      &#x2F;&#x2F; dates returned with the event (since only
193
 
      &#x2F;&#x2F; single selection is enabled by default,
194
 
      &#x2F;&#x2F; we expect there to be only one date)
195
 
      var newDate = ev.newSelection[0];
196
 
 
197
 
      &#x2F;&#x2F; Format the date and output it to a DOM
198
 
      &#x2F;&#x2F; element.
199
 
      Y.one(&quot;#selecteddate&quot;).setContent(dtdate.format(newDate));
200
 
    });
201
 
 
202
 
 
203
 
    &#x2F;&#x2F; When the &#x27;Show Previous Month&#x27; link is clicked,
204
 
    &#x2F;&#x2F; modify the showPrevMonth property to show or hide
205
 
    &#x2F;&#x2F; previous month&#x27;s dates
206
 
    Y.one(&quot;#togglePrevMonth&quot;).on(&#x27;click&#x27;, function (ev) {
207
 
      ev.preventDefault();
208
 
      calendar.set(&#x27;showPrevMonth&#x27;, !(calendar.get(&quot;showPrevMonth&quot;)));      
209
 
    });
210
 
 
211
 
    &#x2F;&#x2F; When the &#x27;Show Next Month&#x27; link is clicked,
212
 
    &#x2F;&#x2F; modify the showNextMonth property to show or hide
213
 
    &#x2F;&#x2F; next month&#x27;s dates
214
 
    Y.one(&quot;#toggleNextMonth&quot;).on(&#x27;click&#x27;, function (ev) {
215
 
      ev.preventDefault();
216
 
      calendar.set(&#x27;showNextMonth&#x27;, !(calendar.get(&quot;showNextMonth&quot;)));      
217
 
    });
218
 
});
219
 
&lt;&#x2F;script&gt;</pre>
220
 
 
221
 
</div>
222
 
        </div>
223
 
 
224
 
        <div id="sidebar" class="yui3-u">
225
 
            
226
 
 
227
 
            
228
 
                <div class="sidebox">
229
 
                    <div class="hd">
230
 
                        <h2 class="no-toc">Examples</h2>
231
 
                    </div>
232
 
 
233
 
                    <div class="bd">
234
 
                        <ul class="examples">
235
 
                            
236
 
                                
237
 
                                    <li data-description="How to create a single-pane calendar with selectable dates">
238
 
                                        <a href="calendar-simple.html">Simple Calendar with Selection</a>
239
 
                                    </li>
240
 
                                
241
 
                            
242
 
                                
243
 
                                    <li data-description="How to create a multi-pane calendar with custom-rendered cells and multiple date selection.">
244
 
                                        <a href="calendar-multipane.html">Two-Pane Calendar with Custom Rendering and Multiple Selection</a>
245
 
                                    </li>
246
 
                                
247
 
                            
248
 
                        </ul>
249
 
                    </div>
250
 
                </div>
251
 
            
252
 
 
253
 
            
254
 
        </div>
255
 
    </div>
256
 
</div>
257
 
 
258
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
259
 
<script>prettyPrint();</script>
260
 
 
261
 
</body>
262
 
</html>