FullCalendar - отображение пользователей по оси X и времени по оси Y в представлении недели и месяца. - PullRequest
0 голосов
/ 16 мая 2018

Я использую https://fullcalendar.io для отображения событий локальной базы данных в моем собственном приложении PHP Codeigniter.

В моем приложении мне нужно показывать пользователей по оси X, а также дату и время по оси Y при выборе Недели и Месяца, как в представлении «День».

Пожалуйста, просмотрите скриншот для получения дополнительной информации. Мне нужно, чтобы представление «Неделя и месяц» было таким же, как и представление «День». Все пользователи находятся на оси X, а «Дата и время» - на оси Y.

Скриншот дневного просмотра:

enter image description here

Скриншот просмотра недели:

enter image description here

Скриншот просмотра месяца:

enter image description here

Функция 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'>");
        //     }
        // }        
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...