jsCalendar
Just a simple javascript calendar

Download
version 1.4.5
Learn use jsCalendar
Getting started

Add the jsCalendar code on your HTML's <head> section.

<!-- jsCalendar style -->
<link rel="stylesheet" type="text/css" href="jsCalendar.css">
<!-- jsCalendar script -->
<script type="text/javascript" src="jsCalendar.js"></script>

Then, add a jsCalendar element on your page's <body> section

<!-- my calendar -->
<div class="auto-jsCalendar"></div>

*All .auto-jsCalendar elements are initiated as a calendar, when the page's load event fire.



Using CDNs

Since jsCalendar has a GitHub and an NPM project, you can use free CDNs that distributes such projects.
Two such well-known CDNs are the Unpkg CDN and the JsDelivr CDN.


jsCalendar using the Unpkg CDN

<!-- jsCalendar v1.4.5 Javascript and CSS from unpkg cdn -->
<script src="https://unpkg.com/simple-jscalendar@1.4.5/source/jsCalendar.min.js" integrity="sha384-F3Wc9EgweCL3C58eDn9902kdEH6bTDL9iW2JgwQxJYUIeudwhm4Wu9JhTkKJUtIJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/simple-jscalendar@1.4.5/source/jsCalendar.min.css" integrity="sha384-CTBW6RKuDwU/TWFl2qLavDqLuZtBzcGxBXY8WvQ0lShXglO/DsUvGkXza+6QTxs0" crossorigin="anonymous">

jsCalendar using the JsDelivr CDN

<!-- jsCalendar v1.4.5 Javascript and CSS from jsdelivr npm cdn -->
<script src="https://cdn.jsdelivr.net/npm/simple-jscalendar@1.4.5/source/jsCalendar.min.js" integrity="sha384-F3Wc9EgweCL3C58eDn9902kdEH6bTDL9iW2JgwQxJYUIeudwhm4Wu9JhTkKJUtIJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-jscalendar@1.4.5/source/jsCalendar.min.css" integrity="sha384-CTBW6RKuDwU/TWFl2qLavDqLuZtBzcGxBXY8WvQ0lShXglO/DsUvGkXza+6QTxs0" crossorigin="anonymous">

Full example with all the files and their integrity hashes using unpkg here and using jsdelivr here (the hashes are the same).

Notice: When using CDNs, always include integrity hashes.

Themes
Included themes

The jsCalendar.css includes 3 basic themes. The "Default Theme", the "Material Theme" and "Classic Theme". For additional themes, check the Themes section.


Of course, all these themes are just a few lines of CSS code, thus you can easily create your own theme according to your needs.



Default theme

The default theme of the jsCalendar is simple and clear.

<!-- Default theme -->
<div class="auto-jsCalendar"></div>
Material theme

For a minimalistic approach, try the simple Material theme.

<!-- Material theme -->
<div class="auto-jsCalendar material-theme"></div>
Classic theme

For a more old fashion look, try the Classic theme.

<!-- Classic theme -->
<div class="auto-jsCalendar classic-theme"></div>
Theme colors

Each one of the built-in themes has 5 color versions:
blue, yellow, orange, red, green
The blue color is the default.


For example the green version of the default theme is 

<!-- Green theme -->
<div class="auto-jsCalendar green"></div>




Or give a try on the red version of the material theme. 

<!-- Red material theme -->
<div class="auto-jsCalendar material-theme red"></div>
Parameters

You can customize each jsCalendar instance by defining data-* parameters on its HTML element or by passing them on the dynamic javascript creation of the calendar.



date v1.2

Set the calendar's active date.

Namedate
ValuesDate string
Default"now"
<!-- Calendar date 01/12/2018 -->
<div class="auto-jsCalendar"
     data-date="01/12/2018"></div>
navigator v1.2

Enable/Disable month's navigation buttons.

Namenavigator
Valuestrue | false
Defaulttrue
<!-- No navigator calendar -->
<div class="auto-jsCalendar"
     data-navigator="false"></div>
navigator position v1.2

Set the month's navigation position.

NamenavigatorPosition
Valuesboth | left | right
Defaultboth
<!-- Set navigator on right -->
<div class="auto-jsCalendar"
     data-navigator-position="right"></div>
zero fill v1.2

Enable/Disable date's number zero fill.

NamezeroFill
Valuestrue | false
Defaultfalse
<!-- Add zero prefix -->
<div class="auto-jsCalendar"
     data-zero-fill="true"></div>
month format v1.2

Custom month string format.

NamemonthFormat
Values<string>
Default"month"

Format string codes

Code Description Output
MONTH Month's full name February
month Month's full name February
MMM Month's first 3 letters Feb
mmm Month's first 3 letters Feb
## Month's number (zero-filled)02
# Month's number 2
YYYY Year 2017
yyyy Year 2017

Codes can be combined. For example, for the February
month of the year 2017, the code "##/YYYY" would
display 02/2017 

<!-- Custom month format -->
<div class="auto-jsCalendar"
     data-month-format="month YYYY"></div>



day format v1.2

Custom day of the week string format.

NamedayFormat
Values<string>
Default"D"

Format string codes

Code Description Output
DAY Day's full name Monday
day Day's full name Monday
DDD Day's first 3 letters Mon
ddd Day's first 3 letters Mon
DD Day's first 2 letters Mo
dd Day's first 2 letters Mo
D Day's first letter M
<!-- Custom day format -->
<div class="auto-jsCalendar"
     data-day-format="DDD"></div>



first day of the week v1.3

Select the first day of the week.

NamefirstDayOfTheWeek
Aliasfdotw (alias bugged on v1.4.4)
Values<string> | <number>
Default1

Values format

TypeDescriptionExample
StringDay's full name (based on the language)"Monday"
StringDay's number 1-7 starting from Sunday"2"
NumberDay's number 1-7 starting from Sunday2
<!-- Select Monday as the first day of the week -->
<div class="auto-jsCalendar"
     data-first-day-of-the-week="2"></div>
<!-- Equivalent using alias -->
<div class="auto-jsCalendar"
     data-fdotw="2"></div>



language v1.2

Change calendar language.

Namelanguage
Values<string>
Default"en"

Each language, other than English, is loaded from a separate script.
So first you need to load the languages on the HTML's <head>.

<!-- Load Greek language -->
<script type="text/javascript"
     src="jsCalendar.lang.gr.js"></script>
<!-- Load German language -->
<script type="text/javascript"
     src="jsCalendar.lang.de.js"></script>

and then you can use any loaded language.

<!-- With German language -->
<div class="auto-jsCalendar"
     data-language="de"></div>

Supported languages (alphabetical order)

LanguageCodeReleased on
Arabicarv1.4.5
Belarusianbev1.4.4
Catalancav1.4.4
Chinesezh
Dutchnlv1.4.4
Dutchnl
Englishen
Frenchfr
Germande
Greekgr
Hungarianhuv1.4.3
Italianit
Japaneseja
Koreankov1.4.5
Norwegiannov1.4.3
Occitanocv1.4.5
Polishplv1.4.5
Portugueseptv1.4.3
Russianru
Slovakskv1.4.3
Spanishes
Swedishsvv1.4.4
Thaithv1.4.5
Turkishtrv1.4.3
Ukrainianukv1.4.3
Vietnameseviv1.4.5

The supported languages codes are based on the ISO 639-1 codes.




min - max v1.4

Set a Minimum/Maximum date for the calendar.

Namemin | max
Values false | date
Defaultfalse
Min-date 01/01/2017 (January 2017 and later)
<!-- Set min date -->
<div class="auto-jsCalendar"
     data-date="01/02/2017"
     data-min="01/01/2017"></div>

Min-date 01/01/2017 (January 2017 and later)
Max-date 01/03/2017 (before March 2017)
<!-- Set max date -->
<div class="auto-jsCalendar"
     data-date="01/02/2017"
     data-max="01/03/2017"></div>

Max-date 01/03/2017 (before March 2017)
Min-date 01/02/2017 and Max-date 01/02/2017
(between January 2017 and March 2017)
<!-- Set min-max date -->
<div class="auto-jsCalendar"
     data-date="01/02/2017"
     data-min="01/01/2017"
     data-max="01/03/2017"></div>

Min-date 01/02/2017 and Max-date 01/02/2017
(between January 2017 and March 2017)



Javascript Create Calendar

For dynamic creation of the calendar, you can use the Javascript API.

Create calendar v1.2

Create a calendar on an HTML element. Throws an error if date does not exist.


API syntax

Syntax 1jsCalendar.new( target | options );
Syntax 2jsCalendar.new( target [, date] [, options] );
Syntax 3new jsCalendar( target | options );
Syntax 4new jsCalendar( target [, date] [, options] );

Parameters

targetHTML element
dateDate Object | Timestamp Number | String
optionsObject

So here is the full code

<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    jsCalendar.new(element);
</script>


Calendar target

The target element for the calendar

targetHTML elementv1.2
targetStringv1.4

<!-- My calendar target -->
<div id="my-calendar-target"></div>
<!-- Code to get the target element -->
<script type="text/javascript">
    // Get the target element
    var target = document.getElementById("my-calendar-target");
</script>
<!-- id calendar target -->
<div id="id-calendar-target"></div>
<!-- Code to get the target element -->
<script type="text/javascript">
    // String identifier of the target element
    var target = "#id-calendar-target";
</script>
<!-- class calendar target -->
<div class="class-calendar-target"></div>
<!-- Code to get the target element -->
<script type="text/javascript">
    // String identifier of the target element
    var target = ".class-calendar-target";
</script>


Calendar date v1.2

The date for the calendar

dateDate Object | Timestamp Number | String

Format date

TypeDescriptionExample
Date ObjectUsing the javascript datenew Date()
Timestamp NumberUsing a timestampnew Date(2017, 0, 30).getTime()
Timestamp NumberUsing a timestamp1485727200000
StringDate string"30/01/2017"
StringDate string"30-01-2017"
StringDate string"now"


Full code example

<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    jsCalendar.new(element, "30/01/2017");
</script>


Calendar options

The options for the calendar

optionsObject

Options items

NameValues
target HTML elementv1.2
date Date | Number | Stringv1.2
navigator true | falsev1.2
navigatorPosition "both" | "left" | "right"v1.2
zeroFill true | falsev1.2
monthFormat Stringv1.2
dayFormat Stringv1.2
firstDayOfTheWeek String | Numberv1.3
fdotw String | Numberv1.3
language Stringv1.2
min false | Datev1.4
max false | Datev1.4

All the options, except the target, are the same as the HTML element parameters.



Code example 1

<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    jsCalendar.new(element, "30/01/2017", {
        navigator : true,
        navigatorPosition : "left",
        zeroFill : false,
        monthFormat : "month YYYY",
        dayFormat : "DDD",
        language : "en"
    });
</script>


Code example 2

<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    jsCalendar.new({
        target : element,
        date : "30/01/2017",
        navigator : true,
        navigatorPosition : "right",
        zeroFill : true,
        monthFormat : "month",
        dayFormat : "DD",
        language : "gr"
    });
</script>


Javascript Methods

For dynamic control of the calendar, you can use the Javascript API.

.next() v1.2

Move to the next month.


API syntax

Syntax 1.next()
Syntax 2.next(n)

Parameters

NoneGo to next month
nGo to month + n

Example code

<!-- Next month button -->
<button id="my-button">Next</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Go to the next month
        myCalendar.next();
    }, false);
</script>



.previous() v1.2

Move to the previous month.


API syntax

Syntax 1.previous()
Syntax 2.previous(n)

Parameters

NoneGo to previous month
nGo to month - n

Example code

<!-- Button -->
<button id="my-button">Previous</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Go to the previous month
        myCalendar.previous();
    }, false);
</script>



.set() v1.2

Set the calendar's active date.


API syntax

Syntax.set(date)

Example code

<!-- Button -->
<button id="my-button">Set date</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Set date
        myCalendar.set("30/01/2017");
    }, false);
</script>



.refresh() v1.2

Refreshes the calendar based on the background information of the library, updating the HTML of the calendar (mainly for developers). If a date is provided, the calendar will refresh to that date (exactly like the goto method).


API syntax

Syntax 1.refresh()
Syntax 2.refresh(date)

Please note that the date parameter will change the view date/month and not the active date of the calendar. To change the active date you can use the set method.

Example code

<!-- Button -->
<button id="my-button">Refresh</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Refresh
        myCalendar.refresh();
    }, false);
</script>



.goto() v1.2

Go to a specific date.


API syntax

Syntax.goto(date)

Please note that the date parameter will change the view date/month and not the active date of the calendar. To change the active date you can use the set method.

Example code

<!-- Button -->
<button id="my-button">Goto</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Goto
        myCalendar.goto("30/01/2017");
    }, false);
</script>



.reset() v1.2

Go to the set date.


API syntax

Syntax.reset()

Example code

<!-- Button -->
<button id="my-button">Reset</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Reset
        myCalendar.reset();
    }, false);
</script>



.setLanguage() v1.2

Change the calendar language.


API syntax

Syntax.setLanguage(language code)

Example code

<!-- Button -->
<button id="my-button">Change language</button>
<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the button
    var button = document.getElementById("my-button");
    // Add a button event
    button.addEventListener("click", function(){
        // Change language
        myCalendar.setLanguage("de");
    }, false);
</script>

*You can find a list of all the available languages here.





.min() - .max() v1.4

Set a Minimum/Maximum date for the calendar.


API syntax

Syntax.min(false | date)
Syntax.max(false | date)

Example code

<!-- My calendar element -->
<div id="my-calendar"></div>
<!-- Create the calendar -->
<script type="text/javascript">
    // Create the calendar
    var myCalendar = jsCalendar.new("#my-calendar");
    // Limit to only current month
    myCalendar.min("now");
    myCalendar.max("now");
</script>



Additional Javascript APIs

Some more things in the Javascript API.

Version Attribute v1.4

Get the version of jsCalendar


API syntax

SyntaxjsCalendar.version

Example code

<!-- Print version -->
You are using<br>jsCalendar <span id="version"></span>
<script type="text/javascript">
    document.getElementById("version").textContent = jsCalendar.version;
</script>



You are using
jsCalendar


Click events v1.2

Add a click event on the calendar


API syntax

On month change.onMonthChange(function(event, date){ ... })
On day click.onDateClick(function(event, date){ ... })

*The events are called on a user click event on the calendar, so there will be no event, for example, while using .next().


Example code

<!-- My calendar element -->
<div id="my-calendar"></div>

<!-- Outputs -->
Day click : <br>
<input id="my-input-a"><br>
Month change : <br>
<input id="my-input-b"><br>

<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element);
    // Get the inputs
    var inputA = document.getElementById("my-input-a");
    var inputB = document.getElementById("my-input-b");
    // Add events
    myCalendar.onDateClick(function(event, date){
        inputA.value = date.toString();
    });
    myCalendar.onMonthChange(function(event, date){
        inputB.value = date.toString();
    });
</script>


Day click :

Month change :



Render handlers v1.4.4

Add render handlers on the calendar to make advance custom changes


API syntax

On month render.onMonthRender(function(index, element, info){ ... })
On day render.onDayRender(function(index, element, info){ ... })
On date render.onDateRender(function(date, element, info){ ... })

*The render handlers are called after every corresponding render.


Example code

<!-- My auto calendar element -->
<div id="my-calendar"
	 data-first-day-of-the-week="2"></div>

<!-- Apply render handlers to the second calendar -->
<script type="text/javascript">
	// Get the auto-calendar (we have to wait the window load event)
	var calendar = jsCalendar.new('#my-calendar');
	// Make changes on the month element
	calendar.onMonthRender(function(index, element, info) {
		// Show month index
		var month = index + 1;
		element.textContent += ' (' + (month > 9 ? '' : '0') + month + '/' + (info.start.getYear() + 1900) + ')';
	});
	// Make changes on the day name elements
	calendar.onDayRender(function(index, element, info) {
		// If weekend, make it red
		if (index == 0 || index == 6) {
			element.style.color = '#c32525';
		}
	});
	// Make changes on the date elements
	calendar.onDateRender(function(date, element, info) {
		// Make weekends bold and red
		if (!info.isCurrent && (date.getDay() == 0 || date.getDay() == 6)) {
			element.style.fontWeight = 'bold';
			element.style.color = (info.isCurrentMonth) ? '#c32525' : '#ffb4b4';
		}
	});
	// Refresh layout
	calendar.refresh();
</script>




Render freeze v1.4.5

To prevent the calendar from rendering between custom changes, you can use the freeze related functions.


API syntax

Prevent rendering from running.freeze()-
Restore rendering functionality.unfreeze()-
Get freeze state.isFrozen()returns: true | false



Select days

Select days on the calendar


API syntax

Select.select(date | date array)v1.2
Unselect.unselect(date | date array)v1.2
Clear select.clearselect()v1.2
Clear select.clearSelected()v1.4
Get selected.getSelected(select options | None)v1.4

Check date API syntax

Check if selected.isSelected(date)v1.4
Check if visible.isVisible(date)v1.4
Check if in month.isInMonth(date)v1.4

Select options v1.4

AttributeValueDescription
sorttrueSort in ascending order
sort"asc" | "desc"Sort in ascending/descending order
type"timestamp"Format dates as timestamp integer
type"date"Format dates as javascript Date
typeString with month format or day formatFormat dates as custom string

*Examples below.


Example code

<!-- Buttons -->
<button id="my-button-a">Select</button>
<button id="my-button-b">Unselect</button>
<button id="my-button-c">Clear</button>
<!-- My calendar element -->
<div id="my-calendar"></div>

<!-- Outputs -->
Day click : <br>
<input id="my-input-a"><br>
Month change : <br>
<input id="my-input-b"><br>

<!-- Create the calendar -->
<script type="text/javascript">
    // Get the element
    var element = document.getElementById("my-calendar");
    // Create the calendar
    var myCalendar = jsCalendar.new(element,"1-1-2017");
    // Get the buttons
    var buttonA = document.getElementById("my-button-a");
    var buttonB = document.getElementById("my-button-b");
    var buttonC = document.getElementById("my-button-c");
    // Add events
    buttonA.addEventListener("click", function() {
        myCalendar.select([
            "01/01/2017",
            "02/01/2017",
            "03/01/2017",
            "05/01/2017"
        ]);
    }, false);
    buttonB.addEventListener("click", function() {
        myCalendar.unselect([
            "05/01/2017"
        ]);
    }, false);
    buttonC.addEventListener("click", function() {
        myCalendar.clearselect();
    }, false);
</script>


Example .getSelected()

myCalendar.getSelected();
// Returns [1483567200000, 1483394400000, 1483308000000, 1483221600000]

myCalendar.getSelected({sort : true});
// Returns [1483221600000, 1483308000000, 1483394400000, 1483567200000]

myCalendar.getSelected({sort : "desc", type : "DD-MM-YYYY"});
// Returns ["05-01-2017", "03-01-2017", "02-01-2017", "01-01-2017"]

myCalendar.getSelected({sort : "asc", type : "date"});
/* 
 * Returns [
 *     Sun Jan 01 2017 00:00:00 GMT+0200 (GTB Standard Time),
 *     Mon Jan 02 2017 00:00:00 GMT+0200 (GTB Standard Time),
 *     Tue Jan 03 2017 00:00:00 GMT+0200 (GTB Standard Time),
 *     Thu Jan 05 2017 00:00:00 GMT+0200 (GTB Standard Time)
 * ]
 */


Get & Set Instances v1.4.3

The library maintains a list of jsCalendar instances created, based on the id of their target. This is helpful if you want to control an automatically created calendar. Calendars that their target element does not have an id, are not saved but you can manually binding them to a custom id.


API methods syntax

Get instancejsCalendar.get( id )
Set instancejsCalendar.set( id, calendar )
Remove instance from the listjsCalendar.del( id )

Parameters

idThe string id of the target element or a custom id
calendarA jsCalendar instance

Example code

<!-- My calendar element -->
<div class="auto-jsCalendar" id="my-calendar"></div>
Get auto-jsCalendar by target id<br>
<input id="my-input" value="checking"/><br>

<!-- Get the calendar object through javascript -->
<script type="text/javascript">
	// You have to wait the load event
	window.addEventListener('load', function() {
		// Get input
		var input = document.getElementById('my-input');
		// Get the calendar
		var calendar = jsCalendar.get('#my-calendar');
		// Show result
		input.value = (calendar instanceof jsCalendar) ?
			'OK' :
			'Failed';
	}, false);
	// The jsCalendar creates the auto-jsCalendar onload,
	// so you have to wait for the event and this code must
	// be under the jsCalendar.js script tag
</script>


Get auto-jsCalendar by target id :



Tools

Calendar tools methods


API methods syntax

String to DatejsCalendar.tools.parseDate(date)v1.4.1
String to DatejsCalendar.tools.stringToDate(date)v1.4.1
Date to StringjsCalendar.tools.dateToString(date, string_format, language_code = "en")v1.4.1

*jsCalendar.tools.stringToDate is alias of JsCalendar.tools.parseDate.

*string_format parameter is a string with month format or day format.


Example code

<!-- Inputs to show results -->
Testing stringToDate:
<input id="my-input-a" value="checking"/><br>
Testing dateToString:
<input id="my-input-b" value="checking"/><br>

<!-- Test the methods -->
<script type="text/javascript">
    // Get the elements
    var inputA = document.getElementById("my-input-a");
    var inputB = document.getElementById("my-input-b");
    // Express 01-01-2018 in string and date
    var str = "01-01-2018";
    var date = new Date(2018 , 0, 1);
    // Parse/Convert dates
    var str2date = jsCalendar.tools.stringToDate(str);
    var date2str = jsCalendar.tools.dateToString(date, "DD-MM-yyyy");
    // Check results
    inputA.value = (str2date.getTime() === date.getTime()) ? "pass" : "failed";
    inputB.value = (date2str === str) ? "pass" : "failed";
</script>
Testing stringToDate:
Testing dateToString:


Extensions

Calendar exposes an API that allows the extension of its functionalities by developing extension.


Loading Extension API syntax

Syntax.ext(extention_name, extention_object)

Parameters

extention_nameThe string name of the extension to load. This should be unique for each extension.
extention_objectThe ExtentionObject of the extension.

To utilise an extension, it should be loaded before creating a calendar. Thus, it is suggested to load any extension script just after loading the jsCalendar library.



The ExtentionObject is an object that can optionally include handlers that will be called from jsCalendar upon the corresponding event.


ExtentionObject {
    init: function(instance) { ... },
    create: function(instance, elements) { ... },
    update: function(instance, month) { ... }
}

Handlers

initWill be called just after the initialisation of the calendar's parameters. (optional)
createWill be called just after the creation of the calendar's HTML elements. The calendar's elements will be passed as a parameter. (optional)
updateWill be called just after the UI update of the calendar. The information of the active month will be passed as a parameter. (optional)




More Theme Things

More themes related informations are provided in this section. Additionally, you can check the Themes section for more themes.

Custom colours

Add a custom theme colour on the built in themes by editing the example code below

<!-- New purple colour -->
<style type="text/css">
    .jsCalendar.custom-purple tbody td.jsCalendar-current {
        background-color: #800080;
    }
    .jsCalendar.custom-purple *::selection {
        background: #800080;
    }
    .jsCalendar.custom-purple *::-moz-selection {
        background: #800080;
    }
    .jsCalendar.material-theme.custom-purple thead {
        background-color: #800080;
    }
    .jsCalendar.material-theme.custom-purple thead .jsCalendar-nav-left:hover,
    .jsCalendar.material-theme.custom-purple thead .jsCalendar-nav-right:hover {
        background-color: #660066;
    }
    .jsCalendar.classic-theme.custom-purple thead {
        background-color: #800080;
    }
    .jsCalendar.classic-theme.custom-purple thead .jsCalendar-nav-left:hover,
    .jsCalendar.classic-theme.custom-purple thead .jsCalendar-nav-right:hover {
        background-color: #660066;
    }
</style>
<!-- Custom color on calendar -->
<div class="auto-jsCalendar custom-purple"></div>
<div class="auto-jsCalendar material-theme custom-purple"></div>
<div class="auto-jsCalendar classic-theme custom-purple"></div>
Add more languages

You can add more languages to the calendar easy and fast.

You can edit the jsCalendar.lang.template.js file provided, to support a new language.


Open the template, then find and translate all the green text you see below.

// Language code
code : 'en',
// Months of the year
months : [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
],
// Days of the week
days : [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'
]

Save the changes and rename the file from jsCalendar.lang.template.js to jsCalendar.lang.code.js, where code is your language code.

You can find your language code on the ISO 639-1 code list.

Then you can use it like any other language file. Consider sharing it with the community by submitting it to the jsCaldendar Github project.

Try the Code Generator

You can auto generate your calendar code by using the Code Generator tool.

The Code Generator tool let you select a theme and many of the calendar's options on a simple GUI environment.

It can generate both an HTML auto-jsCalendar calendars and dynamic javascript calendars created with jsCalendar.new.

Created with ♥ by Grammatopoulos Athanasios-Vasileios
MIT License • Versions • Code Generator
Fork me on GitHub