Javascript Advanced Calendar Script (JACS) by Anthony Garrett
| Description | Praise | About Demo | Live Demo | How to... | Download | LGPL License | Versions |
|---|
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 |
|
||||||
| 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 |
|
||||||
| 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! ). |
||||||
| 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; 14th of this month, the range 28th of this - 4th 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:
|
|||||||
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;
<script type='text/JavaScript'
src='<<script location>>'></script>
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);"
or
onfocus="JACS.show(this,event);"
e.g.
<p onclick="JACS.show(this,event);"><<date>></p>
|
|||||||||||||||||||||||||||||||||||||||||
| Static calendar: |
JACS.show(<<element>>
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.<<,optional calendar ID>> <<,optional disabled days>>); |
|||||||||||||||||||||||||||||||||||||||||
| 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.
|
|||||||||||||||||||||||||||||||||||||||||
| 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;
|
|||||||||||||||||||||||||||||||||||||||||
| Combining the techniques: | A fully defined call to JACS.show, including all optional parameters
should send parameters in the following order;
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): |
|
|||||||||||||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
| NO WARRANTY | ||||||||||||||||||||||||
|
||||||||||||||||||||||||
| END OF TERMS AND CONDITIONS | ||||||||||||||||||||||||
Version History | ||
|---|---|---|
| Version | Date | Changes |
| 1.30 | 2008-05-05 |
|
| 1.21 | 2008-04-11 |
|
| 1.20 | 2008-04-10 |
|
| 1.11 | 2008-02-24 |
|
| 1.10 | 2008-01-14 |
|
| 1.00 | 2007-09-21 |
|
| 0.90 | 2007-04-04 |
|
|
||
).