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.
selectionMode in this example is set to
multiple, which allows additional dates to be selected if a Shift or Ctrl/Meta 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.
There are two custom filtering rules provided in the example code. 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.
Note: be sure to add the
yui3-skin-sam classname to the
<body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.