Dynarch Calendar (JSCal2) is a free JavaScript calendar from Dynarch. It supports inline and popup view, disabling dates, selecting a range date, highliting special dates, date tooltips and themes. Current version at the time of this writting is 1.7 which can be downloaded here.

How to Setup
- Download and extract the latest JSCal2 library (JSCal2-1.7.zip)
- Copy css and js directory from src directory into your web application directory.
- Include jscal2.js, en.js (your prefered language), jscal2.css, border-radius.css and your prefered theme css file (eg: win2k.css) in the HEAD section of your HTML file.
<script src="js/jscal2.js" type="text/javascript"></script> <script src="js/lang/en.js" type="text/javascript"></script> <link type="text/css" media="screen" rel="stylesheet" href="css/jscal2.css"/> <link type="text/css" media="screen" rel="stylesheet" href="css/border-radius.css"/> <link type="text/css" media="screen" rel="stylesheet" href="css/win2k/win2k.css"/>
How to Use
Inline Calendar
<div id="calcontainer"></div> <input type="text" name="calinfo" id="calinfo" size="25"> <Script Language="JavaScript"> <!-- Calendar.setup ( { cont: 'calcontainer', showTime: true, onSelect: function() { var date = this.selection.get(); date = Calendar.intToDate(date); date = Calendar.printDate(date,"%Y-%m-%d"); document.getElementById('calinfo').value = date; } }) //--> </Script>
Line 01: Container to display calendar.
Line 02: Text field to display selection date.
Line 07: The container id.
Line 08: Will display time selector if set to true and vice versa. Default value is false.
Line 09: Callback function that will be called when selection changes.
Popup Calendar
<input type="text" name="calinfo" id="calinfo" size="25"> <button id="caltrigger">...</button> <Script Language="JavaScript"> <!-- Calendar.setup({ trigger : "caltrigger", inputField : "calinfo", dateFormat: "%Y/%m/%d" }); //--> </Script>
Line 01: Text field to display selection date.
Line 02: Trigger button to display popup calendar.
Line 06: Trigger button id.
Line 07: Text field id.
Line 08: Date format (view api documentation)
Disabling Dates
There are two simple ways to disable dates, by using min and max arguments in the constructor or by using disabled() callback function.
Calendar.setup ({ cont: 'calinfo', min: 20100110, max: 20100125 });
Line 3: The minimum (oldest) date that the calendar allows for selection.
Line 4: The maximum date
var disabledDates = { 20100111: true, 20100112: true }; Calendar.setup({ cont : 'calinfo', disabled : function(date) { date = Calendar.dateToInt(date); return date in disabledDates; } });
Line 1: Disabled dates definition.
Line 4: Callback function to disable dates.
Highliting Dates & Tooltip
var dateInfo = { 20100114: { klass: "highlight", tooltip: "Hellow World!" }, 20100115: { klass: "highlight", tooltip: "Hola Mundo!" } }; var cal = Calendar.setup ({ cont : 'calcontainer', dateInfo : function (date, wantsClassName) { var as_number = Calendar.dateToInt(date); return DATE_INFO[as_number]; } });
Line 01-04: Highlighted date and tooltip definitions. set highlight CSS class in klass parameter and tooltip message in tooltip parameter.
Line 08: Callback function to display highlighted dates and tooltip.
CSS definition
.highlight { font-weight:bold; color:#ff0000; }
You can read the complete api documentation here







Thanks
Hi, how can i change the language of the calendar in the Calendar.setup ?
i want to show the calendar in Spanish.
thanks
It is not FREE.
Are you sure it is ‘free’? The license requirements seem a little unclear but it seems to require payment in at least commercial applications if not everywhere. Better check with the software authors…
Hi,
How can we show 3 months together at a time ?
Thanks.