Developed with CSS in Mind
In CalendarView you will find no embedded style or presentation. You are encouraged to make it look how you want it to look so that it looks like it belongs in your project.
Embedded or Popup — You Decide!
CalendarView can be either embedded into your page or used as a pop-up. The choice is yours!
Lightweight and Easy to Use
Frustrated with the complexity and bloatedness of existing calendars, CalendarView was implemented as a lightweight alternative.
Utilizes the Prototype Framework
CalendarView requires Prototype 1.6.0 (or later).
- calendarview-1.2.zip — CalendarView 1.2 Full Package
- calendarview.css — Default Stylesheet
You may also access the source code at GitHub.
Version 1.2 — May 13th, 2009
- Fixed some CSS rules in the packaged stylesheet so that days from other months and the current date are styled the way they were intended.
- Reorganized the repository a bit and added an example to the downloadable package.
- Added some release packaging scripts to ease distribution of new releases.
- Fixed the display of days from other months in the default CSS. Thanks to Corie Slate for reporting this issue.
- Fixed a compatibility issue with Internet Explorer 8. Thanks to Gabriel Engel for this fix.
Version 1.1 — October 19th, 2008
- Upgraded to Prototype 1.6 and cleaned up code to take full advantage of its new API features.
- Removed our dependency on Builder from script.aculo.us, as Prototype 1.6 has its own DOM Builder now
- Fixed a bug where navigating through months of the calendar would display the wrong year when you reached December. Thanks to Dirk Koritnik for the fix and to everyone who reported the issue.
Version 1.0 — March 12th, 2007
- Initial release
- Add support for assigning an HTML ID and CSS classes to the Calendar at time of creation
- Reuse Calendar objects for Popup Calendars instead of creating new objects
- Cleanup, extract, or remove the Date object extensions
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.
An HTML element (or DOM ID) that will be updated when a date is selected. Can be an INPUT field or any other
|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.|
Setting up an Embedded Calendar
Embedded calendars require a parent element so that it can be appended to the DOM, such as a
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.
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.