Simple Calendar Widget by Anthony Garrett

Hi,

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.

Any and all contributions are welcome.
Go on - make someone happy!


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

Description

This flexible, simple pop-up calendar is written to work across browsers. It's fully commented and customisable for language, colours and date format. The pop-up displays 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 abbreviation that can 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 control disabled week days, dates and date ranges.
  • Week numbering can be displayed.
  • Allows dynamic language selection.
  • 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 3 (Beta for Windows)
The script isn't... This is not a diary application (i.e. you can't book events etc. in it).

Please see my new calendar JACS for advanced features including: Multiple calendar instances on one page, Static calendars and greater flexibility in calendar positioning.
Rights 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.
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 I wrote this from scratch myself but I couldn't have done it without the superb "JavaScript The Definitive Guide" [The Rhino Book] by David Flanagan (Pub. O'Reilly ISBN 0-596-00048-0). I also recognise a contribution from my experience with PopCalendar 4.1 by Liming (Victor) Weng. 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/scw.htm">
         Simple Calendar Widget
    </A> by Anthony Garrett

Ideas If you would like a new feature that might suit a wider audience, . I like a challenge so all ideas are welcome.
Test limitations I test this script against the most recent versions of every mainstream browser I can find. That means (in alphabetical order) Firefox, Internet Explorer, Konqueror, Opera and Safari (for Windows). I don't have the resources to maintain test beds for old browser versions nor do I have an Apple Mac. If you find a problem in the Mac version of Safari to me.
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.

Working with .NET
Most complex JavaScripts can have problems in .NET applications when SmartNavigation is turned on. If you encounter odd problems with the calendar on PostBack, turn SmartNavigation off. This should fix your issue. If it does but you need SmartNavigation turned on for your application, you should experiment with the position of the calendar object in relation to Forms on the page. Reports suggest that the script must be outside any forms.

Some selected feedback from current users...
"I've just integrated your code to my web site
I thank you for this valuable piece of code..." - France, 17 Mar 2006
"I have tried out your calendar widget, and find it
clean written, easy to use, and to integrate." - Deutschland, 27 Feb 2006
"I love your calendar widget.
Super easy to integrate and very flexible." - USA, 10 Feb 2006
"Just wanted to say thanks for a job well done.
...Thanks again for a great little widget!" - USA, 17 Dec 2005
"Great job!" - Australia, 28 Nov 2005
These comments are all taken from emails I have received.
The only reason they are anonymous is that I haven't asked the senders if I could use their names.
 

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 can be (NOTE: This is a general comment, not related to the Firefox 1.5 bug).
 
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 the calendar did not allow a click on the calling page to close the calendar (the technique was to click on a dead space in the calendar).

Since adding that feature I have left the original method in place. From version 2.4 this became optional. The default behaviour now does not allow a calendar click to close it.
 
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.

For obvious reasons, clicking the drag handle does not hide the calendar when you have both dragging and the on-calendar click to hide features turned on.
 
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).

The script is initially set to comply with ISO 8601 which states that Monday is the start of the week and Thursday is the Base day. However, as this script already allows you to choose the week's start day (and Company rules may vary widely), you can also 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 (scwWeekNumber) 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.
 
Disabling Dates:
This demonstration page shows date disabling in action and allows you to try out the day-of-the-week enabling and disabling.

Several dates are disabled 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).

Since Version 2.7 you have been able to use optional arguments to the entry routine (scwShow) to make disabling days of the week for an individual input field extra easy. See the description in the 'How to' section. Wednesday is disabled in one of the demonstration inputs (the one that starts with the value 'feb,98') using this method.

The disabling of the "Today" selector (below the month display) is controlled by the script when the current day is disabled by date (individually or in a range) and by day when you use the scwShow arguments method. However, if you use javascript on your calling page to control disabling, you have control of whether the selector is active or not. To see this in action; disable today's day of the week in the check boxes below then bring up a calendar, you will see that the selector is inactive.

 
Language selection:
Since Version 3.3, the language-dependent parts of the calendar are set when the calendar is made visible (previous versions set them when the page loaded). So, you can dynamically choose the calendar language without being forced to refresh the page, this benefits users with multilingual pages.

The demo allows you to choose English and a few 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:
  • 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 has been resolved in Firefox release 2.0.

    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.

    You can stop the loop by cancelling all the alert boxes or by moving all the alert boxes away from the input box but it's a lot easier to kill the browser session.

    I have been able to reproduce this in Flock 0.4.9, but not in Netscape 8.0.4.

  • 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.

    This bug can be demonstrated by bringing up the calendar then clicking the white area on the right side of the main page. The calendar should disappear but it doesn't (there are some circumstances where it will but that's for a full bug report, not here).
 

Live Demo

Choose a calendar language:
 
Click Here
Wednesday is disabled for this input



Click the text date or the link to open the calendar:
   



Firefox users please click here
BEFORE trying this rollover example 		<-- Click There
A function runs after the
calendar closes on this input.

Enable and disable days of the week as you choose here
(checked means disabled):
Sun Mon Tue Wed Thu Fri Sat
Choose your preferred start day for the week here:
Sun Mon Tue Wed Thu Fri Sat
Choose your preferred Base day for the week here
(see Week numbering for an explanation):
Sun Mon Tue Wed Thu Fri Sat
If you find a problem here it may be in this demonstration page, not the script. Either way I would like to hear about it so please , Thanks.
 

How to...

How to add the calendar to your page Download the script (scw.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 immediately after the BODY tag;

<script type='text/JavaScript' src='<<script location>>'></script>

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

Your root directory of the web site should also contain an empty file called "scwblank.html". Click here for a full explanation.
How to use the calendar once it is defined for your page 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;

<<event>>= "scwShow (<<element>>,event);"
e.g.
onclick= "scwShow (scwID('ele'), event);"
or
onmouseover= "scwShow(this,event);"
NOTE: If you wish to use the calendar with an Anchor tag, do not use the syntax: href="javascript:scwShow(...)" Instead you should use the following;
<a href="#"
       onclick="scwShow(<<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.
<p onclick="scwShow(this,event);"><<date>></p>
You can also disable days of the week by adding arguments to the call to scwShow. The values should be Sunday = 0 through to Saturday = 6. A call to scwShow with Friday and Monday disabled would look something like this;

scwShow (<<element>>,event,5,1);


Finally, you can use the following technique to run a function when the calendar closes:

scwNextAction =
   <<function>>.runsAfterSCW(this,<<arguments>>);
scwShow(<<element>>,event <<,optional arguments above>>);

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


Here's an extremely trivial but fully functioning example;

<html>
<head><title>Basic Example</title></head>
<body>
<script type='text/JavaScript' src='scw.js'></script>
<p onclick='scwShow(this,event);'></p>
<input onclick='scwShow(this,event);' value='' />
</body>
</html>
 

Download
Right click here and choose "Save Link/Target As..." to download the script.
Mailing List: Given the number of people who now use this calendar I have decided to offer a 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:SCW" (no text required) from the address that you wish to add to the list.
To Unsubscribe: with the subject "Unsubscribe:SCW".
This calendar has been submitted to the following sites for free download,
please take a moment to rate it.
Big Webmaster Directory (Originally listed 2005-10-18)

Rate this script at
Bigwebmaster.com

JS Made Easy.Com (Originally listed 2005-12-12)

Rate this script at
JS Made Easy.Com

HotScripts.com (Originally listed 2006-02-19)

Rate this script at
HotScripts.Com

Web Scripts Directory (Originally listed 2006-02-19)

Rate this script at
Web Scripts Directory

AllTheScripts (Originally listed 2006-07-03)

Rate this script at
AllTheScripts

ScriptSearch (Originally listed 2006-07-03)

Rate this script at
ScriptSearch

 

Version History

Version Date Changes
3.90 2008-05-05
  • Added an optional "Clear" button for use when handling a read-only text input element. Thanks to Sanjay Gangwal for his suggestion.
3.80 2008-04-29
  • Added optional auto-positioning of the calendar when its normal position would go off the visible area. Thanks to Chandramouli Iyer for this suggestion.
3.73 2008-04-11
  • Corrected the input month name parsing so that it set the calendar to the right month when long month names used. Thanks to Ben Diamand for this bug report.
3.72 2008-02-24
  • Trapped calls to script with only a NAME attribute is set for the target element when the script really requires an ID attribute. This is the most frequent mistake reported to me.
3.71 2008-01-14
  • Restored the ability to use an element as the second parameter when opening a calendar while retaining the option of passing an event. Thanks to Thierry Blind and Sergey Snovsky for the feedback.
3.70 2007-09-21
  • Updated the event trapping to make it less intrusive on the page body. NOTE: This requires that a calendar's second parameter should be the calling event (not the calling object as in previous versions). Thanks to Steve Davis for the bug report that led to this change.
  • Fixed a bug that caused undelimited dates to be handled incorrectly. They are now parsed against the full date output format then checked for validity. Thanks to Dan Wood for raising this bug.
  • Replaced the date input sequence user configuration setting with parsing the sequence from the full format. New users are often confused by the sequence and in practice (to allow the calendar's date output to be used for input) the sequence must always match the full format element order. NOTE: If you are upgrading then any of your code that refers to scwDateInputSequence will no longer have any effect.
  • Extended IFRAME backing to all calendar objects in order to improve calendar display over some embedded applets and objects. Thanks to Stanko Kupcevic for his feedback on this. NOTE: It is not possible to protect any JavaScript object displayed over an embedded DYNAMIC (and, therefore refreshed) object because browsers usually do not directly control the screen handling within the object. The best advice therefore remains to design pages in such a way that the calendar does not overlap embedded objects.
3.60 2007-07-31
  • Fixed javascript error that occurred when the target element had no value attribute. The error had no impact on the behaviour of the script. Thanks to John Phelps for reporting this bug.
3.59 2007-06-13
  • Added Verdana to font list of calendar's CSS. Resolves rendering bug in Safari Beta 3 for Windows.
3.58 2007-04-04
  • Resolved an error caused when the date range does not include the current year. Thanks to Steve Davis for letting me know.
  • Fixed "Today" selector display which was incorrectly visible when year range ended last year. (Also the result of investigations based on Steve Davis' feedback).
3.57 2007-03-03
  • Added option to give a border to the cell containing today's date. Thanks to Kanchana for this suggestion.
3.56 2006-12-13
  • Fixed accidental disabling of the last day of the last month in the calendar.
  • Added options to disable and hide days that are out of the currently displayed month. Thanks to Ruslan Androsyuk for this feature request.
  • Applied the IFRAME backing to IE 7 in order to improve rendering when the calendar overlays graphically dynamic objects. Thanks to Shaun Plumb for reporting this problem.
  • Allowed date input/output to be a text node. Thanks to John Navratil for this suggestion (and others).
  • Applied a work-around for Opera's buggy selectIndex setting.
3.55 2006-10-28
  • Mike Cerveny fixed the bug where disabling a range of dates, the first square of each month was disabled.
3.54 2006-10-13
  • Fixed a problem where the calendar was positioned incorrectly when displayed inside a scrolling DIV. Thanks to Teddy C for reporting this bug.
3.53 2006-10-12
  • Resolved a problem where the day that Daylight saving starts may cause a date to be repeated in the display. Thanks to Rodrigo Novoa for discovering and reporting this bug.
3.52 2006-10-10
  • Documented the need to create "scwblank.html" file. Click here for a full explanation. Also changed URL of the file to look in web root.
3.51 2006-09-09
  • Fixed the Safari bug where month and year selection closed the calendar. Thanks again to Jason Novotny for reporting this problem. Deep gratitude to Sam Bayne and the guys at North Seattle Community College for the help with access to Safari.
  • Fixed a small error in the size of the IFRAME (for IE6- only) when the calendar runs for the first time. Thanks to Thierry Blind for reporting that.
3.5 2006-04-04
  • Allowed easy extraction of CSS (making it straight forward to implement themes) while simplifying the script. Thanks to Jason Novotny for this suggestion.
    NOTE: This version replaces the colour-control variables with CSS classes. Please be aware of this change if you upgrade the script for a page that sets these variables.
3.4 2006-03-27
  • Added optional disabling of the error alerts. Thanks to Peter Foti for his suggestion, reinforced by Gopi Reddy.
3.31 2006-03-20
  • Enhanced the dynamic language setting for multilingual pages.
3.3 2006-03-10
  • Modified to work with IE7.
  • Added dynamic language setting for multilingual pages. Thanks to Rafael Pirolla for the idea.
3.23 2006-03-08
  • Fixed bug that caused JS Error in IE with Strict DTD and advanced CSS. Thanks to Thierry Blind for the feedback.
3.22 2006-03-06
  • Fixed bug that prevented a form reset in Firefox. Thanks to Stephan Jager for the feedback.
3.21 2006-02-27
  • Fixed day disabling that was broken by week numbering.
3.2 2006-02-25
  • Added optional week numbering.
3.11 2006-02-20
  • Prevent "after" function set for one element from trigerring for another.
3.1 2006-02-15
  • Added ability to run a function on closing the calendar. The function can take parameters and give a return. Thanks to Lou LaRocca for the feedback.
3.0 2006-02-10
  • Allowed more than one delimiter to separate date elements. Thanks to Rick Haggart for reporting the problem with the format "MMM DD, YYYY".
2.9 2006-02-01
  • Enhanced disabled day display to differentiate day types (In/Out of month, weekend days etc) as for enabled days.
  • Re-organised functions and variables to expose only necessary code.
2.8 2006-01-31
  • Added calendar dragging. Thanks to Sunil Paliwal for the feature request.
2.7 2006-01-18
  • Simplified date formatting - With thanks to Wa aX for sending me enhancements that form the basis of this change.
  • Added optional day disabling parameters. Thanks (again) to Mark Chapa for sharing his requirement.
2.62 2006-01-14
  • Work around Internet Explorer's bug where an IFRAME's default src attribute is not secure causing the 'Mixed content' alert when using SSL. Thanks to Mark Chapa for reporting this problem.
2.61 2006-01-11
  • Fixed a bug where two-digit year entry gave an 'invalid date' message when the year parsed to a single digit integer (i.e. less than 10).
2.6 2006-01-04
  • Fixed bug where "disabled" today's date could still be used.
  • Modified to work with Konqueror.
  • Simplified calendar positioning (and made it more robust) - Thanks to Brad Rubenstein for that suggestion.
2.5 2005-12-23
  • Implemented optional disabling of out-of-range days (which can occur be displayed at the start of the very first month and end of the very last).
  • Tidied up cursor on calendar (thanks to Lou LaRocca for that suggestion).
  • Removed all browser sniffing.
  • Tightened up calendar positioning where advanced CSS is used.
  • Tightened up month displays having week start days other than zero (Sunday).
2.42 2005-12-15
  • Fixed bug where calendar could exceed the end of range by one month (using the > button).
2.41 2005-12-12
  • Small fix for "Today" display when there are no disabled dates.
2.4 2005-12-10
  • Added feature to allow disabling of specific days of the week, dates and date ranges. Made it optional that clicking on the calendar itself causes the pop-up to be hidden. Thanks to Felix Joussein for the feedback.
2.3 2005-11-23
  • Corrected input validation for US and other date formats. Added examples for US date processing.
2.2 2005-11-17
  • Added input date validation. Added input date highlighting (thanks to Brad Allan for that suggestion). Added optional strict date processing (e.g. making 31-Sep an error instead of returning 1-Oct). Improved the calendar positioning so that CSS positioning using DIVs is handled correctly.
2.1 2005-11-10
  • Fixed a bug which causes the calendar not to display in Firefox when the event trigger element's parent was not the data element's parent.
    NOTE: This has forced me to add a second interface parameter (see above) which is always 'this'!
2.0 2005-11-03
  • Added an IFRAME behind the calendar to deal with Internet Explorer's SELECT box "feature".
  • Renamed all exposed variables and functions but kept showCal as entry point for backward compatibility.
  • Assigned classes to all elements and moved all style attributes to an inline style sheet within the script.
1.2 2005-10-26
  • Allow start of week to be any day.
1.1 2005-10-17
  • Allow a click anywhere on the calling page to cancel the calendar.
  • Added "How to" paragraphs to documentation.
  • Corrected bug that misread numeric seed months as one less than entered.
1.0 2004-08-02
  • Initial release

Copyright 2005- © Anthony Garrett. All rights reserved.
Valid XHTML 1.0 Strict Valid CSS! This page was last updated on .