How to populate modal form inputs properly onto FullCalendar in javascript?

I am coming to an issue where I am trying to place the form details onto the calendar but I am stuck on this area. For testing purposes when I click on submit I am alerting the form details in that view. However, I just want it to be place on the calendar, similar to Google Calendar. Thank you for the help.
PS: Let me know if you want to see the html form as well.

here is my code:

Javascript:

    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var myModal = new bootstrap.Modal(document.getElementById('schedule-edit'), {});
    var calendar = new FullCalendar.Calendar(calendarEl, {
        selectable: true,
        initialView: 'dayGridMonth',
        select: function(info, start, end, jsEvent) {
            myModal.show();
                if (info) {
               calendar.addEvent({
               title: title,
               start: info.startStr,
               end: info.endStr
               })
            calendar.unselect();
        },
    });
    calendar.render();
});

 function submitForm() {

        let title = document.getElementById("title").value || "";
        let project = document.getElementById("project").value || "";
        let time = document.getElementById("time").value || "";
        let timeSpent = document.getElementById("timeSpent").value || "";
        let description = document.getElementById("description").value || "";
        let editorS = document.getElementById("sampleeditor").value || "";
        let firstList = document.getElementById("firstList").value || "";
        let startDate = document.getElementById("myDate").value || "";
        let dueDate = document.getElementById("myDue").value || "";



        //for test only
       alert(title + project + time + timeSpent + description + editorS + firstList + startDate + dueDate);


    }