Полный календарь количество событий в день

Question

Мне было дано задание внести небольшие изменения в календарь встреч по расписанию, цель этой задачи - отобразить количество встреч в день (количество событий может отображаться выше или меньше дня, см. Скриншот ниже). Это приложение использует Полный Callendar v1.5.4. Я просматривал полную документацию календаря, но ничего полезного там не нашел, это приложение уже использует allDayText, поэтому его нельзя применить там.

Знаете ли вы, как я могу создать новую строку ниже или выше заголовка дня и добавить туда информацию о количестве событий, происходящих в этот день?

Редактировать:

Я придумал этот код, добавил его в метод buildSkeleton. Добавлено 7 к i, поэтому столбец имеет уникальное значение.

"<tr>" +
"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
for (i = 0; i < colCnt; i++) {
    s += "<th class='fc- fc-col" + i+7 + ' ' + headerClass + "'/>"; 
}
s += "<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>" +
"</tr>" +

Что дает мне нужную мне строку, но по некоторым причинам меняет размер первого и последнего столбца.

Как только стиль будет исправлен, мне нужно будет найти место, где я могу вставить ряд событий.

Answer 1

Функция ниже дает желаемое поведение, она обновляет количество событий при каждом изменении вида.

Хотя я не могу отрегулировать размер первого и последнего столбцов в заголовке до предыдущего состояния, как вы можете видеть на втором скриншоте, они намного шире. Я проверил файл css, прикрепленный к fullCalendar, но ничего там не нашел, похоже, он обновляется в файле fullCalendar. js.

function SetCount(events) {
        var startDate = calendar.getView().start;
        var endDate = calendar.getView().end;
        var e = events.filter(e => e.isBlockAppointment === false && startDate <= e.start && e.start <= endDate);
        var hist = {};

        dates = [];
        e.map(function(a) { dates.push(a.start.getDay()) });
        dates.map(function (a) { if (a in hist) hist[a]++; else hist[a] = 1; });

        var colCnt = getColCnt();
        if (colCnt === 1) {
            $('.Index0').text(Object.keys(hist).length === 0 ? 0 : hist[Object.keys(hist)[0]]);
        } else {
            for (var i = 0; i < colCnt; i++) {
                $('.Index' + i).text(i in hist ? hist[i]: 0);
            }
        }
    }

До:

После:

Я пытался добавить rowspan = "2 «к этим строкам и удалил их из второго ряда, но это не работает. Как я могу изменить размер этих 2 столбцов?

"<th class='fc-agenda-axis " + headerClass + "'>&nbsp;</th>";
"<th class='fc-agenda-gutter " + headerClass + "'>&nbsp;</th>"