javascript calendar widget
This is a calendar to be used as a date picker, or date display. Can be used in as many instances as you want, with some handy options.
OVERVIEW:
There are 2 modes for the calendar: Strict and Loose. In strict mode, the calendar has the date selection limited, to a certain period defined in days(see flags & options for details). In loose mode, the calendar has the date selection unlimited.
You can choose the returned date format, as well as how the date should be filled back:full date in one input, or multiple inputs(see flags&options for details).
The look of the calendar is fully CSS customizable. You’ll find the css file in the .zip along with the js file (you’ll have to include both in your template) .
I’ve tried to make the calendar to serve as a stand alone script, but it can be easily be integrated in other projects, and you can even take the calendar’s development further if you need for a more specific job for it.
DEMO
FLAGS & OPTIONS
NOTE: all flags&options are optional. They all degrade to default values as specified bellow.
iMonth
Values: 0-11
if not set it will default to user’s PC month date.
iYear
Values: >2000
if not set it will default to the user’s PC year date.
iDay
Values: 0-31
if not set it will default to the user’s PC day date.
itype
Values: “strict” or “loose”
if not set it will default to “loose”.
imaxDays
values: >0
Only counts if itype=”strict”. If set, it will enable the date selection for a range specified in days starting from iDay/iMonth/iYear. For example it will enable selection from today 300 days forward.
addZero
values: true or false
Convert single character days & months to 2 characters by adding a 0 in front (Eg. 9 becomes 09)
folowMouse
values: true or false
Display the calendar at the mouse position + offX/offY (see bellow) . Defaults to “true”. Also in the css file the #calendar should have the position attribute “position: absolute”.
offX
values: any integer number.
If folowMouse=true , set the calendar position at x pixels from the mouse position. Defaults to 10.
offY
values: any integer number.
If folowMouse=true , set the calendar position at y pixels from the mouse position. Defaults to -10.
formatInputs (see functions for more details)
values: 1-3
formatInputs=1
The date returned from the calendar will be filled in one input.
formatInputs=2
The date returned from the calendar will be split in 2 inputs. Input1 will contain the day. Input2 will contain the month and year.
formatInputs=3
The date returned from the calendar will be split in 3 inputs. Input1 will contain the day, Input2 the month and Input3 the year.
formatSplitter
values: any valid character.
How the returned date should be split. Eg. formatSplitter=”-” will return the date string as day-month-year.
Defaults to “/”.
monthFormat
values: “mm” or “mmm”.
“mm” returns the month in digit format(Eg. ‘01′ for January), “mmm” will return the month in literal format(Eg. ‘Jan’ for January). Defaults to “mmm”.
yearFormat
values: “yy”, “yyyy”.
“yy” returns the year in 2 digit format(Eg. ‘07′ for 2007) , “yyyy” will return the year in 4 digit format (Eg. ‘2007′ for 2007). Defaults to “yy”.
elToAppend
values: the id of the element you want the calendar attached to.
Defaults to document’s body. Only counts if folowMouse=false.
callNotice
values: the name of the function to call.
If you wish to add a callback to another function after a date get’s selected use this option. Accepts any function but you can’t use parameters.
Eg.
to call the ‘alive’ function below, just add to the flags area callNotice = “imalive()”. It wil be called each time a date get’s selected.
function alive(){alert(’I\’m alive!’)}
FUNCTIONS:
fPopCalendar(param1, param2, param3)
param1, param2, param3: are the input ID’s to be filled with the returned date from the calendar.
param1 is mandatory for all formatInputs options.
if formatInputs=2, the param2 is mandatory, and it will represent the second input.
if formatInputs=3, param2¶m3 are mandatory, and will represent the second and third input.
SETTINGS/INSTALL
1. Download the zip file and put the js and css files in your working directory.
2. Include the files in the template you wish to use the calendar. If you use the default settings they should look similar to this.
Eg.
<script type=”text/javascript” src=”calendar.js”></script>
<style type=”text/css” media=”all”>
@import url(cwcalendar.css);
</style>
3. If you wish to customize the calendar add the flags&options before you include the JS:
Eg.
<script type=”text/javascript”>
itype = “strict”;
imaxDays = 650;
</script>
<script type=”text/javascript” src=”calendar.js”></script>
4. Enjoy.
Javascript Calendar Widget v1.07 at Tools and how to’s on 19 Nov 2007 at 2:14 pm
[...] is just un update for the original calendar script. It includes the american date format(year-month-day). It’s also the default setting now so [...]