<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 `selectionMode` in this example is set to `multiple`</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 `multiple-sticky` 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">
    {{>calendar-multipane-source}}
</div>

<h2>Complete Example Source</h2>
{{>need-skin-note}}
```
{{>calendar-multipane-source}}
```
