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 });