Clear Calendar Interface for Internet – jQuery evk_calendar

evk_calendar is a straightforward and light-weight jQuery plugin that makes it straightforward to combine a clear and user-friendly calendar interface into your internet mission. It is excellent for conditions the place customers want to pick out dates and simply navigate between months and years.

Customers can click on on the subsequent/prev buttons to navigate between months and years, and upon deciding on a date, the plugin returns the chosen date in YYYY-MM-DD format, ideally suited for MySQL database interactions. Moreover, builders have the choice to disable previous dates, guaranteeing customers solely choose future dates.

How one can use it:

1. Import the evk_calendar plugin’s recordsdata into your doc which has jQuery library loaded.

<hyperlink 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 carry the calendar.

<div id="instance"></div>

3. Name the operate on the DIV container and the plugin will do the remainder.

$('#instance').evkJKcalendar({
  // choices right here
});

4. Customise the background/textual content colours of the calendar UI.

$('#instance').evkJKcalendar({
  backgroundcolor: 'clear', 
  colour: '#000000',
});

5. Decide whether or not to disable previous dates. Default: false (disable).

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

6. Set the preliminary date. Default: null.

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

7. Callback capabilities.

$("#instance")
.on('change',operate(e, date){
  console.log('Date: '+date);
})
.on('month_prev',operate(e, month){
  console.log('Month: '+month);
})
.on('month_next',operate(e, month){
  console.log('Month: '+month);
})
.on('year_prev',operate(e, yr){
  console.log('Yr: '+yr);
})
.on('year_next',operate(e, yr){
  console.log('Yr: '+yr);
});

This superior jQuery plugin is developed by JohnKu2020. For extra Superior Usages, please examine the demo web page or go to the official web site.