Ultra Simple Calendar With onClick Callback - jQuery jsRapCalendar

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.