Hi, I tried to build an Event component. I am not experienced in SF and have an error, that I cant solve. Could you try out the code and tell me how to solve this error:

<aura:component controller="EventController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="newEvent" type="Event" default="{'sobjectType':'Event'}"/>
    <aura:attribute name="event" type="Event[]"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="mycolumns" type="List"/>
    <lightning:card iconName="standard:event" title="Event">
        <div class="slds-card__body slds-card__body_inner"> 
        </div>
        <div>
            <aura:if isTrue="{!not(empty(v.events))}">
                <lightning:datatable data="{!v.events }" 
                         columns="{!v.mycolumns }" 
                         keyField="Id"
                         hideCheckboxColumn="true"/>
                <aura:set attribute="else">
                    <div Style="text-align : center"> " There are no Events currently "</div>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
</aura:component>


Controller:
({
    doInit: function(component, event, helper) {
        
        component.set('v.mycolumns', [
            {label: 'Id', fieldName: 'Id', type: 'url', 
            typeAttributes: {label: { fieldName: 'Id' }, target: '_blank'}},
            
            {label: 'Subject', fieldName: 'Id', type: 'url',
            typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            {label: 'Activity Date', fieldName: 'ActivityDate', type: 'text'},
            
        ]);
        var action = component.get("c.loadEvents");
        var whatId = component.get("v.recordId");
        action.setParams({
            "recordId":whatId
        });
            
            action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){       
                    record.Subject= record.Subject;
                    record.ActivityDate= record.ActivityDate;
                });
                component.set("v.event", records);
            }
        });
        $A.enqueueAction(action);
    },
    createNewTask : function(component, event, helper) {
        var action = component.get("c.saveEvent");
        var newEvent = component.get("v.newEvent");
        action.setParams({
            "event": newEvent
        });
        action.setCallback(this,function(response){
            var state = response.getState();
                        
            if(component.isValid() && state === "SUCCESS"){
                
                var items = component.get("v.events");
                items.push(response.getReturnValue());
                component.set("v.events",items);
            }
            else{
                console.log("Failed with state "+state);
            }
        });
        $A.enqueueAction(action);
    }
})

Apex:
public with sharing class EventController {
  @AuraEnabled
  public static List<Event> loadEvents(Id recordId){
    return[SELECT Subject, ActivityDate FROM Event WHERE WhatId=:recordId And ActivityDate>= TODAY AND ActivityDate  <= Next_N_Days:3];
  }
  @AuraEnabled
  public static Event saveEvent(Event event){
    upsert event;
    return event;
   }
}