Tiny Calendar With Month View - jQuery huicalendar

huicalendar is a simple and tiny jQuery plugin to create a monthly calendar where you can specify which days of the month should be enabled.

How to use it:

1. Include jQuery library and the huicalendar plugin's files on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/huicalendar.css" />
<script src="/path/to/huicalendar.js"></script>

2. Create a containe in which you want to place the calendar.

<div class="myCalendar">
</div>

3. Initialize the plugin to generate a basic calendar inside the container you created.

$('.myCalendar').huicalendar({
  // options here
})

4. Set the initial date.

$('.myCalendar').huicalendar({
  viewDay: new Date('2021/07/01')
})

5. Specify which days should be enabled on init.

$('.myCalendar').huicalendar({
  enabledDay: [1,2,3],
})

6. Trigger a function on month change

$('.myCalendar').huicalendar({
  // options here
}).on('changeMonth', function(e){
  console.log(e.year)
  console.log(e.month)
  $(this).huicalendar({
    enabledDay: [4,5,6],
    viewDay: new Date(e.year+'/'+e.month+'/01')
  }, 'update')
})

7. Trigger a function on date change

$('.myCalendar').huicalendar({
  // options here
}).on('changeDate', function(e){
  console.log(e.year)
  console.log(e.month)
  console.log(e.date)
})

---

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