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 ¶

Tools and how to’s