FullCalendar - 在周和月视图中显示x轴上的用户和y轴上的时间

Question

我使用https://fullcalendar.io在我的自定义PHP Codeigniter应用程序中显示我的本地数据库事件。

在我的应用程序中，我需要在y轴上显示用户的x轴和日期和时间，同时选择周和月，就像在日视图中一样。

请查看截图以获取更多信息。我需要与日视图相同的周视图和月视图，所有用户都在x轴和日期＆amp;时间在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,month'
        },
        views: {
            agendaFourHours: {
                type: 'agenda',
                axisFormat: 'H:mm',
                timeFormat: 'H:mm',
                minTime: min_time,
                maxTime: max_time,
            }
        },
        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);
                }
            });
        },
        // eventRender: function(event, element) {
        //     if(event.file_name){          
        //         element.find(".fc-title").prepend("<img src='<?php echo base_url(); ?>assets/image" + event.path+'/'+event.file_name+ "' height='25px' width='25px'>");
        //     }
        //     else{
        //         element.find(".fc-title").prepend("<img src='<?php echo base_url(); ?>assets/image/default-profile-pic.jpg' height='25px' width='25px'>");
        //     }
        // }        
    });
}