CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsfullcalendar
Paul
Paul

Reputation: 611

Year View in Fullcalendar jquery plugin

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

Upvotes: 38

Views: 65594

Answers (3)

Devsullo
Devsullo

Reputation: 914

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

Upvotes: 4

tabacitu
tabacitu

Reputation: 6193

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.

Upvotes: 2

Eduardo Cuomo
Eduardo Cuomo

Reputation: 18937

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?

Upvotes: 12

Related Questions