FullCalendar多实例同步：主日历更新后如何触发辅助日历事件重载-js教程-PHP中文网

fullcalendar多实例同步：主日历更新后如何触发辅助日历事件重载

本教程旨在解决FullCalendar多实例同步问题。当页面存在多个FullCalendar实例时，如何确保一个主日历（如可编辑日历）的数据更新能实时反映在另一个辅助日历（如列表视图）上。核心解决方案是，将辅助日历实例声明为全局变量，并在主日历的AJAX数据操作成功回调中，调用辅助日历的`refetchEvents()`方法，从而实现两个日历的数据同步。

FullCalendar多实例场景与挑战

在Web应用开发中，我们常常需要在同一页面上展示多个FullCalendar实例，以满足不同的视图需求。例如，一个常见的场景是：

主日历 (Main Calendar)：一个标准的可编辑日历视图（如dayGridMonth），用户可以在此视图中进行事件的添加、修改和删除操作。
辅助日历 (Auxiliary Calendar)：一个提供事件概览的列表视图（如listYear），它展示了主日历中所有事件的汇总信息。

当用户在主日历中对事件进行任何修改（如拖拽事件改变时间、编辑事件内容、删除事件）并成功更新到后端数据库后，辅助日历需要立即刷新以显示最新的数据。FullCalendar提供了refetchEvents()方法来重新从事件源加载数据，但关键在于如何准确地在主日历更新后，触发辅助日历的refetchEvents()。

解决方案：管理实例作用域与AJAX回调集成

实现这一同步的关键在于两点：正确管理FullCalendar实例的作用域，以及在主日历的数据操作成功后，精确地调用辅助日历的刷新方法。

问题根源：变量作用域

初学者常遇到的问题是将FullCalendar实例声明为局部变量。例如：

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, { /* ... */ });

    var calendarEl_list = document.getElementById('calendar_list');
    var calendar_list = new FullCalendar.Calendar(calendarEl_list, { /* ... */ });
});

登录后复制

在这种情况下，calendar_list变量仅在DOMContentLoaded事件监听器的回调函数内部可见。这意味着，当主日历（calendar）触发的AJAX请求成功返回时，外部的AJAX回调函数无法直接访问到calendar_list实例，从而无法调用其refetchEvents()方法。

关键步骤一：全局化FullCalendar实例

要解决作用域问题，最直接的方法是将需要跨函数访问的FullCalendar实例声明为全局变量，或者至少在所有需要访问它的函数都能触及的更广阔的作用域内。

// 在全局作用域声明变量
var mainCalendar;
var listCalendar;

document.addEventListener('DOMContentLoaded', function() {
    // 初始化主日历
    var calendarEl = document.getElementById('calendar');
    mainCalendar = new FullCalendar.Calendar(calendarEl, {
        editable: true,
        // ... 其他配置 ...
        eventSources: [{
            url: 'your-event-feed.php',
            method: 'POST',
            extraParams: {
                // ...
            },
            failure: function() {
                alert('There was an error while fetching events!');
            }
        }],
        eventDrop: function(info) {
            // 当事件被拖拽时
            updateEventOnServer(info.event);
        },
        eventReceive: function(info) {
            // 当外部事件被拖入日历时
            addEventToServer(info.event);
        },
        eventChange: function(info) {
            // 当事件被修改时 (如resize)
            updateEventOnServer(info.event);
        },
        eventClick: function(info) {
            // 当事件被点击时，可能触发删除或编辑
            // deleteEventFromServer(info.event.id);
        }
    });
    mainCalendar.render();

    // 初始化辅助列表日历
    var calendarEl_list = document.getElementById('calendar_list');
    listCalendar = new FullCalendar.Calendar(calendarEl_list, {
        initialView: 'listYear',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        eventSources: [{
            url: 'your-event-feed.php', // 与主日历使用相同的事件源
            method: 'POST',
            extraParams: {
                // ...
            },
            failure: function() {
                alert('There was an error while fetching list events!');
            }
        }]
    });
    listCalendar.render();
});

登录后复制

通过将mainCalendar和listCalendar声明在DOMContentLoaded回调函数外部，它们就成为了全局可访问的对象。

关键步骤二：在AJAX成功回调中触发事件重载

现在，当主日历执行任何修改事件的操作（如eventDrop、eventAdd、eventChange、eventRemove等）时，这些操作通常会触发一个AJAX请求将数据更新到服务器。在AJAX请求的success回调函数中，我们就可以访问并调用listCalendar.refetchEvents()方法。

下面是一个使用jQuery AJAX的示例，演示了如何在事件更新成功后刷新辅助日历：

超级简历WonderCV

免费求职简历模版下载制作，应届生职场人必备简历制作神器

150

查看详情

// 假设这是在主日历的某个事件回调中调用的函数
function updateEventOnServer(event) {
    // 构造发送到服务器的数据
    var eventData = {
        id: event.id,
        title: event.title,
        start: event.start.toISOString(),
        end: event.end ? event.end.toISOString() : null,
        allDay: event.allDay
        // ... 其他事件属性
    };

    $.ajax({
        url: 'update-event.php', // 后端处理事件更新的API
        data: eventData,
        type: 'POST',
        encode: true,
        success: function(response) {
            if (response.status === 'success') {
                console.log('事件更新成功！');
                // 核心：在主日历数据更新成功后，触发辅助日历刷新
                listCalendar.refetchEvents();
            } else {
                alert('事件更新失败: ' + response.message);
                // 可选：如果更新失败，可以将事件恢复到修改前的状态
                event.revert();
            }
        },
        error: function(xhr, status, error) {
            alert('AJAX请求出错: ' + xhr.responseJSON.message);
            // 如果AJAX请求失败，将事件恢复到修改前的状态
            event.revert();
        }
    });
}

// 示例：添加事件的AJAX函数
function addEventToServer(event) {
    var eventData = {
        title: event.title,
        start: event.start.toISOString(),
        end: event.end ? event.end.toISOString() : null,
        allDay: event.allDay
    };

    $.ajax({
        url: 'add-event.php', // 后端处理事件添加的API
        data: eventData,
        type: 'POST',
        encode: true,
        success: function(response) {
            if (response.status === 'success') {
                console.log('事件添加成功！');
                // 假设服务器返回了新事件的ID，可以更新本地事件对象
                event.setProp('id', response.newId);
                listCalendar.refetchEvents();
            } else {
                alert('事件添加失败: ' + response.message);
                event.remove(); // 移除未成功添加的事件
            }
        },
        error: function(xhr, status, error) {
            alert('AJAX请求出错: ' + xhr.responseJSON.message);
            event.remove(); // 移除未成功添加的事件
        }
    });
}

// 示例：删除事件的AJAX函数
function deleteEventFromServer(eventId) {
    $.ajax({
        url: 'delete-event.php', // 后端处理事件删除的API
        data: { id: eventId },
        type: 'POST',
        encode: true,
        success: function(response) {
            if (response.status === 'success') {
                console.log('事件删除成功！');
                listCalendar.refetchEvents();
            } else {
                alert('事件删除失败: ' + response.message);
                // 重新添加被错误删除的事件（如果需要）
            }
        },
        error: function(xhr, status, error) {
            alert('AJAX请求出错: ' + xhr.responseJSON.message);
        }
    });
}

登录后复制

示例代码

以下是一个整合了HTML结构、JavaScript初始化和AJAX更新逻辑的完整示例：

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FullCalendar 多实例同步示例</title>
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/main.min.css' rel='stylesheet' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
    <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { display: flex; gap: 20px; }
        #calendar { flex: 3; max-width: 70%; }
        #calendar_list { flex: 1; max-width: 30%; }
    </style>
</head>
<body>
    <h1>FullCalendar 多实例同步演示</h1>
    <div class="container">
        <div id="calendar"></div>
        <div id="calendar_list"></div>
    </div>

    <script>
        // 在全局作用域声明变量
        var mainCalendar;
        var listCalendar;

        document.addEventListener('DOMContentLoaded', function() {
            // 初始化主日历
            var calendarEl = document.getElementById('calendar');
            mainCalendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                editable: true,
                selectable: true,
                eventSources: [{
                    url: 'your-event-feed.php', // 替换为你的事件数据API
                    method: 'POST',
                    failure: function() {
                        alert('主日历事件加载失败!');
                    }
                }],
                eventDrop: function(info) {
                    // 事件拖拽后更新
                    updateEventOnServer(info.event);
                },
                eventResize: function(info) {
                    // 事件调整大小后更新
                    updateEventOnServer(info.event);
                },
                select: function(info) {
                    // 区域选择后添加新事件
                    let title = prompt('请输入事件标题:');
                    if (title) {
                        let newEvent = {
                            title: title,
                            start: info.startStr,
                            end: info.endStr,
                            allDay: info.allDay
                        };
                        addEventToServer(newEvent, mainCalendar);
                    }
                    mainCalendar.unselect(); // 取消选择区域
                },
                eventClick: function(info) {
                    // 点击事件删除
                    if (confirm(`确定要删除事件 "${info.event.title}" 吗?`)) {
                        deleteEventFromServer(info.event.id, info.event);
                    }
                }
            });
            mainCalendar.render();

            // 初始化辅助列表日历
            var calendarEl_list = document.getElementById('calendar_list');
            listCalendar = new FullCalendar.Calendar(calendarEl_list, {
                initialView: 'listYear',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                },
                eventSources: [{
                    url: 'your-event-feed.php', // 与主日历使用相同的事件源
                    method: 'POST',
                    failure: function() {
                        alert('列表日历事件加载失败!');
                    }
                }]
            });
            listCalendar.render();
        });

        // --- AJAX 辅助函数 ---

        function updateEventOnServer(event) {
            var eventData = {
                id: event.id,
                title: event.title,
                start: event.start.toISOString(),
                end: event.end ? event.end.toISOString() : null,
                allDay: event.allDay
            };

            $.ajax({
                url: 'update-event.php', // 你的后端API
                data: eventData,
                type: 'POST',
                success: function(response) {
                    if (response.status === 'success') {
                        console.log('事件更新成功！');
                        listCalendar.refetchEvents(); // 刷新列表日历
                    } else {
                        alert('事件更新失败: ' + response.message);
                        event.revert(); // 恢复事件到修改前状态
                    }
                },
                error: function(xhr, status, error) {
                    alert('AJAX请求出错: ' + (xhr.responseJSON ? xhr.responseJSON.message : error));
                    event.revert(); // 恢复事件到修改前状态
                }
            });
        }

        function addEventToServer(newEventData, calendarInstance) {
            $.ajax({
                url: 'add-event.php', // 你的后端API
                data: newEventData,
                type: 'POST',
                success: function(response) {
                    if (response.status === 'success') {
                        console.log('事件添加成功！');
                        // 假设后端返回了新事件的ID
                        newEventData.id = response.newId;
                        calendarInstance.addEvent(newEventData); // 添加到主日历
                        listCalendar.refetchEvents(); // 刷新列表日历
                    } else {
                        alert('事件添加失败: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    alert('AJAX请求出错: ' + (xhr.responseJSON ? xhr.responseJSON.message : error));
                }
            });
        }

        function deleteEventFromServer(eventId, eventObject) {
            $.ajax({
                url: 'delete-event.php', // 你的后端API
                data: { id: eventId },
                type: 'POST',
                success: function(response) {
                    if (response.status === 'success') {
                        console.log('事件删除成功！');
                        eventObject.remove(); // 从主日历中移除
                        listCalendar.refetchEvents(); // 刷新列表日历
                    } else {
                        alert('事件删除失败: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    alert('AJAX请求出错: ' + (xhr.responseJSON ? xhr.responseJSON.message : error));
                }
            });
        }
    </script>
</body>
</html>

登录后复制

后端PHP示例 (your-event-feed.php, update-event.php, add-event.php, delete-event.php)

这些PHP文件应处理数据库操作并返回JSON响应。例如：

your-event-feed.php (返回所有事件)

<?php
header('Content-Type: application/json');
// 假设从数据库获取事件数据
$events = [
    ['id' => '1', 'title' => '会议', 'start' => '2024-05-10T10:00:00', 'end' => '2024-05-10T12:00:00'],
    ['id' => '2', 'title' => '项目截止', 'start' => '2024-05-15', 'allDay' => true],
    // ...更多事件
];
echo json_encode($events);
?>

登录后复制

update-event.php

<?php
header('Content-Type: application/json');
// 实际应用中，这里会处理POST数据，更新数据库
// 模拟成功响应
echo json_encode(['status' => 'success', 'message' => 'Event updated successfully']);
// 模拟失败响应
// echo json_encode(['status' => 'error', 'message' => 'Failed to update event']);
?>

登录后复制

add-event.php

<?php
header('Content-Type: application/json');
// 实际应用中，这里会处理POST数据，插入数据库并返回新ID
// 模拟成功响应
echo json_encode(['status' => 'success', 'message' => 'Event added successfully', 'newId' => uniqid()]);
?>

登录后复制

delete-event.php

<?php
header('Content-Type: application/json');
// 实际应用中，这里会处理POST数据，从数据库删除
// 模拟成功响应
echo json_encode(['status' => 'success', 'message' => 'Event deleted successfully']);
?>

登录后复制

注意事项与最佳实践

错误处理：在AJAX请求中，务必实现error回调函数。当后端API返回错误或网络请求失败时，应给用户适当的反馈，并考虑如何处理前端状态（例如，将拖拽失败的事件恢复到原位，或不添加/删除事件）。
后端API设计：确保你的后端API能够正确处理事件的增删改查请求，并返回清晰的成功/失败状态码及消息。
性能考量：对于事件数量非常庞大或更新频率极高的场景，频繁调用refetchEvents()可能会带来一定的性能开销。但在大多数常规应用中，这种同步方式是高效且可接受的。如果遇到性能瓶颈，可以考虑更复杂的优化策略，如只刷新受影响的特定事件，或使用WebSocket进行实时推送更新。
代码组织：随着项目规模的增长，将AJAX请求逻辑封装成独立的函数或模块，可以提高代码的可读性和可维护性。
用户体验：在AJAX请求进行时，可以考虑显示加载指示器，以提升用户体验，避免用户在数据未更新完成时进行重复操作。

总结

通过将需要交互的FullCalendar实例声明在全局作用域，并在主日历的AJAX数据操作成功回调中精确调用辅助日历的refetchEvents()方法，我们可以轻松实现多个FullCalendar实例之间的数据同步。这种模式不仅适用于主日历与列表日历的同步，也适用于任何需要根据数据源变化而刷新的FullCalendar实例。理解变量作用域和AJAX回调机制是实现此类前端交互的关键。

以上就是FullCalendar多实例同步：主日历更新后如何触发辅助日历事件重载的详细内容，更多请关注php中文网其它相关文章！