Customizable Pure JavaScript Calendar Library – jsCalendar

Category: Date & Time , Javascript | October 4, 2018
Views Total:9,783 views
Official Page:Go to website
Last Update:October 4, 2018


Customizable Pure JavaScript Calendar Library – jsCalendar


jsCalendar is a standalone JavaScript library that helps you create customizable inline calendars on the webpage page.

More features:

  • 3 built-in themes: Default, Material Design, and Classic.
  • Each theme has 5 colors: blue, yellow, orange, red, green.
  • Tons of options, events and API methods.
  • i18n. Supports 9+ languages.

Basic usage:

Include the jsCalendar’s JavaScript and Stylesheet on the html page.

<link rel="stylesheet" href="jsCalendar.css">
<script src="jsCalendar.js"></script>

Include a language file of your choice:

<script src=""></script>

Create an element for the calendar.

<div id="my-calendar"></div>

To initialize the calendar automatically, just add the Class ‘auto-jsCalendar’ to the container element.

<div class="auto-jsCalendar"></div>

Or via JavaScript:

// Get the element
var element = document.getElementById("my-calendar");
// Create the calendar;

Set the selected date on init., "30/01/2017");

Apply a theme of your choice to the calendar.

<!-- Material theme -->
<div class="auto-jsCalendar material-theme"></div>
<!-- Classic theme -->
<div class="auto-jsCalendar classic-theme"></div>
<!-- Green theme -->
<div class="auto-jsCalendar green"></div>
<!-- Blue theme -->
<div class="auto-jsCalendar blue"></div>
<!-- Yellow theme -->
<div class="auto-jsCalendar yellow"></div>
<!-- Orange theme -->
<div class="auto-jsCalendar orange"></div>
<!-- Red theme -->
<div class="auto-jsCalendar red"></div>

All possible calendar options., "30/01/2017",{
  // language
  language : "en",
  // Enable/Disable date's number zero fill
  zeroFill : false,
  // Custom month string format
  // month: Month's full name "February"
  // ##: Month's number  "02"
  // #: Month's number  "2"
  // YYYY: Year  "2017"
  monthFormat : "month",
  // Custom day of the week string forma
  // day: Day's full name "Monday"
  // DDD: Day's first 3 letters "Mon"
  // DD: Day's first 2 letters "Mo"
  // D: Day's first letter  "M"
  dayFormat : "D",
  // 1 = monday
  firstDayOfTheWeek: 1
  // Enable/Disable month's navigation buttons.
  navigator : true,
  // both | left | right
  navigatorPosition : "both",
  // min date
  min : false,
  // max date
  max : false

API methods.

// goto the next month;
// goto the previous month
// set a new date
// refresh the calendar
// goto a specified date
// rest the calendar
// change the calendar language
// set min/max dates

Events available.

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



  • Fixed translator and language name
  • General code cleanup and some CSS fixes

You Might Be Interested In:

2 thoughts on “Customizable Pure JavaScript Calendar Library – jsCalendar

  1. Cristian Ionascu

    Hi is there a way to determine min date as in current date and max date, current date =1year?


Leave a Reply