Customizable Pure JavaScript Calendar Library – jsCalendar

Category: Date & Time , Javascript | October 4, 2018
Author: GramThanos
Views Total: 4,739
Official Page: Go to website
Last Update: October 4, 2018
License: MIT

Preview:

Customizable Pure JavaScript Calendar Library – jsCalendar

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

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?

    Reply

Leave a Reply