Simple Calendar Plugin With jQuery – Calendar.js

Time & Clock
Demo    Download
Powerful Calendar Plugin With jQuery - Calendar
File Size: 5.13 KB
Views Total: 477 views
Last Update:September 11, 2021
Publish Date: January 20, 2017
Official Website: Go to website
License: MIT
Plugin Author: wrick17

A lightweight, fast, customizable calendar component built with jQuery plugin to show and pick date and other stuff.

Key Features:

  • Switches between months with Next/Prev buttons.
  • Or directly switches between months from a selector UI by clicking the year.
  • Also allows you to select a year from a dropdown.
  • Allows you to set min/max dates.
  • Disabled dates are supported as well.
  • Useful callbacks that can be useful for date picker, month picker, or year picker.

How to use :

Add the latest jQuery library after the main script calendar.min.js after loading :

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

Add theme CSS link :

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="theme.css" />

Create a container to hold the calendar :

<div class="calendar-container"></div>

Call the function to generate a default calendar :

$(function(){
  $('.calendar-container').calendar();
});

More callback calendar functions :

$('.calendar-container').calendar({

  onChangeMonth: function (date) {},
  onClickToday: function (date) {},
  onClickMonthNext: function (date) {},
  onClickMonthPrev: function (date) {},
  onClickYearNext: function (date) {},
  onClickYearPrev: function (date) {},
  onShowYearView: function (date) {},
  onSelectYear: function (date) {},
  
});

done

List Of Version :
  • 1.2.1
  • 1.2
  • 1.1
  • 1.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.