Fullcalendar - 根据事件选择突出显示一天

JS

Fullcalendar 是一个流行的开源日历插件，可用于在网页上展示和管理事件。其中一个常见的需求是根据事件来突出显示某一天的日期。本文将向您展示如何使用 Fullcalendar 来实现这个功能，并提供一个案例代码供参考。

步骤一：引入 Fullcalendar 插件

首先，您需要在您的网页中引入 Fullcalendar 插件。可以通过 CDN 或下载并引入本地文件的方式来实现。确保在引入 Fullcalendar 之前，您已经引入了 jQuery 库。

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.CSS" />
    <script src="https://cdnJS.cloudflare.com/Ajax/libs/jquery/3.5.1/jquery.min.JS"></script>
    <script src="https://cdnJS.cloudflare.com/Ajax/libs/moment.JS/2.22.2/moment.min.JS"></script>
    <script src="https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.JS"></script>
</head>
<body>
    <div id="calendar"></div>
</body>
</html>

步骤二：创建 Fullcalendar 实例

在页面加载完成后，您可以创建一个 Fullcalendar 实例，并配置它的属性和事件。

Javascript
$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: [
            {
                title: 'Event 1',
                start: '2022-01-01'
            },
            {
                title: 'Event 2',
                start: '2022-01-02'
            },
            // 添加更多事件...
        ],
        dayRender: function(date, cell) {
            var today = moment().format('YYYY-MM-DD');
            if (date.format('YYYY-MM-DD') === today) {
                cell.CSS('background-color', 'yellow');
            }
        }
    });
});

在上述代码中，我们创建了一个 Fullcalendar 实例，并通过 events 属性指定了一些事件的日期。然后，通过 dayRender 事件来自定义每个日期单元格的渲染方式。在这个例子中，我们比较日期是否与当前日期相同，如果相同，则将单元格的背景颜色设置为黄色。

步骤三：运行和测试

保存并运行上述代码，您将看到一个具有事件的日历，其中当前日期的单元格将以黄色突出显示。您可以根据您的需求修改事件和突出显示的样式。

这是一个简单的示例，演示了如何使用 Fullcalendar 根据事件选择突出显示一天的日期。您可以根据自己的实际需求进行定制和扩展。希望这篇文章对您有所帮助！