A Simple jQuery Calander Plugin to Show the Date

Key Features:

How to make use of it:

1. Place the principle script calendar.min.js after loading the most recent 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 perform to generate a default calendar contained in the container you simply created.

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

4. Apply CSS classes to the calendar or embody the next CSS files on the web page.

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

5. Determine the date to spotlight on web page load.

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

6. Set the size of names of days of the week.

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

7. Disable dates utilizing the disable function.

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

8. Trigger a function when a date is chosen.

$('.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
});

10. More callback capabilities.

$('.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) {},
});

Powerful Calendar Plugin, Simple jQuery Calendar Plugin/Github

See Demo And Download