The Calendar widget is a JavaScript-based calendar that can either be embedded within a
page or popup when a trigger element is clicked. It is based very loosely on the Dynarch Calendar and
CalendarView for Prototype
More about CalendarView: http://calendarview.org/
More about Dynarch Calendar: http://www.dynarch.com/projects/calendar/old/
Simply include the lines below in your head element (jQuery >= 1.3.2 is required)
<link rel="stylesheet" href="jquery.calendar.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.calendar.js"></script>
<script type="text/javascript">
// Calendar Setup code
</script>
$(document).ready(function() {
$('#date-input-1').calendar();
});
$(document).ready(function() {
$('#date-input-2').calendar({
triggerElement: '#date-input-2-trigger'
});
});
$(document).ready(function() {
$('#date-input-3').calendar({
parentElement: '#date-input-3-container',
dateFormat: '%d.%m.%Y'
});
});
| Option | Description |
|---|---|
| triggerElement | An HTML element (or DOM ID) that will be observed for clicks to display a popup calendar. If a triggerElement is not specified, the dateField will be observed instead. |
| parentElement | An HTML element (or DOM ID) that will receive the initialized embedded calendar. |
| firstDayOfWeek | specifies which day is to be displayed as the first day of week. Possible values are 0 to 6; 0 means Sunday, 1 means Monday, ..., 6 means Saturday. |
| dateFormat | The format of the date to be displayed in the input field. |
| selectHandler | JavaScript function that will be called when a date is selected. Only define this if you want to override the default behavior. |
| closeHandler | JavaScript function that will be called when the calendar should be closed (either after a selection has been made or if the user clicked outside of the calendar's container element). This only applies to popup calendars and should only be defined if you want to override the default behavior. |
<div class="calendar popup">
<table>
<thead>
<tr>
<td class="title" colspan="7">May 2009</td>
</tr>
<tr>
<td class="button" unselectable="on">«</td>
<td class="button" unselectable="on">‹</td>
<td colspan="3" class="button" unselectable="on">Today</td>
<td class="button" unselectable="on">›</td>
<td class="button" unselectable="on">»</td>
</tr>
<tr>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th class="weekend">Sa</th>
<th class="weekend">Su</th>
</tr>
</thead>
<tbody>
<tr class="days">
<td class="otherDay">27</td>
<td class="otherDay">28</td>
<td class="otherDay">29</td>
<td class="otherDay">30</td>
<td>1</td>
<td class="weekend">2</td>
<td class="weekend">3</td>
</tr>
<tr class="days">
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td class="weekend">9</td>
<td class="weekend">10</td>
</tr>
<tr class="days">
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td class="weekend">16</td>
<td class="weekend">17</td>
</tr>
<tr class="days">
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td class="weekend">23</td>
<td class="weekend">24</td>
</tr>
<tr class="days">
<td>25</td>
<td>26</td>
<td class="selected today">27</td>
<td>28</td>
<td>29</td>
<td class="weekend">30</td>
<td class="weekend">31</td>
</tr>
<tr class="days" style="display: none;">
<td class="otherDay">1</td>
<td class="otherDay">2</td>
<td class="otherDay">3</td>
<td class="otherDay">4</td>
<td class="otherDay">5</td>
<td class="otherDay weekend">6</td>
<td class="otherDay weekend">7</td>
</tr>
</tbody>
</table>
</div>