~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-updates

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.

</p>

<p>

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.

</p>

</div>

<style>

.yui3-button {

margin:10px 0px 10px 0px;

color: #fff;

background-color: #3476b7;

}

</style>

</div>

<button id="togglePrevMonth" class="yui3-button">Toggle Previous Month's Dates</button><br>

<button id="toggleNextMonth" class="yui3-button">Toggle Next Month's Dates</button><br>

Selected date: <span id="selecteddate"></span>

</div>

YUI().use('calendar', 'datatype-date', 'cssbutton', function(Y) {

// Create a new instance of calendar, placing it in

// #mycalendar container, setting its width to 340px,

// the flags for showing previous and next month's

// dates in available empty cells to true, and setting

// the date to today's date.

var calendar = new Y.Calendar({

contentBox: "#mycalendar",

width:'340px',

showPrevMonth: true,

showNextMonth: true,

date: new Date()}).render();

// Get a reference to Y.DataType.Date

var dtdate = Y.DataType.Date;

// Listen to calendar's selectionChange event.

calendar.on("selectionChange", function (ev) {

// Get the date from the list of selected

// dates returned with the event (since only

// single selection is enabled by default,

// we expect there to be only one date)

100

var newDate = ev.newSelection[0];

101

102

// Format the date and output it to a DOM

103

// element.

104

Y.one("#selecteddate").setContent(dtdate.format(newDate));

105

});

106

107

108

// When the 'Show Previous Month' link is clicked,

109

// modify the showPrevMonth property to show or hide

110

// previous month's dates

111

Y.one("#togglePrevMonth").on('click', function (ev) {

112

ev.preventDefault();

113

calendar.set('showPrevMonth', !(calendar.get("showPrevMonth")));

114

});

115

116

// When the 'Show Next Month' link is clicked,

117

// modify the showNextMonth property to show or hide

118

// next month's dates

119

Y.one("#toggleNextMonth").on('click', function (ev) {

120

ev.preventDefault();

121

calendar.set('showNextMonth', !(calendar.get("showNextMonth")));

122

});

123

});

124

</script>

125

126

</div>

127

128

<h2>Complete Example Source</h2>

129

130

131

<style>

132

.yui3-button {

133

margin:10px 0px 10px 0px;

134

color: #fff;

135

background-color: #3476b7;

136

}

137

</style>

138

139

140

141

142

143

</div>

144

145

146

147

<button id="togglePrevMonth" class="yui3-button">Toggle Previous Month's Dates</button><br>

148

<button id="toggleNextMonth" class="yui3-button">Toggle Next Month's Dates</button><br>

149

Selected date: <span id="selecteddate"></span>

150

</div>

151

</div>

152

</div>

153

154

155

YUI().use('calendar', 'datatype-date', 'cssbutton', function(Y) {

156

157

// Create a new instance of calendar, placing it in

158

// #mycalendar container, setting its width to 340px,

159

// the flags for showing previous and next month's

160

// dates in available empty cells to true, and setting

161

// the date to today's date.

162

var calendar = new Y.Calendar({

163

contentBox: "#mycalendar",

164

width:'340px',

165

showPrevMonth: true,

166

showNextMonth: true,

167

date: new Date()}).render();

168

169

// Get a reference to Y.DataType.Date

170

var dtdate = Y.DataType.Date;

171

172

// Listen to calendar's selectionChange event.

173

calendar.on("selectionChange", function (ev) {

174

175

// Get the date from the list of selected

176

// dates returned with the event (since only

177

// single selection is enabled by default,

178

// we expect there to be only one date)

179

var newDate = ev.newSelection[0];

180

181

// Format the date and output it to a DOM

182

// element.

183

Y.one("#selecteddate").setContent(dtdate.format(newDate));

184

});

185

186

187

// When the 'Show Previous Month' link is clicked,

188

// modify the showPrevMonth property to show or hide

189

// previous month's dates

190

Y.one("#togglePrevMonth").on('click', function (ev) {

191

ev.preventDefault();

192

calendar.set('showPrevMonth', !(calendar.get("showPrevMonth")));

193

});

194

195

// When the 'Show Next Month' link is clicked,

196

// modify the showNextMonth property to show or hide

197

// next month's dates

198

Y.one("#toggleNextMonth").on('click', function (ev) {

199

ev.preventDefault();

200

calendar.set('showNextMonth', !(calendar.get("showNextMonth")));

201

});

202

});

203

</script></pre>

204

205

</div>

206

</div>

207

</div>

208

209

210

211

212

213

214

215

216

<h2 class="no-toc">Examples</h2>

217

</div>

218

219

220

221

222

223

224

<a href="calendar-simple.html">Simple Calendar with Selection</a>

225

</li>

226

227

228

229

230

<a href="calendar-multipane.html">Two-Pane Calendar with Custom Rendering and Multiple Selection</a>

231

</li>

232

233

234

</ul>

235

</div>

236

</div>

237

238

239

240

</div>

241

</div>

242

</div>

243

</div>

244

245

246

247

248

</body>

249

</html>

Older »