如何在网页中集成fullcalendar日历控件

发布时间:2024-09-03 00:51:55

阅读量:129

要在网页中集成 FullCalendar 日历控件，请按照以下步骤操作：

首先，确保你已经安装了 Node.js 和 npm。如果没有，请访问 https://nodejs.org/ 下载并安装。
使用 npm 安装 FullCalendar 和相关依赖项。在命令行中运行以下命令：

npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

在你的 HTML 文件中，引入 FullCalendar 的样式文件和 JavaScript 文件。将以下代码添加到 <head> 标签内：

<link rel="stylesheet" href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css"><script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script><script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script><script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>

在 HTML 文件的 <body> 标签内，创建一个
元素，用于显示日历：

<div id="calendar"></div>

在[removed]` 标签内或单独的 JavaScript 文件中，初始化 FullCalendar 控件并设置相关选项。例如：

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'interaction' ],
    defaultView: 'dayGridMonth',
    events: [
      {
        title: 'My Event',
        start: '2020-08-01',
        end: '2020-08-03'
      },
      {
        title: 'Another Event',
        start: '2020-08-05T10:00:00',
        end: '2020-08-05T12:00:00'
      }
    ]
  });

  calendar.render();
});