~bcsaller/juju-gui/charmFind

This example demonstrates how to instantiate a Calendar, switch its template to a double-pane, and create custom renderers for its header and certain cells (based on rules), as well as turn on multiple date selection and disable certain dates from being selected.

</p>

<p><strong>The <code>selectionMode</code> in this example is set to <code>multiple</code></strong>, which allows additional dates to be selected if a <strong>Shift</strong> or <strong>Ctrl/Meta</strong> key is held down. This selection mode does not allow multiple selection on touchscreen devices; for such devices, use the <code>multiple-sticky</code> selection mode instead.

</p>

<p>

<strong>There are two custom filtering rules provided in the example code.</strong> One matches all Saturdays and Sundays (weekends in the United States), and the other matches Tuesdays and Fridays. The first rule is used in conjunction with a custom renderer to set the corresponding date cell text color to red. The second rule is used to disable matching dates from selection and interaction.

</p>

</div>

<style>

.yui3-skin-sam .redtext {

color:#ff0000;

}

</style>

</div>

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

// Switch the calendar main template to the included two pane template

Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

// Create a new instance of calendar, setting the showing of previous

// and next month's dates to true, and the selection mode to multiple

// selected dates. Additionally, set the disabledDatesRule to a name of

// the rule which, when matched, will force the date to be excluded

// from being selected. Also configure the initial date on the calendar

// to be July of 2011.

var calendar = new Y.Calendar({

contentBox: "#mycalendar",

width: "700px",

showPrevMonth: true,

showNextMonth: true,

selectionMode: 'multiple',

disabledDatesRule: "tuesdays_and_fridays",

date: new Date(2011, 6, 1)

}).render();

// Create a set of rules to match specific dates. In this case,

// the "tuesdays_and_fridays" rule will match any Tuesday or Friday,

// whereas the "all_weekends" rule will match any Saturday or Sunday.

var rules = {

"all": {

"2,5": "tuesdays_and_fridays",

"0,6": "all_weekends"

}

};

// Set the calendar customRenderer, provides the rules defined above,

100

// as well as a filter function. The filter function receives a reference

101

// to the node corresponding to the DOM element of the date that matched

102

// one or more rule, along with the list of rules. Check if one of the

103

// rules is "all_weekends", and if so, apply a custom CSS class to the

104

// node.

105

calendar.set("customRenderer", {

106

rules: rules,

107

filterFunction: function (date, node, rules) {

108

if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {

109

node.addClass("redtext");

110

}

111

}

112

});

113

114

// Set a custom header renderer with a callback function,

115

// which receives the current date and outputs a string.

116

// use the Y.Datatype.Date format to format the date, and

117

// the Datatype.Date math to add one month to the current

118

// date, so both months can appear in the header (since

119

// this is a two-pane calendar).

120

calendar.set("headerRenderer", function (curDate) {

121

var ydate = Y.DataType.Date,

122

output = ydate.format(curDate, {

123

format: "%B %Y"

124

}) + " — " + ydate.format(ydate.addMonths(curDate, 1), {

125

format: "%B %Y"

126

});

127

return output;

128

});

129

130

// When selection changes, output the fired event to the

131

// console. the newSelection attribute in the event facade

132

// will contain the list of currently selected dates (or be

133

// empty if all dates have been deselected).

134

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

135

Y.log(ev);

136

});

137

138

});

139

140

</script>

141

142

</div>

143

144

<h2>Complete Example Source</h2>

145

146

147

.yui3-skin-sam .redtext {

148

color:#ff0000;

149

}

150

</style>

151

152

153

</div>

154

155

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

156

157

158

// Switch the calendar main template to the included two pane template

159

Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

160

161

// Create a new instance of calendar, setting the showing of previous

162

// and next month's dates to true, and the selection mode to multiple

163

// selected dates. Additionally, set the disabledDatesRule to a name of

164

// the rule which, when matched, will force the date to be excluded

165

// from being selected. Also configure the initial date on the calendar

166

// to be July of 2011.

167

var calendar = new Y.Calendar({

168

contentBox: "#mycalendar",

169

width: "700px",

170

showPrevMonth: true,

171

showNextMonth: true,

172

selectionMode: 'multiple',

173

disabledDatesRule: "tuesdays_and_fridays",

174

date: new Date(2011, 6, 1)

175

}).render();

176

177

// Create a set of rules to match specific dates. In this case,

178

// the "tuesdays_and_fridays" rule will match any Tuesday or Friday,

179

// whereas the "all_weekends" rule will match any Saturday or Sunday.

180

var rules = {

181

"all": {

182

"all": {

183

"all": {

184

"2,5": "tuesdays_and_fridays",

185

"0,6": "all_weekends"

186

}

187

}

188

}

189

};

190

191

// Set the calendar customRenderer, provides the rules defined above,

192

// as well as a filter function. The filter function receives a reference

193

// to the node corresponding to the DOM element of the date that matched

194

// one or more rule, along with the list of rules. Check if one of the

195

// rules is "all_weekends", and if so, apply a custom CSS class to the

196

// node.

197

calendar.set("customRenderer", {

198

rules: rules,

199

filterFunction: function (date, node, rules) {

200

if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {

201

node.addClass("redtext");

202

}

203

}

204

});

205

206

// Set a custom header renderer with a callback function,

207

// which receives the current date and outputs a string.

208

// use the Y.Datatype.Date format to format the date, and

209

// the Datatype.Date math to add one month to the current

210

// date, so both months can appear in the header (since

211

// this is a two-pane calendar).

212

calendar.set("headerRenderer", function (curDate) {

213

var ydate = Y.DataType.Date,

214

output = ydate.format(curDate, {

215

format: "%B %Y"

216

}) + " &mdash; " + ydate.format(ydate.addMonths(curDate, 1), {

217

format: "%B %Y"

218

});

219

return output;

220

});

221

222

// When selection changes, output the fired event to the

223

// console. the newSelection attribute in the event facade

224

// will contain the list of currently selected dates (or be

225

// empty if all dates have been deselected).

226

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

227

Y.log(ev);

228

});

229

230

});

231

232

</script></pre>

233

234

</div>

235

</div>

236

</div>

237

238

239

240

241

242

243

244

245

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

246

</div>

247

248

249

250

251

252

253

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

254

</li>

255

256

257

258

259

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

260

</li>

261

262

263

</ul>

264

</div>

265

</div>

266

267

268

269

</div>

270

</div>

271

</div>

272

</div>

273

274

275

276

277

</body>

278

</html>

Older »