如何在Ajax GET请求中遍历FullCalendar事件，实现自定义显示

你可以利用FullCalendar提供的事件数据转换钩子或请求成功回调来实现需求，核心是遍历返回的事件数组，根据当前登录用户过滤并修改事件内容与样式：

核心思路 #

1. 先获取当前登录用户的标识（如user1，实际项目中从后端登录状态获取，比如全局变量）
2. 遍历接口返回的所有事件，判断每个事件的所属用户：
   • 属于当前用户：保留完整字段与原有样式
   • 非当前用户：仅保留起止时间，清空其他字段，并设置灰色样式

方法一：使用eventDataTransform（推荐） #

这是FullCalendar内置的事件数据转换配置，直接在eventSources中配置即可自动处理每一条事件：

// 假设当前登录用户标识已通过后端注入到全局变量，或提前获取
const currentUser = 'user1';

eventSources: [
    {
        url: '/Calendar/GetEvents',
        method: 'GET',
        failure: function () {
            alert('there was an error while fetching events!');
        },
        // 事件数据转换函数，逐条处理返回的事件
        eventDataTransform: function(eventData) {
            // 判断事件所属用户是否为当前登录用户
            if (eventData.user !== currentUser) {
                // 非当前用户事件：仅保留时间字段，清空其他，设置灰色样式
                return {
                    start: eventData.start,
                    end: eventData.end,
                    color: '#cccccc', // 置灰背景
                    textColor: '#666666', // 灰色文字
                    id: '',
                    user: '',
                    description: ''
                    // 如需显示占位标题，可添加 title: '已预约'
                };
            } else {
                // 当前用户事件：保留完整数据，使用原有橙色样式
                return {
                    ...eventData,
                    color: 'orange',
                    textColor: 'black'
                };
            }
        }
    }
]

方法二：使用success回调手动处理 #

如果需要更灵活的逻辑，可以在请求成功后手动处理事件数组，再添加到日历：

const currentUser = 'user1';

eventSources: [
    {
        url: '/Calendar/GetEvents',
        method: 'GET',
        success: function(response) {
            // 遍历处理所有事件
            const processedEvents = response.map(event => {
                if (event.user !== currentUser) {
                    return {
                        start: event.start,
                        end: event.end,
                        color: '#cccccc',
                        textColor: '#666666',
                        id: '',
                        user: '',
                        description: ''
                    };
                } else {
                    return {
                        ...event,
                        color: 'orange',
                        textColor: 'black'
                    };
                }
            });
            // 将处理后的事件添加到日历实例
            $('#calendar').fullCalendar('addEventSource', processedEvents);
        },
        failure: function () {
            alert('there was an error while fetching events!');
        }
    }
]

关键注意事项 #

• 确保后端返回的事件数据包含user字段（或你用来判断所属用户的唯一标识字段）
• 当前用户标识currentUser需从实际登录状态获取，避免硬编码（比如后端渲染页面时注入<script>window.currentUser = 'user1'</script>）
• 可根据需求调整非当前用户事件的样式或标题，比如添加title: '已占用'让用户看到占位提示

内容的提问来源于stack exchange，提问作者Sven