引言

在自动化报告系统中，我们常常需要以日历方式展示已生成报告的日期，方便用户一目了然地查看和跳转。FullCalendar 是一个功能丰富易于集成的 JavaScript 日历库。本文演示如何通过 CDN 方式引入 FullCalendar v6.1.18，在页面中快速搭建“报告日历”——高亮特定日期，并支持点击跳转至对应报告页面。

环境准备

  • 基础 HTML/CSS/JavaScript 开发环境
  • 网络可访问 jsDelivr CDN
  • 现代浏览器（支持 ES6+）

Step 1: 引入 FullCalendar 资源

在页面 <head> 区引入样式与脚本：

<!-- FullCalendar 核心样式 -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.18/index.global.css" rel="stylesheet" />
<!-- FullCalendar 核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.18/index.global.min.js"></script>
  • index.global.css：日历组件默认样式
  • index.global.min.js：包含所有视图插件及 API

Step 2: HTML 结构

在页面主体添加用于渲染日历的容器：

<div class="calendar-area">
  <h4>报告日历</h4>
  <div id="calendar"></div>
</div>

并通过简单 CSS 控制布局与响应式：

.calendar-area {
  width: 100%
  max-width: 800px
  margin: 20px auto
  padding: 0 10px
}
#calendar {
  /* FullCalendar 会自动计算高度 */
}

Step 3: JavaScript 初始化日历

页面加载完成后，使用以下脚本初始化月视图并高亮指定报告日期：

<script>
document.addEventListener('DOMContentLoaded' function() {
  const calendarEl = document.getElementById('calendar')
  // 定义要高亮的报告日期
  const reportDates = ["2025-08-02" "2025-08-03"]

  // 将日期列表映射为背景事件
  const events = reportDates.map(date => ({
    start: date
    allDay: true
    display: 'background'  // 背景高亮模式
  }))

  // 创建 FullCalendar 实例
  const calendar = new FullCalendar.Calendar(calendarEl {
    initialView: 'dayGridMonth'  // 月视图
    locale: 'zh-cn'              // 中文语言
    headerToolbar: {
      left: 'prevnext today'
      center: 'title'
      right: ''
    }
    events: events
    eventColor: '#28a745'       // 高亮颜色
    eventRadius: 0              // 无圆角
    height: 'auto'              // 自适应高度

    dateClick: function(info) {
      // 点击高亮日期时跳转到对应报告页面
      if (reportDates.includes(info.dateStr)) {
        window.location.href = '/' + info.dateStr
      }
    }
  })

  // 渲染日历
  calendar.render()
})
</script>

配置详解

配置项 含义
initialView 默认视图类型，如 dayGridMonth（月视图）timeGridWeek（周视图）等
locale 语言包，如 zh-cnen 等
headerToolbar 顶部工具栏布局
events 事件数组，可设置 display: 'background' 仅渲染背景高亮
eventColor 全局事件颜色
eventRadius 事件圆角半径
dateClick 点击日期回调，info.dateStr 为 YYYY-MM-DD 格式字符串

交互扩展示例

  • 动态添加高亮日期

    calendar.addEvent({
  start: 2025-08-10'
  allDay: true
  display: 'background'
  color: '#ffc107'
})

  • 切换到周视图

    calendar.changeView('timeGridWeek')

  • 响应式调整
    使用 CSS 媒体查询，针对移动端调整 .calendar-area 宽度或隐藏部分控件。

小结

通过 CDN 引入 FullCalendar v6.1.18 并进行简单配置，就能在网页中快速搭建一个高亮报告日期的月历，并支持点击跳转。FullCalendar 丰富的 API 让你可进一步实现拖拽事件外部数据源列表视图等功能，满足各类业务场景需求。