Customizable Pure JavaScript Calendar Library – jsCalendar

Preview:

Description:

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="jsCalendar.lang.de.js"></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
jsCalendar.new(element);

Set the selected date on init.

jsCalendar.new(element, "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.

jsCalendar.new(element, "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
jsCalendar.next();
// goto the previous month
jsCalendar.previous();
// set a new date
jsCalendar.set("30/01/2017");
// refresh the calendar
jsCalendar.refresh();
// goto a specified date
jsCalendar.goto("30/01/2017");
// rest the calendar
jsCalendar.reset();
// change the calendar language
jsCalendar.setLanguage("de");
// set min/max dates
jsCalendar.min("now");
jsCalendar.max("now");

Events available.

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

Changelog:

10/04/2018

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