如何在日历中显示事件(按月、周、日同时显示https://fullcalendar.io/)

要在日历中显示事件（按月、周、日同时显示），你可以使用 FullCalendar.io 库。以下是一个简单的示例，展示了如何使用 FullCalendar.io 在网页上创建一个包含月、周、日视图的日历，并显示事件。

步骤 1: 引入 FullCalendar.io 库

首先，你需要在你的 HTML 文件中引入 FullCalendar.io 的 CSS 和 JavaScript 文件。你可以从 FullCalendar.io 的官方网站下载这些文件，或者使用 CDN 链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullCalendar Example</title>
    <!-- 引入 FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.4.2/main.min.css' rel='stylesheet' />
</head>
<body>

    <div id='calendar'></div>

    <!-- 引入 FullCalendar JavaScript -->
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.4.2/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'timeGrid'],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                defaultView: 'dayGridMonth',
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'Event 1',
                        start: '2023-04-01'
                    },
                    {
                        title: 'Event 2',
                        start: '2023-04-07',
                        end: '2023-04-10'
                    },
                    {
                        title: 'Event 3',
                        start: '2023-04-15T16:00:00'
                    },
                ],
            });

            calendar.render();
        });
    </script>

</body>
</html>

步骤 2: 解释代码

引入 CSS 和 JavaScript 文件：
- 使用 CDN 链接引入 FullCalendar 的核心库、日历视图库和时间视图库。
创建日历容器：
- 在 HTML 中创建一个 div 元素，其 ID 为 calendar，这将作为日历的容器。
初始化日历：
- 在 DOMContentLoaded 事件中初始化 FullCalendar 实例。
- 配置插件（dayGrid 和 timeGrid）以支持月、周、日视图。
- 设置头部导航栏，包括上一页、下一页、今天按钮以及视图切换按钮（月、周、日）。
- 定义默认视图为 dayGridMonth。
- 设置 editable 和 eventLimit 属性以允许编辑事件和显示“更多”链接。
- 定义一些示例事件。