# CakePHP 3.6 Fullcalendar v4

**URL:** <https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255>\
**Category:** Need Help\
**Created:** [November 13, 2018, 11:18pm UTC](https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255 "2018-11-13T23:18:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lat1no](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@lat1no](https://discourse.cakephp.org/u/lat1no)\
**Post date:** [November 13, 2018, 11:18pm UTC](https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255/1 "2018-11-13T23:18:28Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lat1no](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@lat1no](https://discourse.cakephp.org/u/lat1no)\
**Post date:** [November 14, 2018, 12:01pm UTC](https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255/2 "2018-11-14T12:01:35Z")

</div>

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 😉 ?  
Thanks!

---

<div class="post-metadata">

**Author:** ![Graziel](https://avatars.discourse-cdn.com/v4/letter/g/71c47a/32.png) [@Graziel](https://discourse.cakephp.org/u/Graziel)\
**Post date:** [November 14, 2018, 4:37pm UTC](https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255/3 "2018-11-14T16:37:31Z")

</div>

you can use normal php functions for json encoding like:

```auto
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](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](https://github.com/andrej-griniuk/cakephp-fractal-transformer-view) but its more robust solution

---

<div class="post-metadata">

**Author:** ![lat1no](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@lat1no](https://discourse.cakephp.org/u/lat1no)\
**Post date:** [November 15, 2018, 7:51am UTC](https://discourse.cakephp.org/t/cakephp-3-6-fullcalendar-v4/5255/4 "2018-11-15T07:51:33Z")

</div>

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.