Request failed, xhr: XMLHttpRequest. 400 bad Request – Ubuntu

I get the following error when I try to load up a Fullcalendar page. The calendar loads but I cannot save anything on the calendar.

http://localhost/atmtest/frontend/web/index.php?r=atm/wpheader/jsoncalendar&wphid=10601&start=2023-01-22T00%3A00%3A00-04%3A00&end=2023-01-29T00%3A00%3A00-04%3A00

I am using PHP 8.2 and Apache 2.4.41 Ubuntu.

FullCalendar v5.8.0

The following code is from the main.min.js file is just one part that is throwing the error.

 function gi(e, t, n, r, o) {
        var i = null;
        "GET" === (e = e.toUpperCase()) ? t = function(e, t) {
            return e + (-1 === e.indexOf("?") ? "?" : "&") + mi(t)
        }(t, n) : i = mi(n);
        var a = new XMLHttpRequest;
        a.open(e, t, !0),
        "GET" !== e && a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"),
        a.onload = function() {
            if (a.status >= 200 && a.status < 400) {
                var e = !1
                  , t = void 0;
                try {
                    t = JSON.parse(a.responseText),
                    e = !0
                } catch (e) {}
                e ? r(t, a) : o("Failure parsing JSON", a)
            } else
                o("Request failed", a)
        }
        ,
        a.onerror = function() {
            o("Request failed", a)
        }
        ,
        a.send(i)

EDIT
Here is the controller code:

public function 
actionJsoncalendar($start=NULL,$end=NULL,$_=NULL,$wphid)
    {
        $empid = Wpheader::find()->select(['wph_empid'])->where(['wph_id' => $wphid])->one();

        $data =array();

        $times = Planner::find()->joinWith(['task','header'])->where(['pl_empid' => $empid])->all();

        $params = [':empid' => $empid['wph_empid']];

        $approvedtill  = Yii::$app->db->createCommand('select wph_enddate FROM wpheader where wph_id = (SELECT max(wph_id) FROM wpheader where wph_empid = :empid and wph_status > 0)', $params)
            ->queryOne();

        //$approvedtilldate = json_encode();

        //var_dump($approvedtill['wph_enddate']);
        //echo $approvedtill['wph_enddate'];
        //die();

if(is_array($approvedtill)){
        foreach ($times AS $time){
            $data[] = array(
                'id' => $time->pl_id,
                'title' => $time->pl_title,
                'start' => date('Y-m-d H:i:s',strtotime($time->pl_start)),
                'end' => date('Y-m-d H:i:s',strtotime($time->pl_end)),
                'color' => ($time->pl_title == 'Lunch') ? '#378006' : ($time->task->task_priority == 'Urgent' ? '#a60a0d' : ($time->task->task_priority == 'High' ? '#ad3a05' : ($time->task->task_priority == 'Medium' ? '#610861' : ($time->task->task_priority == 'Low' ? '#086118' : '#05a321')))),
                'editable' => ($time->pl_start > $approvedtill['wph_enddate']) ? true : false,
            );
          
        }
        
}
        //var_dump(json_encode($data));
        //die();
        return json_encode($data);
    }

EDIT 2
This is the view page of the calendar.

document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: { 
                    left:'prev,next today',
                    right: 'dayGridMonth,timeGridWeek', 
                    center: 'title',

                },
                initialView: 'timeGridWeek',
                selectable : true,
                //selectHelper: true,
                events : "index.php?r=atm/wpheader/jsoncalendar&wphid=<?= $model->wph_id; ?>",
                editable: true,
                eventResize: function(info) {
                    //alert(info.event.title + " end is now " + info.event.end.toISOString());
                    
                    var startTime = moment(info.event.start).format('YYYY-MM-DD HH:mm:ss');
                    var endTime = moment(info.event.end).format('YYYY-MM-DD HH:mm:ss');
                    var eventID = info.event.id;
                    
                    var data = JSON.stringify({ 
                        'start': startTime,
                        'end':endTime,
                        'id':eventID,
                    });

                    
                    $.ajax({
                      url:'index.php?r=atm/planner/updatefromplanner',
                      type:"POST",
                      data:{start:startTime, end:endTime, id:eventID},
                      success:function()
                      {
                       calendar.refetchEvents();
                       alert("Plan Updated");
                      }
                    });
                    
                    
                },

                eventDrop: function(info) {
                    //alert(info.event.title + " end is now " + info.event.end.toISOString());
                    
                    var startTime = moment(info.event.start).format('YYYY-MM-DD HH:mm:ss');
                    var endTime = moment(info.event.end).format('YYYY-MM-DD HH:mm:ss');
                    var eventID = info.event.id;
                    
                    var data = JSON.stringify({ 
                         'start': startTime,
                         'end':endTime,
                         'id':eventID,
                    });
                        
                    $.ajax({
                      url:'index.php?r=atm/planner/updatefromplanner',
                      type:"POST",
                      data:{start:startTime, end:endTime, id:eventID},
                      success:function()
                      {
                       calendar.refetchEvents();
                       alert("Plan Updated");
                      }
                    });
                    
                    
                },

                eventClick: function(info) 
                {
                    var eventID = info.event.id;
                    if(info.event.title == 'Lunch'){
                        alert("This is Lunch Time");
                    }else{
                        {
                            $titletest = info.event.title;
                            if(confirm("Task -" +$titletest +". nnDo you want to remove it?")){
                                var eventID = info.event.id;
                                $.ajax({
                                  url:'index.php?r=atm/planner/deletefromplanner',
                                  type:"POST",
                                  data:{id:eventID},
                                  success:function()
                                  {
                                   calendar.refetchEvents();
                                   alert("Plan Deleted");
                                  }
                                })
                            }else{
                                function myCallback(data)
                                {
                                    var data = $.parseJSON(data);
                                    var getNum = data;
                                    window.location.href = 'index.php?r=atm/tasks/view&id='+getNum["pl_taskid"];
                                }
                                
                                $.get('index.php?r=atm/planner/gettaskid',{ eventID : eventID }, myCallback);
                            };

                        };
                    }
                    
                    

                },

            });
            calendar.render();
        });