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.

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

回答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?

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/10949486/year-view-in-fullcalendar-jquery-plugin

标签

javascript

jquery

jquery-plugins

fullcalendar