Ultra Simple Calendar With onClick Callback - jQuery jsRapCalendar
File Size: | 5.22 KB |
---|---|
Views Total: | 7884 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jsRapCalendar is a really simple jQuery plugin to generate a basic calendar widget on the webpage without 3rd dependencies, e.g. moment.js.
How to use it:
1. Insert the JavaScript jsRapCalendar.js
and Stylesheet jsRapCalendar.js
into the document.
<link rel="stylesheet" href="jsRapCalendar.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="jsRapCalendar.js"></script>
2. Create a container to hold the calendar widget.
<div id="demo"></div>
3. Call the function on this container. That's it.
$(function(){ $('#demo').jsRapCalendar(); });
4. Set the first day of the week.
- 0: Sunday (Default)
- 1: Saturday
- 2: Friday
- 3: Thursday
- 4: Wednesday
- 5: Tuesday
- 6: Monday
$('#demo').jsRapCalendar({ week:6 });
5. Localize the days & months names.
$('#demo').jsRapCalendar({ daysName:['Su','Mo','Tu','We','Th','Fr','Sa'], monthsNames:['January', 'February', 'March', 'April', 'May', 'Jun', 'July', 'August', 'September', 'October', 'November', 'December'] });
6. Execute a code when a date is clicked.
$('#demo').jsRapCalendar({ onClick:function(y,m,d){ alert(y + '-' + m + '-' + d); } });
7. Enable/disable the date click.
$('#demo').jsRapCalendar({ enabled:false });
9. Decide whether to show the caption, years, and arrows:
$('#demo').jsRapCalendar({ showCaption:true, showArrows:true, showYear:true });
10. Set the min/current date.
let d = new Date(); $('#demo').jsRapCalendar({ minDate:DateToStr(d), date:d });
Changelog:
2018-12-26
- Added more options
This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.