<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Two-Pane Calendar with Custom Rendering and Multiple Selection</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Two-Pane Calendar with Custom Rendering and Multiple Selection</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style>
.example {
font-size:15px;
}
.example h4 {
border: none;
text-transform: none;
}
.example th {
background: none;
color: #000;
text-transform: none;
border: none;
}
</style>
<div class="intro">
<p>
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>
<div class="example yui3-skin-sam">
<style>
.yui3-skin-sam .redtext {
color:#ff0000;
}
</style>
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
<div id="mycalendar"></div>
</div>
<script type="text/javascript">
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": {
"all": {
"all": {
"2,5": "tuesdays_and_fridays",
"0,6": "all_weekends"
}
}
}
};
// Set the calendar customRenderer, provides the rules defined above,
// as well as a filter function. The filter function receives a reference
// to the node corresponding to the DOM element of the date that matched
// one or more rule, along with the list of rules. Check if one of the
// rules is "all_weekends", and if so, apply a custom CSS class to the
// node.
calendar.set("customRenderer", {
rules: rules,
filterFunction: function (date, node, rules) {
if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {
node.addClass("redtext");
}
}
});
// Set a custom header renderer with a callback function,
// which receives the current date and outputs a string.
// use the Y.Datatype.Date format to format the date, and
// the Datatype.Date math to add one month to the current
// date, so both months can appear in the header (since
// this is a two-pane calendar).
calendar.set("headerRenderer", function (curDate) {
var ydate = Y.DataType.Date,
output = ydate.format(curDate, {
format: "%B %Y"
}) + " — " + ydate.format(ydate.addMonths(curDate, 1), {
format: "%B %Y"
});
return output;
});
// When selection changes, output the fired event to the
// console. the newSelection attribute in the event facade
// will contain the list of currently selected dates (or be
// empty if all dates have been deselected).
calendar.on("selectionChange", function (ev) {
Y.log(ev);
});
});
</script>
</div>
<h2>Complete Example Source</h2>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><style>
.yui3-skin-sam .redtext {
color:#ff0000;
}
</style>
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
<div id="mycalendar"></div>
</div>
<script type="text/javascript">
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": {
"all": {
"all": {
"2,5": "tuesdays_and_fridays",
"0,6": "all_weekends"
}
}
}
};
// Set the calendar customRenderer, provides the rules defined above,
// as well as a filter function. The filter function receives a reference
// to the node corresponding to the DOM element of the date that matched
// one or more rule, along with the list of rules. Check if one of the
// rules is "all_weekends", and if so, apply a custom CSS class to the
// node.
calendar.set("customRenderer", {
rules: rules,
filterFunction: function (date, node, rules) {
if (Y.Array.indexOf(rules, 'all_weekends') >= 0) {
node.addClass("redtext");
}
}
});
// Set a custom header renderer with a callback function,
// which receives the current date and outputs a string.
// use the Y.Datatype.Date format to format the date, and
// the Datatype.Date math to add one month to the current
// date, so both months can appear in the header (since
// this is a two-pane calendar).
calendar.set("headerRenderer", function (curDate) {
var ydate = Y.DataType.Date,
output = ydate.format(curDate, {
format: "%B %Y"
}) + " &mdash; " + ydate.format(ydate.addMonths(curDate, 1), {
format: "%B %Y"
});
return output;
});
// When selection changes, output the fired event to the
// console. the newSelection attribute in the event facade
// will contain the list of currently selected dates (or be
// empty if all dates have been deselected).
calendar.on("selectionChange", function (ev) {
Y.log(ev);
});
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="How to create a single-pane calendar with selectable dates">
<a href="calendar-simple.html">Simple Calendar with Selection</a>
</li>
<li data-description="How to create a multi-pane calendar with custom-rendered cells and multiple date selection.">
<a href="calendar-multipane.html">Two-Pane Calendar with Custom Rendering and Multiple Selection</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/calendar',
name: 'calendar-multipane',
title: 'Two-Pane Calendar with Custom Rendering and Multiple Selection',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('calendar-simple');
YUI.Env.Tests.examples.push('calendar-multipane');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>