Javascript Advanced Calendar Script (JACS) by Anthony Garrett

Description	Praise	About Demo	Live Demo	How to...	Download	LGPL License	Versions

Warning: Your browser has JavaScript disabled

JavaScript must be enabled for this calendar demonstration to work.

Description

This flexible pop-up calendar is written to work across browsers. It's fully commented and is easily customisable for language, colours and date format.

Features include flexible week numbering, multiple calendars on the page, static and dynamic calendars, date disabling and enabling, time selection and coder-defined function execution after calendar use.

The display shows a month at a time from a specified range of years. The optional input date determines the initial month displayed. The year can be in two or four digits while the month can be digits or a month name (easily be set up for any language). Any date or day of the week can be disabled (and re-enabled) using JavaScript on the calling page. This is ideal for combination with server-side technologies to produce a professional application.

Features

Easily customised for output date format, colours, language, and year range.
Accepts a date as input.
You choose the first day of the week for the display.
You can invoke any number of both static and dynamic calendars.
You can disable specified week days, dates and date ranges or invert that behaviour to enable only those you specify.
Week numbering can be displayed.
Allows dynamic control of calendar attributes.
Calendar position can be specified relative to the page or relative to the element the calendar is based on.
Optionally draggable.

Tested against:

Firefox 0.9.1+ (& Netscape 8.0.4+ & Flock 0.4.9)	Internet Explorer 6.0.28+
Opera 7.52+	Mozilla 1.7.1
Konqueror 4.0.1	Safari (for Windows)

Known issues

No current bugs

Working with Applets and Objects
This script is designed to be as robust as possible. However, in many implementations the canvas for objects and applets is not drawn by the browser. If the object/applet is refreshed it will overwrite anything displayed in the same location, including the calendar. There is no way to prevent this issue in JavaScript. If you wish to use both dynamic objects and the calendar on the same page then the only option is to position them carefully so that they cannot overlap.

Rights and Responsibilities

This script is published under the GNU Lesser General Public License. The License gives you wide-ranging rights to use the script. Please read it to ensure that your use of the script falls within your rights. if you have any questions or requests in relation to the license.
I am also happy to discuss licensing if you wish to use the script outside the terms of the GNU LGPL.
If you speak a language that isn't in this demonstration already, you could .
Of course, I want to know of any faults you might discover.
If you would like a new feature that might suit a wider audience, . I like a challenge so all ideas are welcome.
I spend a lot of time developing this just because I enjoy it. However, I have costs keeping it available and need to repay my family for all those hours hacking the code by taking them out for a meal once in a blue moon so, any and all donations are welcome.

Contact

I can't offer formal support for this but if you find a problem (or just want to tell me how much you like the script), please .

I will try to fix problems and deliver improvements quickly but this is a spare time thing for me (if it wasn't, it wouldn't be free! Smile. Fair's fair!

Credits

This script is based on my Simple Calendar Widget script which I wrote from scratch myself but I couldn't have done either without the superb "JavaScript The Definitive Guide" by David Flanagan (Pub. O'Reilly ISBN 0-596-00048-0) and Peter-Paul Koch's (PPK) brilliant Quirksmode site. I am very grateful to those users who have given their time to let me know their ideas and enhancements. When I use those, individuals are credited in the script.

Link back

If your use of the script allows, please give me credit and link back to my page. Your links will help the script to gain and keep a good ranking with search engines. Please add the following HTML to any indexed page on your web site:

     <A HREF='http://www.tarrget.info/calendar/jacs.htm'>
         Javascript Advanced Calendar Script (JACS)
    </A> by Anthony Garrett

Some selected feedback about JACS
See praise for SCW for comments about this calendar's predecessor.
"I've come across your JACS Calendar on the Internet, and would like to say it's one of the most solid calendars I've seen out there! The set of features, level of customization and cross-browser functionality are just outstanding!" - Sergey, 19 Jul 2007
"Your calendar script works perfectly and looks great!" - Rogier, 18 Jun 2007
"That’s a great calendar script. Well done mate!!" - Imran, 24 May 2007
.

About the Demo

Explanation

The examples demonstrate some ways of using the calendar. I don't recommend any one method, but I do suggest that you avoid using the roll-over as a few minutes trying it out on this page will prove how annoying it (and roll-overs in general) can be.

All of the options can be set for each calendar you display but there are also default values that you can easily configure.

This demonstration uses only one dynamic calendar and two static calendars but you can have as many as you like.

The strict date processing option:

If a day portion of a date is entered, it is validated and must be between 1 and 31 inclusive.

With the "strict" option turned on, the script generates an error for dates that are invalid in a specific month (e.g. 31 April). The calendar is then opened on the selected month but without a day selected.

With it turned off, no error is generated and the calendar will open the following month with a day selected (e.g. entering 31 April would select 1 May, i.e. 30 April + 1 day).

Normally you just decide which you will use and set it in the script but for this demo I have provided a button to let you try both options.

The on-calendar click to hide option:

The very earliest versions of SCW (this calendar's predecessor) did not allow a click on the calling page to close the calendar (the technique was to click on a dead space within the calendar).

Since adding that feature I have left the original method in place. From version 2.4 of SCW this became optional and this behaviour is turned off by default.

Calendar dragging:

You can allow the calendar to be dragged around the screen. As with strict date processing, there is a button for you to try out the calendar with dragging turned on or off.

Week Numbering:

Week numbers can be displayed. The script, as supplied, defines a year's first week using two factors; The day that starts the week and, the day of the week that has to be in the current year (I call the second factor, the Base day). In the script, the day that starts the week for numbering purposes is always the same as the first day displayed (this prevents two week numbers from appearing on one line).

This complies with ISO 8601 which states that Monday is the start of the week and Thursday is the Base day, consequently this is how the script is set initially. However, as this script already allows you to choose the week's start day (and Company rules may vary widely), you can choose the Base day.

There are so many different rules that can define the first week of the year that it is impossible to allow for all possibilities. The script calculates each week's number in a function (weekNumber) so, if you have different rules to apply, you can modify that function and so use the script's week number display.

As with Strict dates and Dragging, this demonstration allows you to turn the week display on and off. The Base day and Week start day can also be chosen. In normal use all of these would simply be set in the script.

Setting Dates:

By default setting a date by any of the methods available with the script will disable it (with all other dates enabled), however the calendar can be set to invert that behaviour and enable only those dates set.

This demonstration page shows date setting in action and allows you to try out the day-of-the-week enabling and disabling.

Several dates are set for each example. They are; 14^th of this month, the range 28^th of this - 4^th of next month and Good Friday and Easter Monday of each year (based on a JavaScript calculation of Easter Day that you might find useful, right-click here and save to download all the functions for this demonstration page).

You can use optional arguments to the entry routine (JACS.show) to make setting days of the week for an individual input field extra easy. See the description in the 'How to' section. Wednesday is set in one of the demonstration inputs (the one that starts with the value 'feb,98') using this method.

The "Today" selector (below the month display) is controlled (enabled or disabled) by the script when the current day is set by date (individually or in a range) and by day when you use the JACS.show arguments method.

Highlighting Dates:

Dates are highlighted in exactly the same way as the default method for setting individual dates and dates ranges described above.

This feature is not demonstrated on this site but it is documented in full in the script (as all other features are).

Language selection:

The language-dependent parts of the calendar are set when the calendar is made visible so you can dynamically choose the calendar language without refreshing the page.

The demo allows you to choose English and some languages that contributors have kindly sent to me. Right-click here and select your browser's "Save" option to downloaded them. If you would like to add your own language to the list then to me.

Note that on this demo page, the language setting applies only to the calendar, not the rest of the demo.

Browser Bug Warnings for this page:

Safari 3 Beta for Windows returns null values for properties of a computed style when an element is hidden using display='none' (either explicitly or by inheritance). Last tested on 3.0.2 (522.13.1).

This is an improvement in Safari's behaviour (it only started supporting getComputedStyle at all recently) however, they haven't got it right yet.

The practical result of this is that my demonstration page (which starts with the Live Demo in a DIV hidden with display='none') displays static calendars with the wrong cell borders initially. Selecting a date will correct the borders as the DIV is (obviously) no longer hidden, so Safari returns the correct computer style.

I have submitted this bug (probably one of many people to have done so) and now I can only wait for Safari to fix it.

I haven't fixed my demonstration pages by restructuring or using work-around techniques because I think it is better that you see this honestly here... Feel free to apply as much pressure as you think fit to get Apple to fix their bug.

Firefox 1.5 (I haven't checked older versions) loops when a text input box's onMouseOver event displays an alert that then overlays the input box. The problem was resolved in Firefox 1.6.

Consequently;	a)	please don't blame my code if you encounter this bug,
and	b)	there is even more reason not to code your page using roll-overs.

If you are fast with your fingers, you can stop the loop by cancelling all the alert boxes or by moving all the alert boxes away from the input box.

This bug also affects Flock 0.4.9.

When using DIVs with the float attribute and a BODY onClick event (as this page does) Opera versions prior to 9.02 (Build 8573) do not always trigger the event when they should.

How to...

How to add the calendar to your page

Download the script (jacs.js) from this page and place it somewhere in your site's directory/folder structure. This script needs to be defined for your page so add the following line;

where <<script location>> is the URI of the script, e.g. jacs.js if the script is in the same location as the page or /scripts/jacs.js if it is in a "scripts" sub-folder of the web site's root directory.

How to use the calendar once it is defined for your page

Dynamic calendar:

Simply choose an event to trigger the calendar (like an onclick or an onmouseover) and an element to work on (for the calendar to take its initial date from and write its output date to) then write it like this;

e.g.

onclick="JACS.show(document.getElementById('myElement'),event);"

onfocus="JACS.show(this,event);"

NOTE:

The "this" keyword does not work when the calendar is triggered using an anchor tag. The following syntax works;

<a href="#" onclick="JACS.show(<<element>>,event);return false;"> <<your text>> </a>

If you are using a text node then specify the text's parent node in the function call. The date should be the only text under that node;

e.g.

Static calendar:

JACS.show(<<element>>
<<,optional calendar ID>>
<<,optional disabled days>>);

A static calendar appears on screen when the page loads, cannot be dragged and remains on screen after it has been used to select a date. It returns the date into the value of a defined element (e.g. an INPUT element) but, of course, that can be hidden.

Calendar with selected days:

You can select days of the week by adding arguments to the call to JACS.show. These selected days can be the only ones enabled or the only ones disabled depending on the setting of the attribute valuesEnabled (see below). The values should be Sunday = 0 through to Saturday = 6. The parameters can be a series of single values or an array holding those values. A call to JACS.show with Friday and Monday selected could look something like this;

JACS.show(<<element>>,event,5,1);

or this;

var myArray = [5,1];
JACS.show(<<element>>,event,myArray);

Named calendar:

'jacs' is the default ID of the calendar but you can assign any ID you want e.g.

JACS.show(<<element>>,event,<<calendar ID>>);

You can call one name as many times as you like, but as it is one object, it can only appear on screen in one location at a time. If you want more than one calendar available on screen at a time then you must give different IDs.

Calendar with post-processing:

The following technique runs a function each time a dynamic calendar closes or a date is selected from a static calendar:

JACS.show(<<Dynamic or Static calendar argument list>>);
JACS.next(<<optional calendar ID,>><<function>><<,arguments>>);

Where <<function>> is a function defined on the calling page and <<arguments>> is the list of arguments being passed to that function.

The calendar ID defaults to 'jacs', if you are using a different calendar object (See calendar naming above), you must give its ID as the first argument.

NOTES:

These two calls are expected in this order (i.e. show before next) because JACS.next expects the calendar object to exist.

If JACS.make has not been called for the object and JACS.show is called after JACS.next then the calendar object may not exist (if the object has not been created earlier in the users path through the page) so a JavaScript error would be generated.

Every function that is triggered using JACS.next() acquires an attribute JACSid. This attribute holds the value of the calendar ID that JACS.next() has been called for. So, your function has access to all of the calendar instance's attributes including dateReturned (boolean TRUE if the calendar has been closed by selection of a date, otherwise FALSE).

E.G.	document.getElementById(<<function>>.JACSid). dateReturned

Disabling or enabling dates or date ranges:

Setting enabled or disabled date ranges for a calendar object is achieved by setting the dates array attribute of the calendar object (see more information below). By default the calendar object is only created when it is first needed for display so you should make sure that it is explicitly created using;

E.G.	JACS.make(<<calendar id>> <<,dynamic>>);

The dynamic argument is an optional boolean value and defaults to TRUE.

Combining the techniques:

A fully defined call to JACS.show, including all optional parameters should send parameters in the following order;

	I/O Element	Trigger Event	Calendar ID	Selected Days
Dynamic	0	1	2	2/3
Static	0		1	1/2
Static/ Dynamic	Both	Dynamic	Both	Both
Type	Object	Object	String	Number(s)
Required	Yes	See note below	No	No
Default	None	None	'jacs'	None

NOTE:

The Trigger Event is only relevant for dynamic calendars and must be omitted for static calendars.

e.g.

Dynamic	JACS.show(document.getElementById('myElement'), event,'jacs',0,1,2,3,4,5,6);
Static	JACS.show(document.getElementById('myElement2'), 'myCal2',0,6);

A single calendar instance must not be called with both Dynamic and Static parameters set because it is only one structure within the page so it cannot remain visible in one location while it is displayed in another.

Post-processing (described above) is not affected by the way the calendar is called.

Exposed calendar objects (functions):

JACS.make	Creates calendar objects; is called as part of JACS.show (if needed) but can also be called to create a calendar instance at any time.
JACS.show	Entry point for display of a calendar: Called in main page.
JACS.next	Sets up a function to run when a date is selected on a static calendar or a dynamic calendar closes.
JACS.cals	returns an array of all the calendar IDs that have been used on the page.
	NOTES:	1	"used" here means: Invoked with JACS.make or JACS.show. Calls without a defined calendar ID invoke the default ID, 'jacs'.
		2	Each calendar structure is added to the page when it is first used. So this array may not hold all dynamic calendar IDs that are defined on the page. If you want to be sure that the array does show all of them, explicitly invoke JACS.make(<<ID>>); for each ID on page load.

Download
Right click here and choose "Save Link/Target As..." to download the script.
Mailing List
The ONLY purpose of this list will be to inform users of the availability of new releases. Emails will contain a brief description of changes and an "Unsubscribe" link. I will not sell or otherwise disperse addresses to any outside individual, group or organisation. To Subscribe: with the subject "Subscribe:JACS" (no text required) from the address that you wish to add to the list. To Unsubscribe: with the subject "Unsubscribe:JACS".

GNU Lesser General Public License

TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

This License Agreement applies to any software library or other program which contains a notice placed by the copyright holder or other authorized party saying it may be distributed under the terms of this Lesser General Public License (also called "this License"). Each licensee is addressed as "you".

A "library" means a collection of software functions and/or data prepared so as to be conveniently linked with application programs (which use some of those functions and data) to form executables.

The "Library", below, refers to any such software library or work which has been distributed under these terms. A "work based on the Library" means either the Library or any derivative work under copyright law: that is to say, a work containing the Library or a portion of it, either verbatim or with modifications and/or translated straightforwardly into another language. (Hereinafter, translation is included without limitation in the term "modification".)

"Source code" for a work means the preferred form of the work for making modifications to it. For a library, complete source code means all the source code for all modules it contains, plus any associated interface definition files, plus the scripts used to control compilation and installation of the library.

Activities other than copying, distribution and modification are not covered by this License; they are outside its scope. The act of running a program using the Library is not restricted, and output from such a program is covered only if its contents constitute a work based on the Library (independent of the use of the Library in a tool for writing it). Whether that is true depends on what the Library does and what the program that uses the Library does.

You may copy and distribute verbatim copies of the Library's complete source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice and disclaimer of warranty; keep intact all the notices that refer to this License and to the absence of any warranty; and distribute a copy of this License along with the Library.

You may charge a fee for the physical act of transferring a copy, and you may at your option offer warranty protection in exchange for a fee.

You may modify your copy or copies of the Library or any portion of it, thus forming a work based on the Library, and copy and distribute such modifications or work under the terms of Section 1 above, provided that you also meet all of these conditions:

* a)	The modified work must itself be a software library.
* b)	You must cause the files modified to carry prominent notices stating that you changed the files and the date of any change.
* c)	You must cause the whole of the work to be licensed at no charge to all third parties under the terms of this License.
* d)	If a facility in the modified Library refers to a function or a table of data to be supplied by an application program that uses the facility, other than as an argument passed when the facility is invoked, then you must make a good faith effort to ensure that, in the event an application does not supply such function or table, the facility still operates, and performs whatever part of its purpose remains meaningful.

(For example, a function in a library to compute square roots has a purpose that is entirely well-defined independent of the application. Therefore, Subsection 2d requires that any application-supplied function or table used by this function must be optional: if the application does not supply it, the square root function must still compute square roots.)

These requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Library, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Library, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it.

Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Library.

In addition, mere aggregation of another work not based on the Library with the Library (or with a work based on the Library) on a volume of a storage or distribution medium does not bring the other work under the scope of this License.

You may opt to apply the terms of the ordinary GNU General Public License instead of this License to a given copy of the Library. To do this, you must alter all the notices that refer to this License, so that they refer to the ordinary GNU General Public License, version 2, instead of to this License. (If a newer version than version 2 of the ordinary GNU General Public License has appeared, then you can specify that version instead if you wish.) Do not make any other change in these notices.

Once this change is made in a given copy, it is irreversible for that copy, so the ordinary GNU General Public License applies to all subsequent copies and derivative works made from that copy.

This option is useful when you wish to copy part of the code of the Library into a program that is not a library.
You may copy and distribute the Library (or a portion or derivative of it, under Section 2) in object code or executable form under the terms of Sections 1 and 2 above provided that you accompany it with the complete corresponding machine-readable source code, which must be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange.

If distribution of object code is made by offering access to copy from a designated place, then offering equivalent access to copy the source code from the same place satisfies the requirement to distribute the source code, even though third parties are not compelled to copy the source along with the object code.
A program that contains no derivative of any portion of the Library, but is designed to work with the Library by being compiled or linked with it, is called a "work that uses the Library". Such a work, in isolation, is not a derivative work of the Library, and therefore falls outside the scope of this License.

However, linking a "work that uses the Library" with the Library creates an executable that is a derivative of the Library (because it contains portions of the Library), rather than a "work that uses the library". The executable is therefore covered by this License. Section 6 states terms for distribution of such executables.

When a "work that uses the Library" uses material from a header file that is part of the Library, the object code for the work may be a derivative work of the Library even though the source code is not. Whether this is true is especially significant if the work can be linked without the Library, or if the work is itself a library. The threshold for this to be true is not precisely defined by law.

If such an object file uses only numerical parameters, data structure layouts and accessors, and small macros and small inline functions (ten lines or less in length), then the use of the object file is unrestricted, regardless of whether it is legally a derivative work. (Executables containing this object code plus portions of the Library will still fall under Section 6.)

Otherwise, if the work is a derivative of the Library, you may distribute the object code for the work under the terms of Section 6. Any executables containing that work also fall under Section 6, whether or not they are linked directly with the Library itself.

As an exception to the Sections above, you may also combine or link a "work that uses the Library" with the Library to produce a work containing portions of the Library, and distribute that work under terms of your choice, provided that the terms permit modification of the work for the customer's own use and reverse engineering for debugging such modifications.

You must give prominent notice with each copy of the work that the Library is used in it and that the Library and its use are covered by this License. You must supply a copy of this License. If the work during execution displays copyright notices, you must include the copyright notice for the Library among them, as well as a reference directing the user to the copy of this License. Also, you must do one of these things:

* a)

Accompany the work with the complete corresponding machine-readable source code for the Library including whatever changes were used in the work (which must be distributed under Sections 1 and 2 above); and, if the work is an executable linked with the Library, with the complete machine-readable "work that uses the Library", as object code and/or source code, so that the user can modify the Library and then relink to produce a modified executable containing the modified Library. (It is understood that the user who changes the contents of definitions files in the Library will not necessarily be able to recompile the application to use the modified definitions.)

* b)

Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (1) uses at run time a copy of the library already present on the user's computer system, rather than copying library functions into the executable, and

Description

Some selected feedback about JACS

About the Demo

Live Demo

Examples

Options affecting the above examples

How to...

Download

Mailing List

GNU Lesser General Public License