Javascript Calendar Widget 1.08 at Tools and how to’s

Javascript Calendar Widget 1.08

Due to popular request, here is another minor update to the calendar that contains flags to setup Sunday as the first day of the week, and options to disable Saturday and Sunday, and since many complain that the first post containing the setup is confusing, here are the full options available for the calendar. Remember, all of this flags are optional, but must be defined before your include the javascript file.

click here to download the calendar

DESCRIPTION
This script is meant to be used as a date picker or date display.

SETUP
All the flags below are optional. Define only what you need!. You can find some calendar examples at the bottom of the page.

iMonth
Option: defines the default month for the calendar
Values: 0-11 (January – December)
Default: PC date.

iYear
Option: defines the default year for the calendar
Values: Year, 4 digits format
Default: PC date.

iDay
Option: defines the default day for the calendar
Values: 1-31
Default: PC date.

itype
Option: See the description below regarding imaxDays,stDay,stMonth,stYear
Values: “strict” or “loose”
Default: “loose”

imaxDays
Option: days can be selected only on this range of days (specified by a number) starting with startDay,startMonth,startYear(see below). imaxDays only counts if itype is “strict”.
Values: >0

startDay
Option: enable date selection from this day forward counting imaxDays
Values: 1-31
Default: iDay.

startMonth
Option: enable date selection from this month forward counting imaxDays
Values: 0-11
Default: iMonth.

startYear
Option: enable date selection from this year forward counting imaxDays
Values: year, 4 digit format
Default: iYear.

saturdayOff
Option: Disables selection for saturdays (this is independent from imaxDays and itype)
Values: true/false
Default: false

sundayOff
Option: Disables selection for sundays (this is independent from imaxDays
and itype)
Values: true/false
Default: false

sundayFirst
Option: Displays the calendar with sunday as the first day of the week.
Values: true/false
Default: false

offX
Option: x distance from the mouse for the popup calendar
Values: >0
Default: 10.

offY
Option: y distance from the mouse for the popup calendar
Values: >0
Default: -10.

formatSplitter
Option: date separator
Values: string
Default: “-”.

monthFormat
Option: month format on the input. June will be displayed as “Jun” in “mmm” format or as “06″ in “mm” format.
Values: “mmm” or “mm”
Default: “mm”

yearFormat
Option: year format on the input. 2009 will be displayed as “2009″ in “yyyy” format or as “09″ in “yy” format.
Values: “yyyy” or “yy”
Default: “yyyy”

callNotice
Option: Call a function when a date is selected
Values: “function name”
Default: “fallsilent()”

click here to download the calendar

EXAMPLES
A simple example that formats the date output to yy/mmm/dd
An example that sets sunday as the first day of the week
An example that enables date selection for this year.
A simple example that disables date selection for weekend days.
A simple example that calls a custom function when a date is picked.

Enjoy!

P.S. Since the old versions of the calendar gathered more than 5.000 downloads, I’m curious how people use it. So, if you have used the calendar on a public page, please leave a comment with the link where you have it running so it can be used as examples for others.
Thanks:)

L.E I’m also open to sugesstions, features & bugs you might find.

Trackbacks & Pings

javascript calendar widget at Tools and how to’s on 21 Jun 2009 at 5:20 pm

[...] THIS VERSION IS NOW DEPRECATED. THE NEW VERSION CAN BE FOUND HERE [...]

Comments

Peter wrote:

Adi,

I am trying to format the out to mm/dd/yyy, how can I do this? I’ve tried to change the formatType. It work the first time, but when you click again to pop up the calendar, the year and dates are not display correctly. Please help. Thanks.

Posted 26 Jun 2009 at 9:54 am ¶
adisan wrote:

@Peter

I have modified the script so it supports the dateformats defined by formatType. It’s in a separate file because I didn’t had time to test it properly but it should work ok. Below is the link to the temp file.

http://codetale.com/cwcalendar/calendar_ftype.js

Posted 30 Jun 2009 at 12:58 pm ¶
Howard wrote:

So, why am I not able to scroll the year backwards to select dates in previous years… also once I scroll forward in the years, I am not able to move backward… am I missing something?

Posted 01 Jul 2009 at 3:27 am ¶
adisan wrote:

@ Howard

fixed, thanks for letting me know.

Posted 01 Jul 2009 at 2:33 pm ¶
vivek wrote:

Hello Adisan

Thanks for writing such a wonderful tool.
I wanted to change the date format to mm/dd/yyyy. for that I went and got the script, http://codetale.com/cwcalendar/calendar_ftype.js but still the format is showing as (yyyy-mm-dd), I also tried to change the formattype, but that did not help either. Please help.

Thanks
Vivek

Posted 09 Jul 2009 at 4:13 pm ¶
adisan wrote:

@ Vivek,

Thanks, updated the live version in the meantime, so you can download the zip. You might wanna look here for an example(this example is also found in the zip file):
http://codetale.com/cwcalendar/examples/dateformat.html

If you delete this line “var monthFormat = “mmm”;” and add this line “var formatType = monthFormat+formatSplitter+”dd”+formatSplitter+yearFormat;” at the end of the vars declaration it will format the calendar to your needs.

Posted 10 Jul 2009 at 5:22 pm ¶
rash wrote:

hi,

I like your calendar..

I am trying to use like this version in my php codes

but its not showing anything

can u help me pls?

Posted 22 Jul 2009 at 9:03 am ¶
peter wrote:

Thanks for your nice calender.

Is there a way to close the calender on mouseout? I mean when you move your mouse off the calender.

peter

Posted 22 Jul 2009 at 2:04 pm ¶
adisan wrote:

@rash

hi, I can’t help you unless you tell me/give me your code to see what are you trying to do:)

@peter
nope, but since it’s open source you can write a small plugin for that or ask a JavaScript coder to that for you.

Posted 29 Jul 2009 at 12:12 pm ¶
Venki wrote:

I am using IE8 browser and the calendar pop up positions are improper. Is it a IE bug or get position script code need any alteration?

Posted 04 Aug 2009 at 1:13 pm ¶
Venki wrote:

I figured it out.
Changed the following:
browser==”Windows Internet Explorer”
Thanks

Posted 05 Aug 2009 at 9:46 am ¶
adisan wrote:

tnx Venki,
Will include it in the next update.

Posted 06 Aug 2009 at 8:10 pm ¶
Rama wrote:

This is a wonderful calendar. Our customers liked it. They are asking me; if I can make it a inline calendar meaning, always show the calendar on the webpage. I tried, I could not. Can we do that with this calendar?

Posted 06 Aug 2009 at 8:30 pm ¶
adisan wrote:

@Rama,

Yes you can. The onlly problem is that you can’t have more than one calendar on the same page.

The first thing to do is to open the css style and do the folowing:
remove position:absolute for #calendar;
add a new line at the bottom #closeBtn{display:none}

In your html, where you want your calendar to appear, create something like this
<div id=”calendar”></div>
<input type=”hidden” id=”elem” name=”elem”/>
<script type=”text/javascript”>
fPopCalendar(’elem’);
</script>
Here is an example page: http://codetale.com/inline/

Posted 13 Aug 2009 at 8:31 am ¶
Clat Giles wrote:

V 1.08 When the itype is set to strict the and you pass it a value for imaxDays instead of the default, the script does not always block out dates beyond the imaxDays number of days from today. This is true today, if you pass the imaxDays as 4 or any day of the month in September before the 17th. I believe it is a bug in the getEnd() function.

Posted 17 Aug 2009 at 9:26 pm ¶
John G wrote:

Adi,

First let me say that this is by far the best, most flexible calendar script available. And I think I have tried most. Thank you for making it available. Great for using with PHP classes to enable users to define date formatting etc.

Just a suggestion – when a user clicks on the calendar textbox before the page loads an error is thrown. Just a couple of if statements fixes it.

After line 411 insert:
if (document.getElementById(el) {

Before end of this function add: }

Line 476:
Change to (document.getElementById(’calendar’)) ? document.getElementById(’calendar’).style.display=”block” : null;

Line 478:
Change to: if (folowMouse && (document.getElementById(’calendar’)) )

How this helps someone. (Not tested in IE or other browsers)

Posted 02 Sep 2009 at 1:29 am ¶
adisan wrote:

Thanks John,

Will take a look and fix it. For the moment I’m only gathering suggestions and bugs, since I’m moving everything to a new domain and will re-do the whole calendar to support multiple calendar instances, each with their own defined options.

Posted 03 Sep 2009 at 2:09 pm ¶
Leslie wrote:

I love your calendar widget, but most of the time I use the Tab button to go from field to field in a form and the calendar doesn’t popup, when the cursor moves into the designated field.

I tried changing the ‘onclick’ to ‘onfocus’ and that worked except the calendar popped up clear over where I had positioned my mouse cursor, instead of next to the field that had the focus.

Is there a way to get the calendar to position itself next to the field that has the focus?

Posted 16 Sep 2009 at 10:55 pm ¶
Animesh Mondal wrote:

Hi,
The calendar control is very well organized. The only hindrance I’m facing in selecting years of very long past(e.g. 1950). We need to do a lot of clicks on the year navigation control. So, is there any way around to get rid off this?

Thanks,
Animesh.

Posted 03 Dec 2009 at 9:28 am ¶
Faddoul wrote:

Hi Adisan,

Thanks for this calendar. I’m using it in a intranet. I have a problem since 1/1/2010 that I can go back by year. I mean the laquo symbol is not displayed. This behavior occurs only when using the chrome browser.
I thought I did something wrong, but when trying your samples, I get the same result.

Thanks,
Faddoul

Posted 21 Jan 2010 at 10:59 am ¶
Faddoul wrote:

Sorry I got it working after i downloaded the new version. I think your you need to update your samples with the latest version

Posted 21 Jan 2010 at 11:06 am ¶
Roy Low wrote:

Great widget!
Congrats on using simple code so that mere mortals can understand and modify.
An option to position it relative to the window – a % option would be great. To center it I used
‘document.getElementById(”calendar”).style.left = “40%”;’ in the callNotice function. A bit of a hack!

Posted 07 Feb 2010 at 2:48 am ¶
Bman wrote:

I have also run into the problem with imaxDays not working, we are trying to feed a date into the control and have users pick a day within a week of that start date and we cannot make this work at all. Other than this issue the calendar rocks, we do not want to pull it out of the rest of our site for this one little bug.

Posted 16 Feb 2010 at 6:01 pm ¶
adisan wrote:

Hi Bman,

Can you show me an example where you have this problem?

Posted 19 Feb 2010 at 1:51 pm ¶
Bman wrote:

Here is the setup script, it doesn’t throw an error you just do not get the correct days available to be chosen in the control. The idea is to input a start date for a single week and allow the user to chose any day within one week of the start date.

var formatSplitter = “-”;
var monthFormat = “mm”;
var yearFormat = “yyyy”;
var itype = “strict”;
var startDay =07;
var startMonth = 01;
var startYear = 2007;
var iDay =07;
var iMonth = 01;
var iYear = 2007;
var imaxDays = 7;

Posted 03 Mar 2010 at 7:30 pm ¶
adisan wrote:

Hi Bman,

Indeed there is a bug on my end. I will let you know as soon as I fix it. Thanks for the feedback.

Adrian

Posted 05 Mar 2010 at 2:07 pm ¶
adisan wrote:

@Bman,

Fixed and re-uploaded the zip file. It should work well now.

Adrian

Posted 05 Mar 2010 at 2:23 pm ¶
Bman wrote:

Hey Adisan, you rock, works like a charm now, thank you very much!

Posted 15 Mar 2010 at 3:32 am ¶
Ayo wrote:

how do you solve the multiple entering of this widget on a single webpage.

for example if you a dateOfBirth input box and and inputbox called date, the widget only works for the first input box not the second input box.

thank,
Ayo.

Posted 17 Mar 2010 at 12:48 pm ¶
Ayo wrote:

it working okay it was my mistake the html form seem too long therefore it display at the bottom of the unseen section of the page.

thanks alots if i make millions of dollars i will surely remember you.

Posted 17 Mar 2010 at 1:08 pm ¶
Ayo wrote:

My only problem is the date formatting how can i change the format to dd/mm/yyyy UK style instead of the default american style. pls provide a sample i have done everything within the formatting section of the script i embedded within my htlm tag.

thanks,

Ayo.

Posted 17 Mar 2010 at 1:43 pm ¶
Sam wrote:

Great stuff, but i seem to be having a little problem. I have 2 date fields on my form next to each other, the widget seems to populate just one of the fields, when i try to populate the 2nd one it changes the content of the 1st.

I’m i missing something?

Sam

Posted 02 Apr 2010 at 11:24 pm ¶
adisan wrote:

You need to specify for each of the instance the id you want to be filled back.

Eg, you have 2 inputs with the ids id1 and id2, id1 should have onclick=’fPopCalendar(”id1″)’ the second one should have onclick=’fPopCalendar(”id2″)’.

Posted 03 Apr 2010 at 8:41 am ¶
Rantu wrote:

Hey Adisan

Great calendar!

I wanted to include multiple it in multiple text boxes in a single page. But, it requires the id to be ‘date’; so not possible.

Probably, you can add this feature in next release.

Anyways, thanks for sharing.

Posted 03 Apr 2010 at 5:05 pm ¶
Sam wrote:

Brilliant!!!!

Posted 04 Apr 2010 at 2:18 am ¶
adisan wrote:

Hi Rantu,

Now it doesn’t. You can specify the id’s yourself. For example you can put the first input to have the id=’date1′ the second ‘date2′ etc. You append the calendar to the input by specifying the id you want the calendar to fill back. For the first input you add onclick=’fPopCalendar(”date2″)’, the second fPopCalendar(’date2′) etc…

Hope I explained it ok:)

Posted 04 Apr 2010 at 11:25 am ¶
vol7ron wrote:

Thanks for the post.

I’ve made a lot of changes to your script, including fixing some bugs and adding some new features.

I see a lot of room for performance optimization, but I’ve mainly kept the code as-is.

If you want, I can send it when I’ve finished working on this one feature.

vol7ron

Posted 17 Jun 2010 at 7:13 pm ¶
Bill wrote:

Hi. I don’t see license information. I’d like to include this calendar (fully credited to you, of course) in an open source project I’m working on. The project is under GNUv3 open source license. Is this permissible? E-mail me for full details if required.

Posted 30 Jun 2010 at 12:23 pm ¶
adisan wrote:

@vol7ron

Cool, I would like to see what you came up with. And yes, I should optimize my script but didn’t had time for it. The core script was made in half a day, about 4 years ago and it hasn’t been changed since then. I will send you an empty mail with the subject codetale, so if you want, you could reply me to that email with the script.
Thanks

Posted 30 Jun 2010 at 5:41 pm ¶
adisan wrote:

Hi Bill,

You can use, alter do whatever you want with the script. I haven’t put any licensing info since I really don’t care on how others use it. You don’t have to credit me for the script neither.

Posted 30 Jun 2010 at 5:44 pm ¶
Bill wrote:

Thanks, adisan.

Posted 30 Jun 2010 at 10:43 pm ¶
Daniel wrote:

hi,

there would be a way to put a fixed schedule on the page, instead of being activated by the click of a button?

thank you. Good job!

Posted 19 Aug 2010 at 2:20 pm ¶
cd wrote:

I’m having a problem using “Reset” with the input box. I have to refresh the screen to get the calendar to pop up again. Is there a way to make this reset? Thanks.

Posted 02 Sep 2010 at 3:17 pm ¶
Christina wrote:

I have a form with many date fields. I don’t have a problem with those on the top of the page, but for those that I need to scroll to get to, the calendar pops up off of the screen so that I have to continue scrolling down to find it WAY past the end of the form. Is there some way to fix this? I’m using IE 8.

Posted 20 Sep 2010 at 8:46 pm ¶
Christina wrote:

fixed…changed if(browser==”Windows Internet Explorer”) instead of Microsoft as mentioned above. Thanks! Love the calendar

Posted 20 Sep 2010 at 10:01 pm ¶
pepe wrote:

Hi, great job:)

I would like to ask you how can I put the day of today in the input ,BEFORE I click on the calendar. So I want by default that the day in the text is today and I will only click in the calendar when I want to change it.

Thanks

Posted 05 Oct 2010 at 2:21 pm ¶
adisan wrote:

@pepe,

The calendar will have the input’s date if you put one in.

@Christina
10x

Posted 20 Oct 2010 at 8:40 am ¶
Dennis wrote:

I cannot get iMonth to work correctly. I set up a start date (itype=”strict”) in the future which occasionally means starting in the next month. However, when I set iMonth=startMonth, the month displayed is still the current month but entirely disabled. How do I get the startMonth displayed without the user needing to figure out that (s)he has to advance the month first? Thanks.

Posted 24 Oct 2010 at 5:39 pm ¶
pit wrote:

Hello
Good Calendar

I have to date fields, one and two.
I would like after selecting date in calendar one to call my function.
Using callNotice it works.
But I would like to call my function only when selecting date in cal. one.
Now it calls also when selecting date in cal. two.

Is it possible to call callNotice only when selecting date in cal. one?

Thank you!

Posted 05 Nov 2010 at 3:02 pm ¶
Rbishop wrote:

Great control! One question — I have multiple inputs on a page with your calendar control on each. Works perfectly. However, if a date is already in the input field, I would like to have the calendar popup with that date selected. It looks as though you must set the “default” date prior to initialization (i.e., in the head section), which will not work, since I don’t know the actual date I need the calendar to show until the user actually clicks my calendar image.

Thanks.

Posted 09 Nov 2010 at 3:26 am ¶
Mao wrote:

Hi.
Thanks for this widget, it’s really awesome.
I have used it a couple of time.
Now I don´t know why the calendar is showing some grey dots, like bullets, in every cell. Any ideas ?
Thanks

Posted 14 Jan 2011 at 5:23 am ¶
adisan wrote:

@Mao,
play with the css, the answer is there:)

Posted 17 Jan 2011 at 6:20 pm ¶
msGodscrasher wrote:

Hi please could you tell me how i could use the calendar within adf jdeveloper please?

Posted 04 Feb 2011 at 6:38 pm ¶
deepa wrote:

Really nice & helpful widget. I used it and works great!

Posted 08 Feb 2011 at 7:48 pm ¶
NJ DUI Attorney wrote:

@msGodscrasher I don’t think that it’s possible .. but post it here if you manage to make it work ..

Nice tool by the way ..

Posted 22 Feb 2011 at 6:20 pm ¶
Michael wrote:

I am having an issue where I have more than one calendar pop-up on a page. I click the first pop-up, it works great..say I select 01/01/2008, the problem is when I click on the 2nd pop-up, it picks up where the first pop-up left off starting me at 2008. This gets confusing to the end users as they expect to always pop-up with current month/year. I do see a reset option for multiple pop-ups on one page.

Posted 25 Feb 2011 at 3:15 pm ¶
Bruce wrote:

Thank you for this calendar, it is perfect. When my page is ready I will post a link here. One (stupid?) question. If the user is in a different time zone to my server who’s clock does it look at to get the date?Their’s or mine?

Posted 10 Apr 2011 at 10:27 am ¶
Steve-a-reno wrote:

This is an update to the getMouseXY function. It makes up for the changes in the IE browser and give a true position for the cursor.

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{
if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

if (e)
{
if (e.pageX || e.pageY)
{ // this doesn’t work on IE6!! (works on FF,Moz,Opera7)
tempX = e.pageX;
tempY = e.pageY;
algor = ‘[e.pageX]‘;
if (e.clientX || e.clientY) algor += ‘ [e.clientX] ‘
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
// Note: I am adding together both the “body” and “documentElement” scroll positions
// this lets me cover for the quirks that happen based on the “doctype” of the html page.
// (example: IE6 in compatibility mode or strict)
// Based on the different ways that IE,FF,Moz,Opera use these ScrollValues for body and documentElement
// it looks like they will fill EITHER ONE SCROLL VALUE OR THE OTHER, NOT BOTH
// (from info at http://www.quirksmode.org/js/doctypes.html)
tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
algor = ‘[e.clientX]‘;
if (e.pageX || e.pageY) algor += ‘ [e.pageX] ‘
}
}
}

Posted 11 Apr 2011 at 5:19 pm ¶
adisan wrote:

@Bruce,

It takes the user’s computer time not the server time.

Posted 03 Jul 2011 at 3:26 pm ¶
JZam wrote:

Regarding to comment #1 (cause it took me some time to make it work). a) I downloaded http://codetale.com/cwcalendar/calendar_ftype.js. b) Putted on WebContent folder. c) renamed to “calendar.js” (in order to avoid changes in a bunch of code). d) I create a new variable: var formatType = “mm/dd/yyyy” in my jsp header section. That worked just like I need it. Thanks a Lot Adisan.

Posted 14 Oct 2011 at 2:40 am ¶
Bruce wrote:

I have used the calendar on a form so that the user can only choose a date up to eight weeks in the future and the date is entered in a database-ready format. The colours are exactly matched to my website and it is positioned so that the user can see part of it even if the input field is at the top or bottom edge of their screen. It’s here http://www.maps.thehunthouse.com/eBook_Gift_Shop.htm Many thanks again.

Posted 01 Feb 2012 at 5:13 pm ¶

Tools and how to’s