Pure JavaScript Calendar Library – jsCalendar

The jsCalendar is fully customizable Javascript Library which helps you to create inline calendars on your webpage. It comes with many color scheme along with different calendar view.

Whether you need a simple or event calendar, It is one of the best libraries to quickly build a calendar with date and time.

You have an unlimited option to handle its functionality. Also, Different variation provides you to easily customize it. It is responsive and works well on mobile devices.

This calendar supports different languages and comes up with 9+ built-in languages.

JavaScript Calendar Library features:

• You can choose any of built-in themes: Default, Material Design, and Classic.
• Each theme has 5 different color schemes such as blue, yellow, orange, red, green.
• Unlimited options to handle the function with events and API method.
• Built-in support for 9+ different languages.

Basic usage:

You simply need to add jsCalendar’s Javascript and CSS stylesheet file on your HTML page.

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

If you want to show the calendar in a specific language then add a language file.

<script src="jsCalendar.lang.uk"></script>

If you want to use the dark color scheme then you need to add a  jsCalendar.darkseries.css file.

<link rel="stylesheet" type="text/css" href="jsCalendar.darkseries.css">

To show the calendar on your webpage, You need to define a div with an ID “my-calendar”

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

With the help of class  “auto-jsCalendar”, you can initialize the calendar automatically.

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

Just add another class as per your choice for the color scheme.

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

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 are available.

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

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