你已经在基于PHP CodeIgniter的应用中用FullCalendar实现了日视图的特殊布局——X轴显示用户（资源），Y轴显示日期时间，现在要把周视图和月视图也改成同样的轴方向，其实只需要调整FullCalendar Scheduler的视图配置就能实现，咱们一步步来：

核心思路 #

FullCalendar Scheduler默认的agendaWeek和month视图是资源在Y轴、时间/日期在X轴，要反转这个布局，关键是给视图添加orientation: 'horizontal'属性，这个属性会强制资源显示在横向（X轴），时间/日期列在纵向（Y轴），和你的日视图保持一致。

修改你的JavaScript代码 #

下面是调整后的完整代码，我标注了新增/修改的部分：

function calendar(id){ 
    // $('#LayoutProgressSubmitDiv').show(); 
    $('#calendar').fullCalendar({ 
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', 
        defaultView: 'agendaDay', 
        header: { 
            left: 'prev,next today', 
            center: 'title', 
            right: 'agendaFourHours,agendaDay,agendaWeek,resourceMonth' // 修改：把默认month换成自定义的横向月视图
        }, 
        views: { 
            agendaFourHours: { 
                type: 'agenda', 
                axisFormat: 'H:mm', 
                timeFormat: 'H:mm', 
                minTime: min_time, 
                maxTime: max_time, 
                orientation: 'horizontal' // 新增：统一横向布局
            },
            agendaDay: {
                type: 'agenda',
                orientation: 'horizontal' // 新增：确保日视图保持横向布局
            },
            agendaWeek: {
                type: 'agenda',
                orientation: 'horizontal', // 新增：周视图启用横向布局
                axisFormat: 'H:mm',
                timeFormat: 'H:mm'
            },
            resourceMonth: { // 新增：自定义横向月视图
                type: 'month',
                orientation: 'horizontal',
                dayHeaderFormat: 'ddd, MMM D' // 调整日期显示格式，适配Y轴展示
            }
        }, 
        buttonText: { 
            prev: "", 
            next: "", 
            today: 'Today', 
            month: 'Month', 
            week: 'Week', 
            day: 'Day', 
            agendaFourHours: '4 Hours' 
        }, 
        timeFormat: 'H:mm', 
        slotLabelFormat: 'H:mm', 
        resources:function(callback, start, end, timezone) { 
            $.ajax({ 
                url :"calendar_event?id=" + id, 
                type: 'POST', 
                dataType: 'json', 
                success:function(data){ 
                    $('#LayoutProgressSubmitDiv').hide(); 
                    var resources = []; 
                    if(data != undefined && data.length > 0) { 
                        if(!!data){ 
                            $.map( data, function( r ) { 
                                resources.push({ 
                                    id: r.user_id, 
                                    title: " "+ r.first_name + ' ' + r.last_name, 
                                    path: r.path, 
                                    file_name: r.name, 
                                }); 
                            }); 
                        } 
                    } else { 
                        if(id > 0 ){ 
                            resources.push({ 
                                id: id, 
                                title: selected_user_name, 
                                path: '', 
                                file_name: '', 
                            }); 
                        } 
                    } 
                    callback(resources); 
                } 
            }); 
        }, 
        resourceRender: function(resourceObj, th) { 
            if(resourceObj.file_name){ 
                th.prepend("<img src='<?php echo base_url(); ?>assets/image" + resourceObj.path+'/'+resourceObj.file_name+ "' height='25px' width='25px'>"); 
            } else{ 
                th.prepend("<img src='<?php echo base_url(); ?>assets/image/default-profile-pic.jpg' height='25px' width='25px'>"); 
            } 
        }, 
        events: function(start,end,timezone,callback){ 
            $.ajax({ 
                url :"calendar_event?id=" + id, 
                type: 'POST', 
                dataType: 'json', 
                success:function(data){ 
                    var events = []; 
                    if(!!data){ 
                        $.map( data, function( r ) { 
                            events.push({ 
                                resourceId: r.resourceId, 
                                title: r.appointment_name, 
                                start: r.start_datetime, 
                                end: r.end_datetime, 
                                backgroundColor: r.color_code, 
                                borderColor: r.color_code, 
                                path: r.path, 
                                file_name: r.name, 
                            }); 
                        }); 
                    } 
                    callback(events); 
                } 
            }); 
        }
    }); 
}

关键修改说明 #

1. 视图方向配置：给每个视图（包括你已有的4小时视图、日视图，新增的周视图、自定义月视图）都加上orientation: 'horizontal'，这是实现轴反转的核心。
2. 月视图自定义：创建了resourceMonth视图继承自month，并设置横向布局，同时调整dayHeaderFormat让Y轴的日期显示更清晰。
3. 表头按钮对应：把header.right里的month换成resourceMonth，确保点击“Month”按钮时打开的是咱们自定义的横向月视图。

额外注意事项 #

• 确认你的FullCalendar Scheduler版本是v4及以上，这个版本才支持orientation属性。
• 如果月视图的单元格高度不合适，可以通过CSS调整.fc-resourceMonth-view .fc-day-grid的样式。
• 你的resourceRender函数不需要修改，不管轴方向如何，资源的表头渲染逻辑都是通用的。

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