CakePHP 3.6 Fullcalendar v4

Need Help
1

Hi Friends of Cake!
I waste a lot of time getting fullcalendar v4 to work with cake v3.6.
I don’t get datas to the calendar from database but datas are there when I debug them.
In documentation of fullcalendar I only need to use events: <?= Router::url(['controller' => 'Coursesevents', 'action' => 'index']) ?>. But this won’t work.
Then I tried an other way by putting in $data from serialized controller. But this won’t work too. Here I get the error “Array to string conversion” in browser source code.

My controller action “index”:
public function index()
{
$this->viewBuilder()->setLayout(‘coursescalendar’);
$this->set(‘contact_id’, $this->Auth->user(‘contact_id’));

    $coursesevents = $this->Coursesevents->find('all')
        ->where(['CoursesEvents.contact_id' => $this->Auth->user('contact_id')])
        ->contain(['Contacts', 'Studios', 'ParentCoursesEvents', 'Courses', 'ChildCoursesEvents'])
        ->limit(10);

    foreach ($coursesevents as $row)
    {
        $data[] = [
            //'id' => $row['id'],
            'start' => '2018-11-13T22:15:03+00:00',//$row['start_date'],
            'end' => '2018-11-13T23:15:21+00:00',//$row['end_date'],
            'allDay' => false,
            'title' => $row['description']
        ];
    }
    $this->set(compact('data'));//, 'Contacts', 'Studios', 'ParentCoursesEvents', 'Courses'));
    $this->set('_serialize', ['data']);
}

And the script in my Layout view:

document.addEventListener('DOMContentLoaded', function() {
        var containerEl = document.getElementById('external-events-list');
        new FullCalendar.Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
                return {
                    title: eventEl.innerText.trim()
                }
            }
        });
        var calendarEl = document.getElementById('calendar');
        var initialLocaleCode = '<?= substr($this->request->getSession()->read("Config.language"), 0, 2) ?>';
        var getCurrentDate = new Date(new Date().setDate(new Date().getDate()));
        var calendar = new FullCalendar.Calendar(calendarEl, {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            locale: initialLocaleCode,
            buttonIcons: false,
            selectable: true,
            defaultView: 'month',
            allDaySlot: false,
            selectHelper: true,
            weekNumbers: true,
            showNonCurrentDates: true,
            dropAccept: '.fc-event',
            businessHours: true,
            events: <?= $data ?> /*[
                {
                    url: 'coursesevents/index'
                },
                {
                    start: '1970-01-01',
                    end: getCurrentDate,
                    allDay: true,
                    overlap: false,
                    rendering: 'background',
                    color: '#ff9f89'
                },
                {
                    title: 'Teste 2',
                    start: '2018-11-13T09:00:00Z',
                    end: '2018-11-13T15:00:00Z',
                    allDay: false
                }
            ]*/
        });

        calendar.render();
    });

Has anyone an idea putting data to the calendar?
And yes I want to use fullcalendar because I need the drag+drop event functions.

Thanks for reply!

2

UPDATE: I put a manually workaround in the script but this is not the way I want to go. I really need JSON.

events: [
                <?php
                foreach($data as $ul) { ?>
                {
                    <?php if($ul['id'] !== 0) { ?>
                        id: <?= $ul['id'] ?>,
                    <?php } ?>
                    title: '<?= $ul['title'] ?>',
                    start: '<?= $ul['start'] ?>',
                    end: '<?= $ul['end'] ?>',
                    allDay: false
                },
                <?php } ?> ]

Is there anybody who can help with a small hit to my mind :wink: ?
Thanks!

3

you can use normal php functions for json encoding like:

events: <?= json_encode($events) ?>

and in table custom finder or controller use https://book.cakephp.org/3.0/en/orm/query-builder.html#adding-calculated-fields to transform database structure to fit your needs

there is also https://github.com/andrej-griniuk/cakephp-fractal-transformer-view but its more robust solution

1 Like
4

Hi @Graziel!
This is a working solution, THANK YOU!
This must be notice in cakephp 3.6 documentation because that solution i’ve never found.