Year View in Fullcalendar jquery plugin

35
votes

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

enter image description here

3
javascriptjqueryjquery-pluginsfullcalendar
Im unable to get the events in year view with the above code. Please help in regarding this!! – Prabhukiran
Is there any recent update? – Don
There's already a fork for yearview: github.com/tpruvot/fullcalendar/releases – dap.tci

3 Answers

11
votes

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?

3
votes

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

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.