Press "Enter" to skip to content

A Simple jQuery Calander Plugin to Show the Date

Simple jQuery Calendar Plugin is a lightweight, fast, customizable, and easy-to-design calendar component built on top of jQuery.

calendar plugin for website, calendar plugin jquery, all in one event calendar, the events calendar, modern events calendar documentation

Key Features:

  • To switch between months using the Next / Previous buttons.
  • Or, switch directly between months from the UI selector by clicking on the year.
  • It also allows you to select General from the dropdown menu.
  • It allows you to set minimum / maximum dates.
  • Broken dates are also supported.
  • Helpful callbacks that can be useful to the date picker, month picker, or year picker.

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

Official Website(wrick17): Click Here

This superior jQuery/javascript plugin is developed by wrick17. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.