yii2 pass data to calendar

[topzine]

Good day. Need help for this issue. I'm using yii2 framework, and from my controller I want to pass all the event to calendar. Main goal is to get all the events from the controller and display it in the calendar. But unfortunately I can't figure it out which is my mistake after debugging this issue.

Here is my controller:

public function actionEvents() {
    $data = [];

    $data[] = array(
        'title' => 'Repeating Event',
        'start' =>  '2021-10-07T16:00:00', //strtotime('2021-10-07'),
        'description' => 'Lorem ipsum dolor sit ncididunt ut labore',
        'end' => '2021-10-08T16:00:00', //strtotime('2021-10-08'), 
        'className' => "fc-event-danger"
    );

    $response = Yii::$app->response;
    $response->format = \yii\web\Response::FORMAT_JSON;
    return [
        'data' => $data,
    ];
}

Here is my calendar script:

var KTCalendarBasic = function() {
    
        return {
            //main function to initiate the module
            init: function() {
    
                var calendarEvents = window.location.href + '/events';
    
                var todayDate = moment().startOf('day');
                var TODAY = todayDate.format('YYYY-MM-DD');
    
                var calendarEl = document.getElementById('kt_calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
    
                    isRTL: KTUtil.isRTL(),
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                    },
    
                    height: 800,
                    contentHeight: 780,
                    aspectRatio: 3,
    
                    nowIndicator: true,
                    now: TODAY + 'T09:25:00', // just for demo
    
                    views: {
                        dayGridMonth: { buttonText: 'month' },
                        timeGridWeek: { buttonText: 'week' },
                        timeGridDay: { buttonText: 'day' }
                    },
    
                    defaultView: 'dayGridMonth',
                    defaultDate: TODAY,
    
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    navLinks: true,
                    events: calendarEvents,
    
                    eventRender: function(info) {
                        var element = $(info.el);
    
                        if (info.event.extendedProps && info.event.extendedProps.description) {
                            if (element.hasClass('fc-day-grid-event')) {
                                element.data('content', info.event.extendedProps.description);
                                element.data('placement', 'top');
                            } else if (element.hasClass('fc-time-grid-event')) {
                                element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>'); 
                            } else if (element.find('.fc-list-item-title').lenght !== 0) {
                                element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>'); 
                            }
                        } 
                    }
                });
    
                calendar.render();
            }
        };
        }();
    
jQuery(document).ready(function() {
    KTCalendarBasic.init();
});

With this codes still I can't able to see the events in my calendar. Thank you for any suggestion

[requinix]

How much troubleshooting have you done on your own? Is the method producing the correct return value/response? Is the AJAX request working as expected? Is the Javascript producing errors?

[topzine]

Hi @requinix, thank you for your response with my concern. I already figure it out.

Converting to JSON is where I made a mistake

existing:

$response = Yii::$app->response;
$response->format = \yii\web\Response::FORMAT_JSON;
return [
    'data' => $data,
];

should be:
 

$response = Yii::$app->response;
$response->format = \yii\web\Response::FORMAT_JSON;
return $data;

just return the variable itself without assigning to new variable. Because it will affects when I render it in my calendar.