Clean Calendar Interface for Web - jQuery evk_calendar

evk_calendar is a simple and lightweight jQuery plugin that makes it easy to integrate a clean and user-friendly calendar interface into your web project. It's perfect for situations where users need to select dates and easily navigate between months and years.

Users can click on the next/prev buttons to navigate between months and years, and upon selecting a date, the plugin returns the chosen date in YYYY-MM-DD format, ideal for MySQL database interactions. Additionally, developers have the option to disable past dates, ensuring users only select future dates.

How to use it:

1. Import the evk_calendar plugin's files into your document which has jQuery library loaded.

<link href="/path/to/evk_calendar_jk.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/evk_calendar_jk.js"></script>

2. Create an empty DIV container to hold the calendar.

<div id="example"></div>

3. Call the function on the DIV container and the plugin will do the rest.

$('#example').evkJKcalendar({
  // options here
});

4. Customize the background/text colors of the calendar UI.

$('#example').evkJKcalendar({
  backgroundcolor: 'transparent', 
  color: '#000000',
});

5. Determine whether to disable past dates. Default: false (disable).

$('#example').evkJKcalendar({
  canPast: false
});

6. Set the initial date. Default: null.

$('#example').evkJKcalendar({
  initDate: '2024-04-20'
});

7. Callback functions.

$("#example")
.on('change',function(e, date){
  console.log('Date: '+date);
})
.on('month_prev',function(e, month){
  console.log('Month: '+month);
})
.on('month_next',function(e, month){
  console.log('Month: '+month);
})
.on('year_prev',function(e, year){
  console.log('Year: '+year);
})
.on('year_next',function(e, year){
  console.log('Year: '+year);
});

---

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