JustCal stands for JavaScript Ultimate Slick Tiny CALendar (date-time picker).

It is standalone draggable multilingual calendar widget -
date and time picker.

It is easy to use, simple yet powerful
and highly configurable date-time picker
with seconds, AM-PM and keyboard support,
(about keyboard support - see section Accessibility below)
and wide-range format of input/output date/time values
(see section Format of date/time below).

It requires no extra files - no JavaScript libraries,
no any css or image files, it works just out of the box.

By default JustCal ships with 28 languages and 5 themes,
but if you do not want so many languages and themes,
you can build your own JustCal
(see sub-section Build your own JustCal in section Download below).

Also, you may fine tune any theme or add your language
by editing source code of justcal.js
(look for JustCal.getTheme and JustCal.getLang
methods in sources of the script).

JustCal is subject to MIT license, and you can use it in any product,
change source code and do what you want with it without permission.
See The MIT License (MIT) for the full text of this license.

Additionally, you can download JustCal with several languages and themes.
Use Ctrl + mouse click to select/deselect several items.
Use Shift + mouse click to select a group of items.
First selected items will be set as default for lang and theme.

Now you can use justCal(element [, options])
on almost any element where you wish your date/time should be in.
(note 'C' in uppercase in the name of this function).

If element is input element with type="text" or textarea element,
then it's value will be filled with selected date/time,
in other case it's innerHTML will be rewritten by given date/time.

Examples:

<input type="text" onclick="justCal(this, {lang:'de',persistent:true})">

or

<h3>Choose date/time</h3>
<p>
  <span id="datespan">2013-12-06 11:27:10</span>&nbsp;
  <img src="cal.png" 
    onclick="justCal('datespan',{format:'Y-m-d H:i:s',lang:'hi',theme:'frog'})"
    style="cursor:pointer">
</p>

You can pass JavaScript element as first parameter,
or you can pass a string with element id (e.g.: 'dtmId' or '#dtmId')
(hash sign (`#`) at the very beginning of the passed string will be sliced out).

The second parameter is optional, if it is omitted,
default values (see below) will be used.

If you wish to fine tune JustCal, you should pass an object
with specified properties as a second parameter to override any default setting.

Possible properties and their default values of options parameter
are shown in a table below.

Note: '' in the second column stands for an empty string.

Input/output format that JustCal uses resembles format
of date function in PHP language but with some restrictions.
For full list of possible values in it see the table below.

Note 1: Characters which are not shown in this table will be left untouched.

Note 2: All textual representations of months and week days and AM/PM strings are localized for respective localization (they are marked by ^* sign).

In this section you may try JustCal with different options,
such as lang, theme, navbar, dateLimit and others.

Change values in a form below and test JustCal.

JustCal can be accessed by keyboard only.

It supports cursor movements to select date by cursor keys and Enter key for submit selected date. Also it can be closed on ESC press by default.

So you are able to avoid using mouse at all with such code for example:

  <input name="datetime" onfocus="justCal(this,{format:'Y-m-d H:i:s'})">

When such input field catches focus (either by keyboard Tab press, or by mouse click)
JustCal datetime picker will pop up and you will be able to use cursor keys to move selected date
and press Enter to insert this date into text input, or press ESC to cancel.

Also you can change hours, minutes, seconds and AM/PM select box
by keyboard, accessing them by Tab key.

JustCal supports many languages.
By now there are 28 localizations, which include

• en - English (English)
• ru - Russian (русский)
• fr - French (français)
• de - German (Deutsche)
• zh - Chinese (中国的)
• ja - Japanese (日本の)
• ko - Korean (韓国の)
• es - Spanish (español)
• pt - Portuguese (portugués)
• it - Italian (italiano)
• fi - Finnish (suomi)
• sv - Swedish (svensk)
• uk - Ukrainian (український)
• pl - Polish (polski)
• ar - Arabic (عربي)
• cs - Czech (český)
• ka - Georgian (საქართველოს)
• he - Hebrew (עִברִי)
• hi - Hindi (हिंदी)
• th - Thai (ภาษาไทย)
• tr - Turkish (Türk)
• nl - Dutch (Nederlands)
• id - Indonesian (Indonesia)
• bn - Bengali (বঙ্গ)
• sr - Serbian (српски)
• hy - Armenian (հայկական)
• fa - Persian (فارسی)
• el - Greek (ελληνικός)

You can switch between languages dynamically, passing parameter lang in options:

justCal('dateAdd', { lang: 'he' });

In this example JustCal widget will be popped up with Hebrew language on the board:


Each localization includes textual representations of months and week days.
It can also include native AM/PM string if applicable
(in textAMPM property of the langs, defaults to ['AM','PM']),
and first day of the week (dow), which is equal to 0 (Sunday) for
en, zh, ja, ko, he, hi, th and is equal to 6 (Saturday) for
ar and fa localizations. For others it defaults to 1 (Monday).

Notice that you can change dow dynamically, passing its value from 0 to 6 in options parameter,
but you can not change textual string textAMPM in such a way.

All localizations were written with a little help from Moment.js (http://momentjs.com),
Google translator (http://translate.google.com)
and DateTime-Locale-0.45 on CPAN (http://search.cpan.org/~drolsky/DateTime-Locale-0.45)

If you find any error or discrepancy in these translations please report to justcal@beotiger.com.

JustCal uses UTF-8 without BOM encoding, so if you need to use it in different encoding, you should change character encoding properly. You can use iconv tool to do this, e.g. encode justcal.js to EUC-JP (Japanese):

iconv -f UTF-8 -t EUC-JP justcal.js > justcal-jp.js

Notice that changing default encoding can lead to broken symbols that are in non-ASCII character set.

If JustCal widget is not positioned correctly or broken,
check that your html page has correct layout - that is,
it should have a string <!DOCTYPE html> or alike at its very beginning,
or some browsers can render such page in quirks mode which should be avoided mostly.

  If you still need help, email to justcal@beotiger.com

Notes for JavaScript programmers: script justcal.js (or justcal-min.js)
spawns two global variables - window.justcal which represents JustCal class instance,
and function variable window.justCal (note uppercase 'C' in the name),
which is called to create a new instance of JustCal class and show JustCal widget.

So you should avoid using these names (justcal and justCal)
in global scope of your page that has JustCal widget.

Also notice that changing values of input or textarea elements by JustCal widget
triggers onchange event for the element.