如何在FullCalendar打印视图中隐藏事件URL

我完全懂你现在的困扰——用最新版FullCalendar给客户开发功能，给事件加了URL用来打开lightbox/fancybox，结果打印视图（比如周视图）里这些URL直接显示出来，破坏了打印的美观性。下面给你几个实用的解决思路：

方法1：用CSS媒体查询针对性隐藏URL #

这是最直接的方案，利用浏览器的print媒体类型，专门给打印场景写CSS规则，把事件里的URL元素藏起来。

FullCalendar的事件链接一般会被渲染成<a>标签，URL可能作为文本后缀或者独立元素存在。你可以先检查下页面DOM结构，找到对应的选择器，然后添加如下样式：

@media print {
  /* 隐藏事件链接自动生成的URL后缀 */
  .fc-event a[href]::after {
    content: none !important;
  }
  /* 如果你的URL是自定义的独立元素（比如某个带类名的span），直接隐藏 */
  .fc-custom-event-url {
    display: none !important;
  }
}

只要调整选择器匹配你实际的DOM结构就行，这个方法不用改JS逻辑，上手最快。

方法2：自定义事件渲染，区分打印/非打印视图 #

通过FullCalendar的eventContent回调函数，判断当前是否处于打印视图，决定要不要渲染URL部分。

打印视图会带有特定的类名fc-print-view，我们可以利用这一点做判断：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置...
    eventContent: function(info) {
      // 判断当前是否是打印视图
      const isPrintMode = info.view.el.classList.contains('fc-print-view');
      let eventHtml = `<div class="fc-event-title">${info.event.title}</div>`;
      // 只有非打印状态才添加URL链接
      if (!isPrintMode) {
        eventHtml += `<a href="${info.event.url}" class="fc-event-link">查看详情</a>`;
      }
      return { html: eventHtml };
    },
    headerToolbar: {
      right: 'printButton' // 启用打印按钮
    },
    plugins: ['dayGrid', 'timeGrid', 'interaction', 'print']
  });
  calendar.render();
});

这种方法能精准控制两种状态下的事件内容，从根源上避免URL出现在打印视图里。

方法3：利用打印前后钩子临时修改 #

FullCalendar提供了beforePrint和afterPrint事件，你可以在打印开始前隐藏所有事件的URL，打印完成后再恢复显示：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置...
    beforePrint: function() {
      // 隐藏所有事件的URL元素
      document.querySelectorAll('.fc-event-link').forEach(el => {
        el.style.display = 'none';
      });
    },
    afterPrint: function() {
      // 打印结束后恢复显示
      document.querySelectorAll('.fc-event-link').forEach(el => {
        el.style.display = '';
      });
    },
    plugins: ['dayGrid', 'timeGrid', 'interaction', 'print']
  });
  calendar.render();
});

这个方案适合已经有成熟事件结构的场景，不用修改渲染逻辑，只在打印前后做临时调整。

你可以根据自己的代码结构选最适配的方案，优先推荐方法1或方法2，前者简单高效，后者灵活可控。

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