Powerful Calendar Plugin With jQuery - Calendar.js

A lightweight, fast, customizable, and easy-to-style calendar component built on top of jQuery.

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 it:

1. Place the main script calendar.min.js after loading the latest jQuery library.

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

2. Create a container to hold the calendar.

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

3. Call the function to generate a default calendar inside the container you just created.

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

4. Apply CSS classes to the calendar or include the following CSS files on the page.

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

5. Determine the date to highlight on page load.

$('.calendar-container').calendar({
  date: new Date() // today
});

6. Set the length of names of days of the week. Default: 1.

$('.calendar-container').calendar({
  weekDayLength: 2
});

7. Disable dates using the disable function.

$('.calendar-container').calendar({
  date: new Date(),
  disable: function (date) { 
    return date < new Date(); 
  }
});

8. Trigger a function when a date is selected.

$('.calendar-container').calendar({
  onClickDate: function (date) {
    // do something
  }
});

9. More configurations to customize the calendar.

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

  // text for prev/next buttons
  prevButton: "Prev",
  nextButton: "Next",

  // custom separator between the month and the year in the month view.
  monthYearSeparator: " ",

  // false = 4 months in a row
  showThreeMonthsInARow: true,

  // whether to change either month or year
  enableMonthChange: true,

  // whether to disable year view
  enableYearView: true,

  // shows a Today button on the bottom of the calendar
  showTodayButton: true,
  todayButtonContent: "Today",

  // highlights all other dates with the same week-day
  highlightSelectedWeekday: true,

  // highlights the selected week that contains the selected date
  highlightSelectedWeek: true,

  // whether to enable/disable the year selector
  showYearDropdown: false,

  // min/max dates
  // Date Object or Date String
  min: null,
  max: null,

  // start on Sunday instead
  startOnMonday: false,
  
});

10. More callback 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) {},
  
});

11. Get the selected date.

var calendar = $('.calendar-container').calendar();
console.log(calendar.getSelectedDate());

Changelog:

2021-08-31

• v1.2.1: Bugfix for Safari.

2021-07-28

• v1.2: Added getSelectedDate method. Fix bug on wrong dates when startOnMonday is true

2021-03-31

• v1.1: Added the 'startOnMonday' flag. This allows you to start the month on Monday instead of Sunday.

2021-03-30

• v1.0: First stable release

2021-03-26

• Bugfix for Safari.

---

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