CODEWITHSUNDEEP
fullcalendar
Alexandr Sulimov
Alexandr Sulimov

Reputation: 1924

Fullcalendar month view how to add a custom column

There are way to add a custom/total column in a month view?

enter image description here

Upvotes: 1

Views: 1429

Answers (2)

Hybrid1969
Hybrid1969

Reputation: 29

(Not sure if this classes as generated by artificial intelligence tools, but stating it here for transparency) I ended up cobbling together the below using bits of suggestions from copilot within intellij, a lot of trial and error and some cleaning up/adjustments. its far from perfect but does work in my case -

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        datesSet: function (info) {
            // your code //
            handleViewChange(info.view.type);
        }
    });

    calendar.render();
});
function handleViewChange(viewType) {
    if (viewType === 'dayGridMonth') {
        addCustomColumn();
    } else {
        removeCustomColumn();
    }
}
function addCustomColumn() {
    // Check if the custom column already exists to avoid duplication
    const headerRow = document.querySelector('.fc-col-header .fc-col-header-cell');
    if (headerRow && !document.querySelector('.fc-col-header-cell.custom-column')) {
        const customHeader = document.createElement('th');
        customHeader.className = 'fc-col-header-cell custom-column';
        customHeader.innerText = 'Custom Column';
        headerRow.parentNode.appendChild(customHeader);
    }

    // Add a new cell for each row in the calendar
    const rows = document.querySelectorAll('.fc-daygrid-body tr');
    rows.forEach(row => {
        if (!row.querySelector('.fc-daygrid-body-cell.custom-cell')) {
            const customCell = document.createElement('td');
            customCell.className = 'fc-daygrid-body-cell custom-cell';
            customCell.innerText = 'Custom Cell';
            row.appendChild(customCell);
        }
    });
}

function removeCustomColumn() {
    // Remove the custom column header
    const customHeader = document.querySelector('.fc-col-header-cell.custom-column');
    if (customHeader) {
        customHeader.parentNode.removeChild(customHeader);
    }

    // Remove the custom cells from each row
    const customCells = document.querySelectorAll('.fc-daygrid-body-cell.custom-cell');
    customCells.forEach(cell => {
        cell.parentNode.removeChild(cell);
    });
}

Upvotes: 0

Alexandr Sulimov
Alexandr Sulimov

Reputation: 1924

eventAfterAllRender: function (view) {
    $(view.headRowEl).find('tr > .cc-total').remove();
    $(view.el).find('td.fc-day-number').closest('tr').find('.cc-total').remove();

    $(view.headRowEl).find('tr').append('<th class="fc-day-header fc-widget-header fc-sun cc-total">Total</th>');
    $(view.el).find('td.fc-day-number').closest('tr').append('<td class="cc-total"></td>');

    var rows = $(view.el).find('.fc-row.fc-week');
    for (var i = 0; i < rows.length; i++) {
        $(rows[i]).find('td.fc-day').closest('tr').find('.cc-total').remove();
        $(rows[i]).find('td.fc-day').closest('tr').append('<td class="cc-total" style="vertical-align: middle;" align="center"><b>' + total + '</b></td>');
    }
}

Upvotes: 1

Related Questions