Elegant Calendar & Date Selector In jQuery - Calender.js

An ultra-lightweight jQuery plugin to generate an inline calendar on the webpage that allows the user to picker a date and gets the selected day for further use.

How to use it:

1. Load the core stylesheet of the calendar plugin in the head section of the HTML document.

<link rel="stylesheet" href="/path/to/calendar-style.css" />

2. Code the HTML for the calender interface and controls.

<div class="calendar">
  <div class="calendar-footer">
    <div class="next-prev">
      <div class="btn prev-btn">prev</div>
      <div class="btn next-btn">next</div>
    </div>
    <div class="options">
      <div class="btn jump-today">Today</div>
      <div class="btn cancel-btn">Cancel</div>
      <div class="btn ok-btn">Ok</div>
    </div>
  </div>
</div>

3. Load jQuery library and the calendar.js at the end of the HTML document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/calendar.js"></script>

4. Initialize the calendar plugin and done.

let c = $('.calendar');
let calendar = new Calendar(c);

5. Get the selected date when you click the 'Ok' button.

c.find('.ok-btn').on('click', function() {
  console.log(calendar.getSelectedDate().fullDate)
});

---

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