How to integrate the FullCalendar 'v3' library into CodeIgniter4. Throws error 'Undefined variable $data'

Question

I am using CodeIgniter 4. I want to do this Full Calendar, I followed evry step in the tutorial

**ErrorException Undefined variable $data **

This is my View File

<div class="container">
    <h1>Codeigniter Fullcalendar</h1>
    <div class="row" style="width:50%">
        <div class="col-md-12">
            <div id="calendar"></div>
        </div>
    </div>
</div>
    
<script type="text/javascript">
    
    var events = <?php echo json_encode($data) ?>;
     
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()
            
    $('#calendar').fullCalendar({
        header    : {
            left  : 'prev,next today',
            center: 'title',
            right : 'month,agendaWeek,agendaDay'
        },
        buttonText: {
            today: 'today',
            month: 'month',
            week : 'week',
            day  : 'day'
        },
        events    : events
    })
</script>

This is my Controller

public function index() {
 
        $db = \Config\Database::connect();
        $builder = $db->table('calendar');   
        $query = $builder->select('*')
                    ->limit(10)->get();
 
        $data = $query->getResult();
 
        foreach ($data as $key => $value) {
            $data['data'][$key]['title'] = $value->title;
            $data['data'][$key]['start'] = $value->start_date;
            $data['data'][$key]['end'] = $value->end_date;
            $data['data'][$key]['backgroundColor'] = "#00a65a";
        }        

        return view('calendar', $data);
    }

Iam using C14, and try to use full calendar in my project. But this happens when I try this code for Full Calendar. Can someone help

Answer 1

The issue is that the tutorial author doesn't cater for a situation when there are no 'events' in the events database table.

Thus, in the method \App\Controllers\FullCalendar::index(), the $data['data'] array key would not be set if no events exist in the database, leading to $data being undefined in your View file (app/Views/home.php).

A quick fix would be to cater for that scenario by providing a default value for the $data['data'] array key. I.e:

\App\Controllers\FullCalendar::index()

// ...
return view('home', array_key_exists('data', $data) ? $data : ['data' => []]);
// ...

---

Though, I personally don't like a few things about the author's implementation.

1. He/she modifies that same result set ($data) with more or less the same existing data. Only the keys are renamed. This can be equally achieved by aliasing the table column names using the query builder's ->select(...) method.
2. He/she returns an array of objects using ->getResult(), yet based on the use case, a pure array would have been sufficient by using ->getResultArray()

Solution:

\App\Controllers\FullCalendar::index()

<?php

namespace App\Controllers;
use CodeIgniter\Controller;

class FullCalendar extends Controller
{

    /**
     * Write code on Method
     *
     * @return string
     */
    public function index()
    {
        $result = db_connect()
            ->table('calendar')
            ->select(['title', 'start_date AS start', 'end_date AS end'])
            ->limit(10)
            ->get()
            ->getResultArray();

        array_walk($result, function (&$value) {
            $value['backgroundColor'] = '#00a65a';
        });

        return view('home', ['data' => $result]);
    }

}

---

Addendum

You may add a few events to your database table to test it out. I.e:

INSERT INTO `calendar` (`id`, `title`, `start_date`, `end_date`)
VALUES (NULL, 'Ballet Dance', '2022-11-01', '2022-11-03'),
       (NULL, 'San Antonio Health & Fitness Expo', '2022-11-15', '2022-11-18')