Year View in Fullcalendar jquery plugin
Solution 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?
Solution 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'
}
....
Solution 3
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.
Paul
Updated on January 31, 2020Comments
-
Paul over 4 years
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.
- Using the 'BasicEventRenderer', how do I populate the 'segmentContainer' for 'DayEventRenderer' ?
- 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
-
Paul over 11 yearsThanks for your feedback ! I'll get back to it whenever I get some time.
-
kneidels almost 11 years@Paulmicha - were you able to work something out in the end for this? its exactly what i was looking for :)
-
Prabhukiran about 10 years@paul Im unable to get the events in year view with the above code. Please help in regarding this!!