FullCalendar listMonth视图打印问题求助：内容重复与滚动内容无法打印

问题说明 #

• 无法重复打印相同的日历信息
• listMonth视图带滚动条时，仅能打印屏幕可见内容，滚动区域内内容无法输出

解决方案 #

1. 修复重复打印问题 #

原克隆DOM的方式无法复制FullCalendar的实例绑定，导致第二次打印时克隆元素无日历内容。修改printElement函数，每次打印时重新初始化日历到新创建的容器中：

// 抽离日历配置，避免重复代码
const calendarConfig = {
    headerToolbar: {
        left: false,
        center: 'title',
        right: false
    },
    locale: "pt-br",
    navLinks: true,             
    initialView: initialViews,
    eventColor: '#f16621', 
    eventContent: function(info) {
        return { html: '<div class="ui top label grey attached"><strong>Utente:</strong> ' + info.event.title + '</div><br><div class="ui top label grey attached"><strong>Responsável:</strong> ' + info.event.extendedProps.respons + '</div><br><div class="ui top label grey attached"><strong>Local da Visita:</strong> ' + info.event.extendedProps.Localvisita + '</div>' };
    },
    events: [
        { id: '1', title: 'teste', respons: 'testeee', contact: '000000001', start: '2023-10-26T10:00:00', end: '2023-10-26T13:18:00' },
        { id: '2', title: 'teste1', respons: 'testeee1', contact: '000000002', start: '2023-10-27T10:00:00', end: '2023-10-27T13:18:00' },
        { id: '3', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-28T10:00:00', end: '2023-10-28T13:18:00' },
        { id: '4', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-29T10:00:00', end: '2023-10-29T13:18:00' },
        { id: '5', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-30T10:00:00', end: '2023-10-30T13:18:00' },
        { id: '6', title: 'teste2', respons: 'testeee2', contact: '000000003', start: '2023-10-31T10:00:00', end: '2023-10-31T13:18:00' }
    ]
};

// 初始化原页面日历
var calendarEl = document.getElementById('calendarioo');
var calendar = new FullCalendar.Calendar(calendarEl, calendarConfig);
calendar.render();

// 修改打印函数
document.getElementById("btnPrintvisit").onclick = function () {
    printElement(document.getElementById("printThvisit")); 
}

function printElement(elem) {
    // 获取或创建打印区域
    let printSection = document.getElementById("printSection");
    if (!printSection) {
        printSection = document.createElement("div");
        printSection.id = "printSection";
        document.body.appendChild(printSection);
    }
    printSection.innerHTML = "";

    // 创建新容器并复制原结构
    const newContainer = document.createElement('div');
    newContainer.innerHTML = elem.innerHTML;
    printSection.appendChild(newContainer);

    // 在新容器中重新初始化日历
    const clonedCalendarEl = newContainer.querySelector('#calendarioo');
    const clonedCalendar = new FullCalendar.Calendar(clonedCalendarEl, calendarConfig);
    clonedCalendar.render();

    // 触发打印
    window.print();

    // 打印后清空打印区域
    printSection.innerHTML = "";
}

2. 修复滚动区域内容无法打印问题 #

通过打印媒体查询，强制取消FullCalendar列表容器的固定高度和溢出限制，让内容完全展开：

@media screen {
    #printSection {
        display: none !important;
    }
}

@media print {
    #printSection, #printSection * {
        visibility: visible !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
    }
    #printSection {
        position: relative;
        left: 0 !important;
        top: 0 !important;
    }
    /* 针对FullCalendar列表视图的滚动容器，强制展开 */
    #printSection .fc-scroller {
        overflow: visible !important;
        height: auto !important;
    }
    #printSection .fc-list-table-container {
        height: auto !important;
    }
}

内容的提问来源于stack exchange，提问作者Bruno