如果有使用fullCalendar的事件，则突出显示日期

基础概念

FullCalendar 是一个用于创建交互式日历的JavaScript库。它可以轻松地集成到网页中，支持事件的拖放、调整大小、选择日期等功能。FullCalendar 提供了丰富的配置选项和事件处理能力，使得开发者可以定制出符合需求日历应用。

类型

FullCalendar 支持多种类型的事件：

普通事件：简单的日期范围事件。
全天空事件：覆盖整个日期的事件。
持续事件：跨越多个日期的事件。
定时事件：具有开始时间和结束时间的事件。

应用场景

FullCalendar 适用于各种需要展示和管理日期事件的场景，例如：

项目管理工具中的任务安排
会议管理系统中的日程安排
教育机构中的课程表
社交活动中的活动安排

如何突出显示日期

要在 FullCalendar 中突出显示特定日期，可以使用 datesSet 或 dateClick 事件来实现。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullCalendar Highlight Dates</title>
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <style>
        .highlighted-date {
            background-color: #ffcccc;
        }
    </style>
</head>
<body>
    <div id='calendar'></div>

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

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                dateClick: function(info) {
                    // 突出显示点击的日期
                    info.dayEl.classList.add('highlighted-date');
                },
                datesSet: function(dateInfo) {
                    // 突出显示特定日期
                    dateInfo.startStr = '2023-10-15';
                    dateInfo.endStr = '2023-10-15';
                    dateInfo.allDay = true;
                    calendar.addEvent(dateInfo);
                }
            });

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