使用fullcalendar管理json

Question

我尝试使用从数据库中提取的数据来显示日历。我正在使用Laravel 5.5并且我创建了一个SQL请求的函数...

public function jsonListesSessions () {
    $listSessions = DB::table('sessions')
        ->join('typesessions', 'typesessions.id', '=', 'sessions.typesession_id')
        ->join('salles', 'salles.id', '=', 'sessions.salle_id')
        ->join('etablissements', 'etablissements.id', '=', 'salles.etablissement_id')
        ->join('sites', 'sites.id', '=', 'etablissements.site_id')
        ->select('sessions.datesession', 'sessions.debutsession', 'sessions.finsession',
            'typesessions.nomtypesession', 'typesessions.class', 'salles.nomsalle', 'sites.nomsite')
        ->get();

    return $listSessions;
}

在同一时间我准备了一条路线：

Route::post('admin/ ajax/sessionCalendar', 'PlanningController@jsonListesSessions');

在我看来，我只有：

<div id="m_calendar"></div>

我打电话给我的fullcalendar.js，我可以显示日历...在那之前我没有问题。

现在，我有一个ajax来恢复数据，在成功部分，我设置了日历：

var CalendarBasic = function（）{

    return {
        //main function to initiate the module
        init: function() {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/admin/ajax/sessionCalendar',
                type: 'post',
                dataType: 'json',
                async: true,
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        obj[i] = {
                            title: result[i]['nomtypesession']  ,
                            start: result[i]['datesession'] + "T" + result[i]['debutsession'],
                            end:  result[i]['datesession'] + "T" + result[i]['finsession']  ,
                            className: result[i]['class'] ,
                        }
                        // console.log (obj[i]);
                    }

                    $('#m_calendar').fullCalendar({
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay,listWeek'
                        },
                        editable: false,
                        eventLimit: true, // allow "more" link when too many events
                        navLinks: true,
                        locale: 'fr',

                        events: obj,

                        eventRender: function(event, element) {
                            if (element.hasClass('fc-day')) {
                                element.data('content', event.description);
                                element.data('placement', 'top');
                                mApp.initPopover(element);
                            } else if (element.hasClass('fc-time')) {
                                element.find('.fc-title').append('<div class="fc-description">' + event.description + '</div>');
                            } else if (element.find('.fc-list').lenght !== 0) {
                                element.find('.fc-list').append('<div class="fc-description">' + event.description + '</div>');
                            }
                        }
                    });
                },
                error: function (result) {
                    console.log ('erreur')
                },
                complete: function (result) {
                    console.log ('Fin')
                }
            });
        }
    };
}();


jQuery(document).ready(function() {
    console.log(obj)
    CalendarBasic.init();

});

eventRender似乎没有呈现应有的东西......

Answer 1

element参数具有类fc-day-grid-event，fc-time-grid-event或fc-list-item，具体取决于日历视图。函数hasClass正在寻找一个确切的类名，并在寻找fc-day和fc-time时返回false。

eventRender回调有第三个参数view，您可以使用它来确定当前日历视图。 （https://fullcalendar.io/docs/event_rendering/eventRender/）

eventRender: function(event, element, view) {
    if (view.type == "month") {

    } else if (view.type == "agendaWeek") {

    } else if (view.type == "agendaDay") {

    } else if (view.type == "listWeek") {

    }
}

如果您尝试添加要在agendaWeek，agendaDay和listWeek视图中的事件块中显示的说明，您可以执行以下操作：

eventRender: function(event, element, view) {
    if (view.type == "month") {
        element.data('content', event.description);
        element.data('content', 'Month');
        mApp.initPopover(element);
    } else if (view.type == "agendaWeek" || view.type == "agendaDay") {
        element.find( '.fc-content' ).append( '<div class="fc-description">' + event.description + '</div>' );  
    } else if (view.type == "listWeek") {
        element.find( '.fc-list-item-title' ).append( '<div class="fc-description">' + event.description + '</div>' );  
    }
}

Answer 2

感谢Nick，我终于解决了我的问题......

for (var i = 0; i < result.length; i++) {
   obj[i] = {
        title: result[i]['nomtypesession'],
        start: result[i]['datesession'] + "T" + result[i]['debutsession'],
        end: result[i]['datesession'] + "T" + result[i]['finsession'],
        nomsalle: result[i]['nomsalle'],
        nomsite: result[i]['nomsite'],
        className: result[i]['class']
   }
}
obj = Object.values(obj);

在for语句中，我收集了我放到正确格式的数据。然后我把它转换成一个json数组...

然后我以这种方式在fullcalendar中发送“对象”：

$('#m_calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    },
    editable: false,
    eventLimit: true,
    navLinks: true,
    locale: 'fr',
    events: obj,
    timeFormat: 'H(:mm)',
    eventRender: function (event, element) {
        element.qtip({
        content: event.title,
        });
    }
});