Javascript: Pop up DHTML calendar using CSS • Qodo Ltd

Discontinued

Sorry, but this calendar is now discontinued.

The reason for this is that there are now so many great calendars out there that offer more functionality and accessibility. Have a look around and I'm sure you'll find something out there.

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.

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!

Examples

Blue popup calendar A simple popup calendar in blue that doesn't have the nice fading effect on
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

Download

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

Comments 16

How can I change the date format to mm/dd/yy in the display? Thanks Anup May 29, 2008 at 07:24 PM
Hi Anup, a new version with selectable date formats is coming soon. Stewart Jun 11, 2008 at 01:03 PM
Thank you for the reply. I'll be looking forward for the new version. Is there any quick fix for now? Anup Jun 16, 2008 at 04:10 PM

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
weenaak Dec 05, 2008 at 05:08 PM

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! :) miss cassandra Apr 02, 2009 at 02:48 PM
nice! i'm gonna make my own blog chicas rubias Jul 19, 2009 at 12:16 AM
Works in IE+Opera+Firefox+Safari that's what i looked THANXXXXX))))) Mcs Oct 20, 2009 at 12:56 PM
Very nice calendar! Saved me a lot time in coding my ERP project chuava Jan 05, 2010 at 02:55 PM
Is there any way to make this calendar show up when the page loads and not have any of the form but just the calendar as a reference source for viewers on a page? I am not that good with js to know how to make it work. Bill May 19, 2010 at 11:53 PM
Hi Bill, this is intended to update a input field when the user selects a date but you could change it so that it doesn't do anything by making a hidden input field:
```
<input type="hidden" id="date1" />
```
May 20, 2010 at 09:18 AM
please, i have to recieve in my input type text something like this YYY-MM-DD, any idea?? Juan Jun 01, 2010 at 02:46 AM
hello...how do i change the format to YYYY/MM/DD? Kaveena Feb 25, 2011 at 02:01 PM
Hi i want report a problem with April of 2011 it displays like March. Why? Dimitris Apr 21, 2011 at 05:17 AM
For date format (YYYY/MM/DD) replace line 200 of ezcalendar.js with : getID("cell"+r+c).href = "javascript:setDateValue('" + formatNumber(calendarDate.getFullYear()) + dateSeparator + formatNumber(calendarDate.getMonth()+1) + dateSeparator + calendarDate.getDate() + "')"; Dimitris Apr 27, 2011 at 02:26 PM
Thanks you very much! Wonderful picker and very nice and usefully and CSS! Thanks again.. moda kulvar May 18, 2011 at 09:56 AM
Very nice calendar. Question. How can I set a 2 digit year, like mm/dd/yy? Thanks! Kenny Feb 29, 2012 at 08:31 PM