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

我正在使用在自定义PHP Codeigniter应用程序中显示本地数据库事件

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

请查看屏幕截图以了解更多信息。我需要的周和月视图与日视图相同，所有用户都在x轴上，日期和时间在y轴上

日视图屏幕截图：

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'>");
        //     }
        // }        
    });
}

周视图屏幕截图：

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'>");
        //     }
        // }        
    });
}

月视图屏幕截图：

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'>");
        //     }
        // }        
    });
}

绑定事件的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'>");
        //     }
        // }        
    });
}

功能日历（id）{
//$（'LayoutProgressSubmitDiv'）.show（）；
$（“#日历”）.fullCalendar({
SchedulerLisceKey:“GPL我的项目是开源的”，
defaultView:'agendaDay'，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“agendaFourHours，agendaDay，agendaWeek，month”
},
观点：{
代理4小时：{
键入：“议程”，
axisFormat:'H:mm'，
时间格式：“H:mm”，
minTime:min_时间，
最大时间：最大时间，
}
},
按钮文字：{
上一页：“，
下一步：“，
今天:"今天",，
月：'月'，
周：“周”，
day:“day”，
Agendaf4小时：“4小时”
},
时间格式：“H:mm”，
slotLabelFormat:'H:mm'，
资源：函数（回调、开始、结束、时区）{
$.ajax({
url:“日历事件？id=“+id，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
$（'#LayoutProgressSubmitDiv'）.hide（）；
var资源=[]；
如果（数据！=未定义&&data.length>0）
{
如果（！！数据）{
$.map（数据、函数（r）{
资源推送({
id:r.user\u id，
标题：“+r.姓+”+r.姓，
路径：r.path，
文件名：r.name，
});
});
}
}
其他的
{
如果（id>0）{
资源推送({
id:id，
标题：所选用户名称，
路径：“”，
文件名：“”，
});
}
}
（资源）；
}
});
},
resourceRender:函数（resourceObj，th）{
if（resourceObj.file_name）{
th.prepend（“资产/图像”+resourceObj.path+'/'+resourceObj.file_name+“'height='25px'width='25px'>”）；
}
否则{
th.前置（“资产/图像/默认配置文件pic.jpg'height='25px'width='25px'>”；
}
},
事件：函数（开始、结束、时区、回调）{
$.ajax({
url:“日历事件？id=“+id，
键入：“POST”，
数据类型：“json”，
成功：功能（数据）{
var事件=[]；
如果（！！数据）{
$.map（数据、函数（r）{
事件。推({
resourceId:r.resourceId，
标题：r.U.姓名，
开始：r.start\u日期时间，
结束：r.end_日期时间，
背景颜色：r.color\U代码，
边框颜色：r.color\U代码，
路径：r.path，
文件名：r.name，
});
});
}
回调（事件）；
}
});
},
//eventRender:函数（事件，元素）{
//if（event.file_name）{
//元素.find（“.fc title”）.prepend（“资产/图像”+event.path+'/'+event.file_name+“'height='25px'width='25px'>”）；
//     }
//否则{
//元素.find（“.fc title”）.prepend（“资产/图像/默认配置文件pic.jpg'height='25px'width='25px'>”）；
//     }
// }        
});
}

使用标准功能，可以获取y轴上的时间，但不能获取日期。但是，您可以将用户和日期同时显示在y轴上-请参阅。你检查过这些文件了吗？如果你真的想在y轴上显示日期和时间，你必须编写一个完全自定义的视图，这不是一个简单的任务-请参阅。除非你真的认为没有其他合适的选择，否则我不会从那开始。