Fork me on GitHub

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:
More about Dynarch Calendar:

Fork calendar-view on github:



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

Example calendar setup

1. Pop-up calendar

$(document).ready(function() {

2. Pop-up calendar with trigger element

$(document).ready(function() {
        triggerElement: '#date-input-2-trigger'

3. Embeded calendar

Calendar date


$(document).ready(function() {
        parentElement: '#date-input-3-container',
        dateFormat: '%d.%m.%Y'

Calendar Options

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.

Example calendar HTML

<div class="calendar popup">
        <td class="title" colspan="7">May 2009</td>
        <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>
        <th class="weekend">Sa</th>
        <th class="weekend">Su</th>
      <tr class="days">
        <td class="otherDay">27</td>
        <td class="otherDay">28</td>
        <td class="otherDay">29</td>
        <td class="otherDay">30</td>
        <td class="weekend">2</td>
        <td class="weekend">3</td>
      <tr class="days">
        <td class="weekend">9</td>
        <td class="weekend">10</td>
      <tr class="days">
        <td class="weekend">16</td>
        <td class="weekend">17</td>
      <tr class="days">
        <td class="weekend">23</td>
        <td class="weekend">24</td>
      <tr class="days">
        <td class="selected today">27</td>
        <td class="weekend">30</td>
        <td class="weekend">31</td>
      <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>