Year View in Fullcalendar jquery plugin Year View in Fullcalendar jquery plugin javascript javascript

Year View in Fullcalendar jquery plugin


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?


Alternatively if you need year view something like this:enter image description here

You can install it via npm https://www.npmjs.com/package/fullcalendar-year-view

Steps:

cd yourFileLocationnpm 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'  }  ....


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.