Year View in Fullcalendar jquery plugin
Alternatively if you need year view something like this:
You can install it via npm https://www.npmjs.com/package/fullcalendar-year-view
Steps:
cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view
To get lib files go to yourFileLocation/node_modules/fullcalendar-year-view/dist/
Or alternatively, you can use browserify for your page
Include css & js lib files to your page
Finally use 'year' view
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,basicWeek,basicDay'
}
....
FullCalendar Documentation: http://arshaw.com/fullcalendar/docs/
Loading events as JSON: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
Render event: http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
Render event example:
fc.fullCalendar('renderEvent', {
'id': 1,
'title': 'Test Event 1',
'start': '2009-11-05T13:15:30Z',
'end': '2009-11-05T13:30:00Z'
});
Limit the display of available months: Fullcalendar limit the display of available months?
I think an alternative for your user interface would be bootstrap-year-calendar. It allows you view whole years and place one/multiple values per day, BUT the values would only be visible on hover or click.
For my need, it did the trick.