Search Qodo.co.uk

Javascript: Pop up DHTML calendar using CSS

If you are looking for a simple JavaScript calendar that uses CSS and is easy to customise, then take a look at my calendar. I have created a basic javascript calendar that can be tweaked to suit your needs that makes it easy for your users to pick a date.

Last updated: January 2008

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

Download the Javascript: Pop up DHTML calendar using CSS now!

Credits

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

Post to Twitter

Post Details

Blog Archives

Blog Categories

Comments

8 Responses to “Javascript: Pop up DHTML calendar using CSS”

How can I change the date format to mm/dd/yy in the display?
Thanks

Hi Anup, a new version with selectable date formats is coming soon.

Thank you for the reply. I’ll be looking forward for the new version. Is there any quick fix for now?

  • December 5th, 2008
  • Posted by weenaak
  • Permalink

I love the calendar, thanks! I have added some code to move the calendar if it falls off the page…

place this code in the showCalendar function after x and y have been defined. You must also define calendarWidth and calendarHeight before this code. You have to define them based on the number of rows and cols in the table, and the widths, heights, margins and borders in the css.

// Move the calendar if it falls off the page
var pageWidth = 0;
var pageHeight = 0;
if (typeof( window.innerWidth ) == 'number' ) {
	//Non-IE
	pageWidth = window.innerWidth;
	pageHeight = window.innerHeight;
} else if( document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight) ) {
	//IE 6+ in 'standards compliant mode'
	pageWidth = document.documentElement.clientWidth;
	pageHeight = document.documentElement.clientHeight;
} else if( document.body && (document.body.clientWidth || document.body.clientHeight) ) {
	//IE 4 compatible
	pageWidth = document.body.clientWidth;
	pageHeight = document.body.clientHeight;
}
if(x+calendarWidth > pageWidth) x = pageWidth - calendarWidth;
if(y+calendarHeight > pageHeight) y = pageHeight - calendarHeight - 5; // subtract 5 because of the y+5 in the next line
  • April 2nd, 2009
  • Posted by miss cassandra
  • Permalink

I was having problems with another calendar + IE7 … I found yours and want to say THANKS!!! I’m in the US, so I did need to change the date format. Replace line 200 of ezcalendar.js with the following:

getID("cell"+r+c).href = "javascript:setDateValue('" + formatNumber(calendarDate.getMonth()+1) + dateSeparator + formatNumber(calendarDate.getDate()) + dateSeparator + calendarDate.getFullYear() + "')";

makes the date mm/dd/yyyy … hope it helps anyone else looking for the easy solution – thanks again! :)

nice! i’m gonna make my own blog

Works in IE+Opera+Firefox+Safari

that’s what i looked

THANXXXXX)))))

Very nice calendar! Saved me a lot time in coding my ERP project

Leave Feedback

Your comments