Year View in Fullcalendar jquery plugin

Question

I started a YearView in fullcalendar (derived from the basic 'MonthView', needed to display longer events such as school holidays), and I could use a hand if anyone is already familiar with the way events get displayed on a view.

1. Using the 'BasicEventRenderer', how do I populate the 'segmentContainer' for 'DayEventRenderer' ?
2. And when do I initialize the default start & end date for delimiting the active year ? (the starting month could be changed, and it'd be nice to be able to keep the highlight on the current month and the current day).

See my github fork at https://github.com/Paulmicha/fullcalendar

-> example file is https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html

---

Answer 1

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?

Answer 2

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