• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Java Script >> Free JavaScript Calendar Using Dynarch Calendar

Free JavaScript Calendar Using Dynarch Calendar

January 7, 2010 by Lorensius Londa 5 Comments

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.

Dynarch Calendar
Dynarch Calendar

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

Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. How to Create Flash Like Image Slideshow with JavaScript
  2. How to Create Image Overlay Using Javascript
  3. How to Crop Image Using JavaScript and PHP
  4. How to Create Scrollable Image Slider Using JavaScript

Filed Under: Java Script, Programming Tagged With: calendar, free javascript calendar, inline calendar, javascript, popup calendar

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. Vibram says

    September 9, 2010 at 1:43 pm

    Thanks

    Reply
  2. Jonathan says

    November 25, 2010 at 11:17 pm

    Hi, how can i change the language of the calendar in the Calendar.setup ?
    i want to show the calendar in Spanish.

    thanks

    Reply
  3. Peter says

    September 26, 2012 at 4:08 pm

    It is not FREE.

    Reply
  4. Steve says

    January 10, 2013 at 8:12 am

    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…

    Reply
  5. Harsh says

    December 4, 2014 at 11:53 am

    Hi,

    How can we show 3 months together at a time ?

    Thanks.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in