Free JavaScript Calendar Using Dynarch Calendar

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

1. Download and extract the latest JSCal2 library (JSCal2-1.7.zip)
2. Copy css and js directory from src directory into your web application directory.
3. 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>

Live demo

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>

Live demo

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
});

Live demo

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];
     }
});

Live demo

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

by