powerful calendar - Free Download Powerful Calendar Plugin With jQuery - Calendar.js

Free Download Powerful Calendar Plugin With jQuery – Calendar.js

By Posted on

This time I will share jQuery Plugin and tutorial about Powerful Calendar Plugin With jQuery – Calendar.js, hope it will help you in programming stack.

powerful calendar - Free Download Powerful Calendar Plugin With jQuery - Calendar.js
File Size: 13.3 KB
Views Total: 3214
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

2. Create a container to hold the calendar.

view source
1 <div class="calendar-container"></div>

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

view source
1 $(function(){
2   $('.calendar-container').calendar();
3 });

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

view source
1 <link rel="stylesheet" href="style.css" />
2 <link rel="stylesheet" href="theme.css" />

5. Determine the date to highlight on page load.

view source
1 $('.calendar-container').calendar({
2   date: new Date() // today
3 });

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

view source
1 $('.calendar-container').calendar({
2   weekDayLength: 2
3 });

7. Disable dates using the disable function.

view source
1 $('.calendar-container').calendar({
2   date: new Date(),
3   disable: function (date) {
4     return date < new Date();
5   }
6 });

8. Trigger a function when a date is selected.

view source
1 $('.calendar-container').calendar({
2   onClickDate: function (date) {
3     // do something
4   }
5 });

9. More configurations to customize the calendar.

view source
01 $('.calendar-container').calendar({
02  
03   // text for prev/next buttons
04   prevButton: "Prev",
05   nextButton: "Next",
06  
07   // custom separator between the month and the year in the month view.
08   monthYearSeparator: " ",
09  
10   // false = 4 months in a row
11   showThreeMonthsInARow: true,
12  
13   // whether to change either month or year
14   enableMonthChange: true,
15  
16   // whether to disable year view
17   enableYearView: true,
18  
19   // shows a Today button on the bottom of the calendar
20   showTodayButton: true,
21   todayButtonContent: "Today",
22  
23   // highlights all other dates with the same week-day
24   highlightSelectedWeekday: true,
25  
26   // highlights the selected week that contains the selected date
27   highlightSelectedWeek: true,
28  
29   // whether to enable/disable the year selector
30   showYearDropdown: false,
31  
32   // min/max dates
33   // Date Object or Date String
34   min: null,
35   max: null,
36  
37   // start on Sunday instead
38   startOnMonday: false,
39    
40 });

10. More callback functions.

view source
01 $('.calendar-container').calendar({
02  
03   onChangeMonth: function (date) {},
04   onClickToday: function (date) {},
05   onClickMonthNext: function (date) {},
06   onClickMonthPrev: function (date) {},
07   onClickYearNext: function (date) {},
08   onClickYearPrev: function (date) {},
09   onShowYearView: function (date) {},
10   onSelectYear: function (date) {},
11    
12 });

Changelog:

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.

 

Related posts: