Размещение здесь решения для добавления нового представления в fullcalendar.js. Мне нужно было реализовать представление «Повестка дня» или «Список» в fullcalendar.js для одного из моих проектов. В этом процессе я получил возможность реконструировать код Адама. Я должен сказать, что этот плагин использует некоторые очень хорошие методы кодирования и концепции JavaScript.
Я думаю, что было бы полезно для пользователей, если я поделюсь своими выводами и решениями здесь. Включенный список имеет следующие функции:
- Полностью функциональный и настраиваемый список / просмотр повестки дня
- Нумерация страниц с помощью прилагаемых кнопок со стрелками
- Эффекты щелчка / наведения на события
- Динамический вызов событий для представления списка с использованием нумерации страниц
Прежде всего, мы НЕ МОЖЕМ сделать это, не трогая полный исходный код календаря. Javascript не допускает такого рода расширяемости. Тем не менее, я сохранил все как можно проще, и я также публикую шаги по копированию с нуля вместе с исходным кодом. Это будет полезно в случае будущих обновлений fullcalendar.js
Прежде всего нам нужно определить новое представление для отображения списка событий. Представления определяются как объекты в fullcalendar.js и могут быть добавлены с помощью функций конструктора. Вы можете найти функцию построения для представления списка по этому URL https://gist.github.com/amitesh-m/5744528. Эта функция определяет и инициализирует новый вид, называемый «список». В нем renderEvents является основной функцией-членом, которая отображает доступные события в этом представлении и присоединяет триггеры событий click / hover.
Далее нам нужно изменить функцию updateEvents объекта Calendar (около строки # 500). Это сделано, чтобы отсоединить поведение вызова по умолчанию от fullcalendar.js для представления списка. Модифицированная функция будет выглядеть так:
function updateEvents(forceRender) {
if (currentView.name == "list") {
currentView.visStart = new Date(0);
currentView.visEnd = new Date(currentView.page * 1000);
refetchEvents();
} else if (!options.lazyFetching || isFetchNeeded(currentView.visStart, currentView.visEnd)) {
refetchEvents();
}
else if (forceRender) {
rerenderEvents();
}
}
Все будет работать как раньше для других представлений, но теперь календарь отправит немного другой запрос на сервер событий для представления списка. Теперь fullcalendar будет устанавливать «start = 0» и «end = 1», когда кто-то нажимает на представление списка. Количество элементов, отображаемых на странице, должно управляться сервером.
Далее нам нужно внести изменение в функцию renderView () объекта календаря (вокруг строки # 374). Это делается для включения нумерации страниц в нашем списке на основе кнопок со стрелками, которые уже включены в fullcalendar.js. Эта функция должна выглядеть так:
function renderView(inc) {
if (elementVisible()) {
ignoreWindowResize++; // because renderEvents might temporarily change the height before setSize is reached
unselect();
if (suggestedViewHeight === undefined) {
calcSize();
}
var forceEventRender = false;
if (!currentView.start || inc || date < currentView.start || date >= currentView.end) {
// view must render an entire new date range (and refetch/render events)
currentView.render(date, inc || 0); // responsible for clearing events
setSize(true);
forceEventRender = true;
}
else if (currentView.sizeDirty) {
// view must resize (and rerender events)
currentView.clearEvents();
setSize();
forceEventRender = true;
}
else if (currentView.eventsDirty) {
currentView.clearEvents();
forceEventRender = true;
}
if (currentView.name == "list") {
forceEventRender = true;
if (inc == 1) {
currentView.page++;
currentView.title = "Page " + currentView.page;
} else if (inc == -1) {
currentView.page--;
currentView.title = "Page " + currentView.page;
}
}
currentView.sizeDirty = false;
currentView.eventsDirty = false;
updateEvents(forceEventRender);
elementOuterWidth = element.outerWidth();
header.updateTitle(currentView.title);
var today = new Date();
if (today >= currentView.start && today < currentView.end) {
header.disableButton('today');
} else {
header.enableButton('today');
}
ignoreWindowResize--;
currentView.trigger('viewDisplay', _element);
}
}
Теперь, когда кто-то нажимает на предыдущую или следующую кнопку, календарь отправляет запрос новых данных о событиях на сервер. Значение «start» будет оставаться равным 0 для представления списка, а значение «end» будет представлять номера последующих страниц.
Вот и все. Все, что вам нужно сделать сейчас, это вызвать представление списка в полных настройках календаря. Это можно сделать, добавив «list» в «right» объекта заголовка следующим образом
header: {
слева: «предыдущий, следующий сегодня»,
центр: «название»,
справа: «список, месяц, повестка дня, неделя, повестка дня»
}
Демо доступно по этому URL:
http://tas.co.in/fullcalendar-with-listview/