Manage a json with fullcalendar

Question

I try to make visible a calendar with datas extracted from a database. I'm using Laravel 5.5 and I made a function which is a SQL request ...

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;
}

In the same time I prepared a route :

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

In my view I just have :

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

I call then my fullcalendar.js and i can display the calendar ... Until then i have no problems.

Now, i have an ajax to recover the datas and in the success part, i setup the calendar :

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();

});

the eventRender seems not to be rendering what it should...

Answer 1

Thanks to Nick i finally solved my issue ...

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);

in the for statement i collect data that i put to the right format. then i convert it into an array of json ...

Then i send the "object" in the fullcalendar this way :

$('#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,
        });
    }
});

Answer 2

The element parameter has classes fc-day-grid-event, fc-time-grid-event, or fc-list-item depending on the calendar view. The function hasClass is looking for an exact class name and is returning false when looking for fc-day and fc-time.

The eventRender callback has a third parameter, view, that you can use to determine the current calendar 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") {

    }
}

If you're trying to add a description to display in the event blocks in the agendaWeek, agendaDay, and listWeek views you can do something like the following:

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