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

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.