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, only in the sense that it was used as a base, but has been almost entirely re-implemented.

Like CalendarView? Try my JavaScript list selection tool, MatrixView!

Features

Examples

Embedded Calendar


Select Date

Popup Calendar

Show Calendar

Download

CalendarView requires Prototype 1.6.0 (or later).

You may also access the source code at GitHub.

Release History

Version 1.2 — May 13th, 2009

Version 1.1 — October 19th, 2008

Version 1.0 — March 12th, 2007

Development Roadmap

Support CalendarView Development

CalendarView is developed in the author's spare time. If you find it to be useful within your web application, please consider making a small donation to support and encourage future development.

Usage Instructions

Options

Option Description
dateField An HTML element (or DOM ID) that will be updated when a date is selected. Can be an INPUT field or any other JavaScript object that has either innerHTML or value attributes. The value of this field will also be parsed for setting the current date when the Calendar is initialized.
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.
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.

Setting up an Embedded Calendar

Embedded calendars require a parent element so that it can be appended to the DOM, such as a div element.

Embedded Calendar Example

<html>
  <head>
    ...
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="calendarview.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Calendar.setup({
          dateField     : 'date',
          parentElement : 'calendar'
        })
      }
    </script>
    ...
  </head>
  <body>
    ...
    <div id="calendar"></div>
    <div id="date">Select Date</div>
    ...
  </body>
</html>

Setting up a Popup Calendar

Popup calendars require a trigger element that will display the calendar when clicked. By default, the element defined as the dateField will trigger the calendar if a triggerElement has not been specified.

Popup Calendar Example

<html>
  <head>
    ...
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="calendarview.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Calendar.setup({
          dateField      : 'date',
          triggerElement : 'calendarButton'
        })
      }
    </script>
    ...
  </head>
  <body>
    ...
    <input type="text" name="date" id="date" />
    <input type="button" id="calendarButton" value="Show Calendar" />
    ...
  </body>
</html>

Styling the Calendar

The calendar is meant to be styled entirely with CSS. A few CSS classes are declared in the HTML output to assist in styling, but for the most part it should be styled with standard CSS element selectors.

Example HTML Output

<div class="calendar popup">
  <table>
    <thead>
      <tr>
        <td class="title" colspan="7">March 2007</td>
      </tr>
      <tr>
        <td class="button">«</td>
        <td class="button">‹</td>
        <td class="button" colspan="3">Today</td>
        <td class="button">›</td>
        <td class="button">»</td>
      </tr>
      <tr>
        <th class="weekend">S</th>
        <th>M</th>
        <th>T</th>
        <th>W</th>
        <th>T</th>
        <th>F</th>
        <th class="weekend">S</th>
      </tr>
    </thead>
    <tbody>
      <tr class="days">
        <td class="otherDay weekend">25</td>
        <td class="otherDay">26</td>
        <td class="otherDay">27</td>
        <td class="otherDay">28</td>
        <td>1</td>
        <td>2</td>
        <td class=" weekend">3</td>
      </tr>
      <tr class="days">
        <td class="weekend">4</td>
        <td>5</td>
        <td class="selected">6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td class="weekend">10</td>
      </tr>
      <tr class="days">
        <td class="weekend">11</td>
        <td class="today">12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td class="weekend">17</td>
      </tr>
      <tr class="days">
        <td class="weekend">18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td class="weekend">24</td>
      </tr>
      <tr class="days">
        <td class="weekend">25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td class="weekend">31</td>
      </tr>
    </tbody>
  </table>
</div>