Innovative Calendar jQuery Plugin - Verbose Calendar

File Size: 77.3 KB
Views Total: 722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Innovative Calendar jQuery Plugin - Verbose Calendar

Verbose Calendar is a simple and experimental jQuery calendar plugin that provides a comprehensive list of all the dates of the year, sorted by month and ready for easy browsing.

With just a simple click of the left or right arrow, you can switch between years and stay organized in style. It also supports date click event, which may be helpful in scheduling appointments, marking important events, or simply keeping track of the time.

How to use it:

1. Download and include the jQuery Verbose Calendar plugin's files.

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

2. Call the function calendar on the calendar container and the plugin will do the rest.

<div id="myCalendar">
  ...
</div>
$(document).ready(function() {
  $("#myCalendar").calendar({
    // ...
  });
});

3. Execute a callback function when a date is clicked.

$(document).ready(function() {
  $("#myCalendar").calendar({
    click_callback: myCallback
  });
});
var myCallback = function(date) {
    // Returned date is a date object containing the day, month, and year.
    // date.day = day; date.month = month; date.year = year;
    alert("Open your Javascript console to see the returned result object.");
    console.log(date);
}

4. Available options to config the calendar.

$("#myCalendar").calendar({

  // internal settings
  d: d,
  year: d.getFullYear(),
  today: d.getDate(),
  month: d.getMonth(),
  current_year: d.getFullYear(),

  // refers to Tipsy jQuery Plugin
  // https://www.jqueryscript.net/tooltip/Facebook-like-jQuery-Tootip-Plugin-tipsy.html
  tipsy_gravity: 's',

  // scroll the page to the current date
  // refers to Scrollto jQuery plugin:
  // https://www.jqueryscript.net/animation/Smooth-Scroll-Plugin-jQuery-scrollTo.html
  scroll_to_date: true

});

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