如何为FullCalendar.IO正确添加打印支持

关键遗漏点及修复步骤 #

1. 加载Print插件 #

FullCalendar的打印功能依赖专属的Print插件，你当前的plugins数组仅包含adaptivePlugin，需补充添加printPlugin（高级版内置该插件，无需额外引入资源）：

plugins: [
    adaptivePlugin,
    printPlugin // 新增打印插件
],

2. 在工具栏添加打印按钮 #

你当前的headerToolbar未配置任何操作按钮，可在合适位置添加官方打印按钮，示例放在右侧：

headerToolbar: {
    left:   '',
    center: 'title',
    right:  'printButton' // 新增打印按钮
},

3. 自定义打印触发逻辑（可选） #

如果想用页面中已有的#print-btn触发打印，而非官方内置按钮，可通过日历实例的print()方法手动调用：

// 给自定义打印按钮绑定点击事件
jQuery("#print-btn").on('click', function() {
    calendar.print(); // 调用日历打印方法
});

4. 打印样式优化（可选） #

FullCalendar自带基础打印样式，若需自定义，可添加CSS媒体查询调整：

@media print {
    /* 隐藏打印时不需要的元素 */
    #geted-bschart, #print-btn {
        display: none;
    }
    /* 确保日历在打印时占满宽度 */
    #geted-results {
        width: 100%;
    }
}

修改后的完整配置示例 #

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    initialView: 'dayGridMonth',
    views: { 
        dayGridMonth: {
            type: 'dayGrid',
            duration: { months: mths },
            monthMode: true,
            fixedWeekCount: false,
        }
    },
    plugins: [
        adaptivePlugin,
        printPlugin
    ],
    headerToolbar: {
        left:   '',
        center: 'title',
        right:  'printButton'
    },
    initialDate: fdtArray['2']+'-'+fdtArray['0']+'-'+fdtArray['1'],
    editable: false,
    selectable: true,
    businessHours: true,
    dayMaxEvents: true,
    events: getEmpData
});

// 绑定自定义打印按钮（按需选择）
jQuery("#print-btn").on('click', function() {
    calendar.print();
});

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