how to add an event to a full calendar using a modal in type script

i have used a materialize-calendar to add in a full calendar as follows. i have hard coded in the data in type script and i can add events

<div class="card-content">
<materialize-calendar initial-view.bind="'dayGridMonth'" events.bind="events" ></materialize-calendar>
</div>
export class Calendar extends Component {
events = [{
        id: 'a',
        title: 'my event',
        start: '2020-09-14',
        allDay: true
    }]; }

the above will add my events when the page is loaded. i am trying to add a modal that when i click submit it should add the event from that form. But i am not sure how to bind the HTML to the events

this is what i have

<i class="material-icons" click.delegate="openaddEventModal()">add_circle_outline</i>
<div md-modal.ref="addEventModal">
        <div class="modal-content">
            <h4>Add Event</h4>
            <div>
                <md-input label="Title"></md-input> //how do i bind the title to the submit 
            </div>
        </div>
        <div class="modal-footer">
            <a  class="modal-action" click.delegate="submitAddEvent()">Submit</a>
            
        </div>
    </div>

in my ts page

import { MdModal} from "aurelia-materialize-bridge";
export class Calendar extends Component {
    public addEventModal: MdModal;

    async openaddEventModal() {
        
        this.addEventModal.open();
    }
async submitAddEvent() {}
}

how do i bind the modal to an event? i have searched the internet but i cant find how to do this with materialize and ts,please help