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

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. Required fields are marked *