Flexible and Multi-Language jQuery Calendar & Datepicker Plugin - Ion.Calendar

File Size: 57.1 KB
Views Total: 14760
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Flexible and Multi-Language jQuery Calendar & Datepicker Plugin - Ion.Calendar

Ion.Calendar is a jQuery plugin based on Moment.js that allows to create a Flexible and Multi-Language Calendar widget on your web page. It supports all the modern web browsers and touch devices like iPhone, iPad, etc.

Basic Usage:

1. Include jQuery Ion.Calendar stylesheet file on the page

<link href="css/ion.calendar.css" rel="stylesheet" type="text/css">

2. Create a container for the calendar

<div id="demo1"></div>
<div id="result-1">...</div>

3. Create a input filed for the datepicker

<input type="text" value="" id="mydate" data-lang="en" data-years="2015-2035" data-format="YYYY-MM-DD" />

4. Include required javascript files on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/moment.min.js"></script> 
<script src="js/ion.calendar.js"></script> 

5. Call the plugin with options

<script>
$(function(){

$("#demo1").ionCalendar({
lang:"en", // set the language of the calendar. Each additional language requires its own localization file
years:"1915-1995", // Specifies the years range
sundayFirst: false,
onClick:function(date){ // Callback function. 
$("#result-1").html("onClick:<br/>"+date);
}
});

$("#mydate").ionDatePicker();
});
</script>

6. Full options.

lang: "en",
sundayFirst: true,
years: "80",
format: "",
clickable: true,
startDate: "",
hideArrows: false,
onClick: null,
onReady: null

Change log:

v2.0.2 (2015-07-26)

  • update.

This awesome jQuery plugin is developed by IonDen. For more Advanced Usages, please check the demo page or visit the official website.