Powerful Calendar Plugin With jQuery - Calendar.js

File Size: | 10.4 KB |
---|---|
Views Total: | 1133 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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 });
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) {}, });
This awesome jQuery plugin is developed by wrick17. For more Advanced Usages, please check the demo page or visit the official website.