Ultra Simple Calendar With onClick Callback - jQuery jsRapCalendar

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.

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 and arrows:

$('#demo').jsRapCalendar({
  showCaption:true,
  showArrows:true,
});

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 22.12.2018
  • Source