Full Calendar number of events per day

Question

I was given a task to make small change in schedule appointment calendar, the goal of this task is to display number of appointments per day(number of events can be displayed above of under day, see screenshot below). This app uses Full Calendar v1.5.4. I was looking at full calendar documentation but I didn't find anything useful there, this app already utilizes allDayText so it can not be applied there.

Do you know how can I create a new row below or above a day header and add there information about number of events that are happening that day?

Edit:

I've came up with the this code, added it in buildSkeleton method. Added 7 to i so column has unique value.

"<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>" +

Which gives me a row that I need but for some reason it changes size of the first and last column.

Once styling will be fixed I'll have to find a place where I can insert a number of events.

Answer 1

Function below gives desired behavior, it updates number of events whenever view is changed.

Although I'm not able to adjust size of the first and last columns in header to the previous state, as you can see at the second screenshot they are way wider. I checked css file attached to the fullCalendar but didn't find anything there, it seems to be updated in fullCalendar.js file.

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);
            }
        }
    }

Before:

After:

I tried add rowspan="2" to these rows and removed them from the second row but it doesn't work. How can I change a size of these 2 columns?

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