A Simple JS Calendar::.

Update: Now you can restrict users to select future date so now user can select date only with in range specified by you. Please review the Advance Customization section for further details.

Features ::.

User Friendly ::.
This Calendar control is so self explanatory as you can see in the picture below. Selected Year & Month are always visible and clear color differences in different portions of the calendar to make it more eye catching and user friendly. Tooltips are also given to improve its usability.



Changeable Look & Feel ::.

You can easily change calendar's look & feel through CSS. All the classes are defined in calendar.css

Supports Multiple Instances ::.

One of the most useful feature of this calendar controls is that you can instantiate multiple instances at a time and every instance is completely independent from another instances.

Drag able ::.

You can drag any instance of the calendar throughout your screen and focused instance comes on top from all other instances.

Browser Compatible ::.

Supports all major browsers.

Internet Explorer(6, 7 & 8) Mozilla Firefox
Google Chrome Opera
Apple Safari Netscape Navigator

Basic Implementation ::.
This Calendar control is developed in such a way that anyone can see this control in action on their WebPages with minimum amount of efforts.

Below is the code which resides in the <HEAD> section of your webpage.


<link rel='stylesheet' href='calendar.css' title='calendar'>
<script language="javascript" src="calendar.js"></script>
				  		

Put below code in the <BODY> section of your webpage.


<input name='txtCalendar' id='idCalendar' class='inputBoxStyle' readonly>
<img src='cal.gif' align='absmiddle' onmouseover="fnInitCalendar(this, 'idCalendar')">
						

That's all, after putting just only 4 lines of code and a very decent Calendar control is active on your webpage.

Now let's take a closer look on the code we used so far.

  1. First line of the <HEAD> section is calling an external Style Sheet file named "calendar.css". This CSS file manages the Look & Feel of the Calendar control.

  2. Similarly the second line of the <HEAD> section is responsible to call an external JavaScript file named "calendar.js". This file is responsible for creating Calendar control.

  3. First line of the <BODY> section is a text box with a unique ID which catches the Date value selected on Calendar control by user.

  4. Finally the second line and most tricky part of the <BODY> section so far is an image object which initiates the Calendar control. This image object holds a function named "fnInitCalendar()" which takes two parameters. First parameter is "this" keyword which representing the current image object and the second and most important parameter is the ID of the text box which catches the Date value. We used 'idCalendar' in our example.

(all files are included in download section)


Date Format Customization ::. (Optional)
Different Databases accepts different formats of Date value. If you want to change the date format according to your requirements then this section belongs to you. With the function below you can customize date format as per your requirements. You can find all useful variables in this function, now you have to concatenate your required date format and pass this string to the sDateString variable.


			
<script language="javascript">

//***** Function formating the Date for inputbox *****

function fnSetDateFormat(oDateFormat)
{
  oDateFormat['FullYear'];		//Example = 2007
  oDateFormat['Year'];		//Example = 07
  oDateFormat['FullMonthName'];	//Example = January
  oDateFormat['MonthName'];	//Example = Jan
  oDateFormat['Month'];		//Example = 01
  oDateFormat['Date'];		//Example = 01
  oDateFormat['FullDay'];		//Example = Sunday
  oDateFormat['Day'];		//Example = Sun
  oDateFormat['Hours'];		//Example = 01
  oDateFormat['Minutes'];		//Example = 01
  oDateFormat['Seconds'];		//Example = 01

  var sDateString;

  //Example = 01/01/00  dd/mm/yy
  //sDateString = oDateFormat['Date']+"/"+oDateFormat['Month']+"/"+oDateFormat['Year'];

  //Example = 01/01/0000  dd/mm/yyyy
  //sDateString = oDateFormat['Date']+"/"+oDateFormat['Month']+"/"+oDateFormat['FullYear'];

  //Example = Jan-01-0000 Mmm/dd/yyyy
  sDateString = oDateFormat['MonthName']+"-"+oDateFormat['Date']+"-"+oDateFormat['FullYear'];

  return sDateString;
}

</script>
						


Advance Customization ::. (Optional)
There are number of other customizations from which you can make this calendar control to match your exact requirements. This is where the third and optional parameter of fnInitCalendar function comes in action. Below is the list of all name value pairs of third parameter.

Name Default Value Valid Value Example
year Current year Any 4 digits number year=2007
If you want to start your calendar control from specific year then you can define the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'year=2007').
(see Demo section for running example)
Name Default Value Valid Value Example
month Current month 1 to 12 month=12
(for Dec)
Lets suppose you want to start your calendar control from the month of December of current year then you can define the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'month=12'). Please note that only 1 to 12 digits are valid values. Where 1 represents January, 2 represents February and so on.
(see Demo section for running example)
Name Default Value Valid Value Example
drag true true or false drag=false
Currently this calendar control is drag able by default and in any case you don't want its dragging functionality then you can define the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'drag=false').
(see Demo section for running example)
Name Default Value Valid Value Example
top 5 any number top=10
This represents the vertical space between your mouse cursor and calendar control when you click on calendar image. You can assign positive or negative numbers to increase or decrease vertical space between cursor and your calendar control by specify the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'top=10').
(see Demo section for running example)
Name Default Value Valid Value Example
left 5 any number left=10
Similarly this represents the horizontal space between your mouse cursor and calendar control when you click on calendar image. You can assign positive or negative numbers to increase or decrease horizontal space between cursor and your calendar control by specify the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'left=10').
(see Demo section for running example)
Name Default Value Valid Value Example
close false true or false close=true
If you want to close this calendar control automatically after selecting date then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'close=true').
(see Demo section for running example)
Name Default Value Valid Value Example
instance - single instance=single
If your requirements says that only one calendar control shows at a time then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'instance=single'). It will close all other calendar instances before launch itself otherwise simply omit this parameter to turn on multiple instances functionality.
(see Demo section for running example)
Name Default Value Valid Value Example
dropdown - hide dropdown=hide
if you are using Internet Explorer and your calendar control hides below any Dropdown/Select box then specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'dropdown=hide'). It will hide all dropdowns temporarily and shows back after selecting date.
Name Default Value Valid Value Example
style - any css file name style=calendar_blue.css
If you want to use your own style sheet (.css file) to change the look and feel of caldenar control then specify the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'style=calendar_blue.css'). It will apply your css file to calendar control.
(see Demo section for running example)
Name Default Value Valid Value Example
expiry false true or false expiry=true
If you want to use this caldenar control for expiry dates then just specify the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'expiry=true'). It will disabled all the previous dates from calendar control.
(see Demo section for running example)
Name Default Value Valid Value Example
elapse 0 any whole number elapse=5
Elapse indicates that how much days elapse you want to set for expiry date. This works in conjunction with expiry date feature and very usefull if you to set expiry date from perticular date. Lets say you want to set expiry date 2 days from today then you simple set the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'expiry=true,elapse=2'). It will allow to select users to date 2 days from today's date. You can set negative values as well.
(see Demo section for running example)
Name Default Value Valid Value Example
restrict false true or false restrict=true
If you want to use this caldenar control for restrict users to select future dates then just specify the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'restrict=true'). It will disabled all the future dates from calendar control.
(see Demo section for running example)
Name Default Value Valid Value Example
limit 0 any whole number limit=7
Limit indicates that how much days limit you want to restrict users for selecting future date. This works in conjunction with restrict date feature and very usefull if you to set future date from perticular date. Lets say you want to set expiry date 7 days from today then you simple set the third parameter of fnInitCalendar function like this
fnInitCalendar(this, 'idCalendar', 'restrict=true,limit=7'). It will allow to select users to date 2 days from today's date. You can set negative values as well.
(see Demo section for running example)

Note that you can also use multiple name value pairs as third parameter of fnInitCalendar function by saparating them with comma like this fnInitCalendar(this, 'idCalendar', 'year=2007,month=12').

(Do not use space between name value pairs)


Demo ::.

fnInitCalendar(this, 'txtCalendarFirst', 'close=true')
fnInitCalendar(this, 'txtCalendarSecond', 'year=1900,month=1')
fnInitCalendar(this, 'txtCalendarThird', 'top=20,left=20,drag=false')
fnInitCalendar(this, 'txtCalendarFourth', 'style=calendar_blue.css,instance=single')
fnInitCalendar(this, 'txtCalendarFifth', 'style=calendar_green.css,instance=single')
fnInitCalendar(this, 'txtCalendarSixth', 'expiry=true,close=true')
fnInitCalendar(this, 'txtCalendarSeventh', 'restrict=true,close=true')
fnInitCalendar(this, 'txtCalendarEighth', 'expiry=true,elapse=-2,restrict=true,limit=2,close=true')

Download ::.

Download calendar.zip (13kb)

Feedback ::.

You are always welcome to post your feedback, report a bug or your valueable suggestions to help me out to improve this calendar control. Contact me at sarfraz.qasim@gmail.com

Site created by: Sarfraz Qasim