Год просмотра в плагине Fullcalendar jquery

Я начал YearView в fullcalendar (полученный из основного "MonthView", необходимый для отображения более длинных событий, таких как школьные каникулы), и я мог бы использовать руку, если кто-то уже знаком с тем, как события отображаются на экране.

  • Используя "BasicEventRenderer", как я могу заполнить "segmentContainer" для "DayEventRenderer"?
  • И когда я инициализирую начальную и конечную дату по умолчанию для разграничения активного года? (начальный месяц может быть изменен, и было бы неплохо сохранить подсветку текущего месяца и текущего дня).

Смотрите мою вилку github на https://github.com/Paulmicha/fullcalendar

- > файл примера https://github.com/Paulmicha/fullcalendar/blob/master/tests/year-view-test-01.html

enter image description here

Ответы

Ответ 1

Документация FullCalendar: http://arshaw.com/fullcalendar/docs/

Загрузка событий как JSON: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

Событие Render: http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/

Пример события Render:

fc.fullCalendar('renderEvent', {
    'id': 1,
    'title': 'Test Event 1',
    'start': '2009-11-05T13:15:30Z',
    'end': '2009-11-05T13:30:00Z'
});

Ограничить отображение доступных месяцев: Fullcalendar ограничивает отображение доступных месяцев?

Ответ 2

Я думаю, что альтернатива для вашего пользовательского интерфейса будет bootstrap-year-calendar. Он позволяет просматривать все годы и размещать одно/несколько значений в день, НО значения будут отображаться только при наведении или нажатии.

Для моей потребности это сделало трюк.

Ответ 3

В качестве альтернативы, если вам нужно что-то вроде этого: enter image description here

Вы можете установить его через npm https://www.npmjs.com/package/fullcalendar-year-view

шаги:

cd yourFileLocation
npm init (press enter)
npm i fullcalendar-year-view

Чтобы получить файлы lib, перейдите в yourFileLocation/node_modules/fullcalendar-year-view/dist/

Или же вы можете использовать browserify для своей страницы

Включите css & js lib файлы на свою страницу

Наконец, используйте представление "год"

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'year,month,basicWeek,basicDay'
  }
  ....