Just launched the new site! Please excuse the mess as it is set up. Jump to: main content, navigation or the bottom.

The Calendar

The calendar needs a JavaScript file and a CSS file which you can customise to suit your site. The JS file is only 14kb with comments. You simply put the javascript file in the <head> tag of your page and it will become available to use! See the examples below.

Usage

You can change the appearance of the calendar by simply changing the CSS to suit your needs. If you are feeling adventurous you can also dig into the JavaScript which is nicely commented so you can understand what's going on. You will have to change the CSS to suit your site as some of the other CSS you use on your pages might contradict what is in the calendar CSS - try it out and see how it goes!

Feel free to use this where you like but if it's a help to you, please drop me a line!

Examples

  1. Blue popup calendar A simple popup calendar in blue that doesn't have the nice fading effect on
  2. Orange small popup calendar Another smaller sized calendar that uses the nice fading effect

Changelog

  • 29/01/2008 - Improved and reduced code, added fade effect and added tool tips to dates
  • 30/03/2007 - First version

TODO List

  • Position the calendar differently if it spills over the viewable space.
  • Improve Code
  • Allow different date separators
  • Allow different date formats (YYYY/MM/DD and MM/DD/YYYY)
  • Allow for date restrictions

Credits

My calendar uses some code from QuirksMode.org - http://www.quirksmode.org/js/week.html


Comments (11)

What others have said about this post.

Got something to say?

Join the discussion! You know how these things work; enter your details and comments below and be heard.

If you have trouble reading the code, click on the code itself to generate a new random code.

Going up? Back to the top