Hi, I build a selfmade Event Component and I would like to add the "View Calendar Button that mades the same as the one in the standart Component. Could you give me a guide how to implement it in my code? I post my component and controller. tell me if you need the apex too.

Greetings
Jonathan

COMPONENT:

<aura:component controller="EventController" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="events" type="Event[]"/>
    <aura:attribute name="events2" type="Event[]"/>
    <aura:attribute name="events3" type="Event[]"/>

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="mycolumns2" type="List"/>
    <aura:attribute name="mycolumns3" type="List"/>
    
    <aura:attribute name="currentDate" type="string"/>
    <aura:attribute name="TomorrowDate" type="string"/>
    <aura:attribute name="AfterTomorrowDate" type="string"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
    <lightning:card iconName="standard:event" title="Event">
        <div class="slds-card__body slds-card__body_inner"> 
        </div>
        
        
        <div style= "font-size: 14px; font-weight: bold; margin-left:15px; margin-top:10px;">
            Heute {!v.currentDate}       
        </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">Keine Termine</div>
                </aura:set>
            </aura:if>
        </div>
        
        <div style= "font-size: 14px; font-weight: bold; margin-left:15px; margin-top:10px;">
            Morgen  {!v.TomorrowDate}        
        </div>        
        <div>
            <aura:if isTrue="{!not(empty(v.events2))}">
                <lightning:datatable data="{!v.events2}" 
                                     columns="{!v.mycolumns2}" 
                                     keyField="Id"
                                     hideCheckboxColumn="true"/>
                <aura:set attribute="else">
                    <div Style="text-align : center">Keine Termine</div>
                </aura:set>
            </aura:if>
        </div>
        
        <div style= "font-size: 14px; font-weight: bold; margin-left:15px; margin-top:10px;">
            In 2 Tagen  {!v.AfterTomorrowDate}      
        </div>     
        <div>
            <aura:if isTrue="{!not(empty(v.events3))}">
                <lightning:datatable data="{!v.events3}" 
                                     columns="{!v.mycolumns3}" 
                                     keyField="Id"
                                     hideCheckboxColumn="true"/>
                <aura:set attribute="else">
                    <div Style="text-align : center">Keine Termine</div>
                </aura:set>
            </aura:if>
        </div>
             
    </lightning:card>
</aura:component>

CONTROLLER:

({
    doInit: function(component, event, helper) {
        
         var today = new Date();
        var date = today.getDate();
        var tomorrowdate = today.getDate()+1;
        var aftertomorrowdate = today.getDate()+2;
        var month = today.getMonth()+1;
        var year = today.getFullYear();
        var result = date +'.'+month;
        var result2 = tomorrowdate +'.'+month;
        var result3 = aftertomorrowdate +'.'+month;
        component.set('v.currentDate', result);
        component.set('v.TomorrowDate', result2);
        component.set('v.AfterTomorrowDate', result3);
        
        
            
        component.set('v.mycolumns', [
            {label: 'Subject', fieldName: 'SubjectName', type: 'url', typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            { label: "StartTime", fieldName: "StartDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            { label: "EndTime", fieldName: "EndDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            
        ]);
        console.log('Before Event');
        var action = component.get("c.loadEvents");
        console.log('After Event');
        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.SubjectName= '/'+record.Id;
                    record.ActivityDate= record.ActivityDate;
                    record.StartDate= record.StartDateTime;
                });
                component.set("v.events", records);
            }
        });
        $A.enqueueAction(action);
        
        component.set('v.mycolumns2', [
            {label: 'Subject', fieldName: 'SubjectName', type: 'url', typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            { label: "StartTime", fieldName: "StartDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            { label: "EndTime", fieldName: "EndDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            
        ]);
        console.log('Before Event');
        var action = component.get("c.loadEvents2");
        console.log('After Event');
        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.SubjectName= '/'+record.Id;
                    record.ActivityDate= record.ActivityDate;
                    record.StartDate= record.StartDateTime;
                    record.EndDate= record.EndDateTime;
                });
                component.set("v.events2", records);
            }
        });
        $A.enqueueAction(action);
            
            
            component.set('v.mycolumns3', [
            {label: 'Subject', fieldName: 'SubjectName', type: 'url', typeAttributes: {label: { fieldName: 'Subject' }, target: '_blank'}},
            { label: "StartTime", fieldName: "StartDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            { label: "EndTime", fieldName: "EndDateTime", type: "date", typeAttributes:{ hour: "2-digit", minute: "2-digit" } },
            
        ]);
        console.log('Before Event');
        var action = component.get("c.loadEvents3");
        console.log('After Event');
        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.SubjectName= '/'+record.Id;
                    record.ActivityDate= record.ActivityDate;
                    record.StartDate= record.StartDateTime;
                });
                component.set("v.events3", records);
            }
        });
        $A.enqueueAction(action);
    },
    
})