Basic Year Calendar Generator With jQuery - full-year-calendar.js

File Size: 5.09 KB
Views Total: 9551
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Year Calendar Generator With jQuery - full-year-calendar.js

full-year-calendar.js is a really simple jQuery plugin used for generating a year calendar where you can specify start/end months and add custom events/holidays. Requires the moment.js library to handle dates and times.

How to use it:

1. Insert the needed jQuery library and moment.js into the html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Download and insert the full-year-calendar.js script after jQuery.

<script src="full-year-calendar.js"></script>

3. Create a placeholder element for the year calendar.

<div id="full-year-calendar"></div>

4. The JavaScript to create a basic year calendar on the web page.

let fyc = $('#full-year-calendar').fullYearCalendar();

5. Customize the start/end dates.

let fyc = $('#full-year-calendar').fullYearCalendar({
    yearStart: new Date('2018-06-01'),
    yearEnd : new Date('2019-06-01')
});

6. Set the initial events and holidays.

let fyc = $('#full-year-calendar').fullYearCalendar({
    weekDaysHolidays: [0, 1],
    publicHolidays: ['2018-05-25', '2018-08-15'],
    niwds: ['2018-05-26'],
    halfDays: ['2018-05-27'],
    noSchools : ['2018-11-22']
});

7. Add a custom holiday to the year calendar.

fyc.addHoliday({
  type: 'niwds', 
  from:'2018-05-05'
});

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