ASP.Net MVC: Open Bootstrap Modal with details on jQuery FullCalender Edit Button Click

I have a form to edit the fields and it is suppose to open when i click the edit button but it is opened empty when clicking on the box (day) that has the event and I have to close it then click Edit button to open the form again to edit the content.

How to fix this?

function GenerateCalender(events) {
    $('[id*=calender]').fullCalendar('destroy');
    $('[id*=calender]').fullCalendar({
        showNonCurrentDates: false,
        fixedWeekCount: false,
        contentHeight: 550,
        handleWindowResize: true,
        themeSystem: 'bootstrap3',
        defaultDate: new Date(),
        timeFormat: 'h(:mm)a',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay,agenda'
        },
        eventLimit: true,
        eventColor: '#378006',
        events: events,
        eventClick: function (calEvent, jsEvent, view) {
            selectedEvent = calEvent;
            $('[id*=myModal] [id*=eventTitle]').text(calEvent.title);
            var $description = $('<div/>');
            $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
            if (calEvent.end != null) {
                $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
            }
            $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
            $('[id*=myModal] [id*=pDetails]').empty().html($description);
            $('[id*=myModal]').modal();
        },
        selectable: true,
        select: function (start, end) {
            selectedEvent = {
                eventid: 0,
                title: '',
                description: '',
                start: start,
                end: end,
                allDay: false,
                color: ''
            };
            openAddEditForm();
            $('#calendar').fullCalendar('unselect');
        },
        editable: true,
        eventDrop: function (event) {
            var data = {
                eventid: v.EventId,
                title: v.theSubject,
                description: v.theDescription,
                start: moment(v.theStart),
                end: v.theEnd != null ? moment(v.theEnd) : null,
                color: v.theThemeColor,
                allDay: v.theIsFullDay
            };
            SaveEvent(data);
        }
    })
}
$('#btnEdit').click(function () {
    //Open modal dialog for edit event
    openAddEditForm();
})
$('#btnDelete').click(function () {
    if (selectedEvent != null && confirm('Are you sure you want to delete this event?')) {
        console.log(selectedEvent);
        $.ajax({
            type: "POST",
            url: '/home/DeleteEvent',
            data: { 'EventID': selectedEvent.eventid },
            success: function (data) {
                if (data.status) {
                    //Refresh the calender
                    FetchEventAndrendarCalendar();
                    $('#myModal').modal('hide');
                }
            },
            error: function () {
                alert('Failed');
            }
        })
    }
})
$('#dtp1,#dtp2').datetimepicker({
    format: 'DD/MM/YYYY HH:mm A'
});
$('#chkIsFullDay').change(function () {
    if ($(this).is(':checked')) {
        $('#divEndDate').hide();
    }
    else {
        $('#divEndDate').show();
    }
});
 
function openAddEditForm() {
    if (selectedEvent != null) {
        $('#hdEventID').val(selectedEvent.eventid);
        $('#txtSubject').val(selectedEvent.title);
        $('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A'));
        $('#chkIsFullDay').prop("checked", selectedEvent.allDay || false);
        $('#chkIsFullDay').change();
        $('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : '');
        $('#txtDescription').val(selectedEvent.description);
        $('#ddThemeColor').val(selectedEvent.color);
    }
    $('#myModal').modal('hide');
    $('#myModalSave').modal();
}
$('#btnSave').click(function () {
    //Validation/
    if ($('#txtSubject').val().trim() == "") {
        alert('Subject required');
        return;
    }
    if ($('#txtStart').val().trim() == "") {
        alert('Start date required');
        return;
    }
    if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
        alert('End date required');
        return;
    }
    else {
        var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
        var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
        if (startDate > endDate) {
            alert('Invalid end date');
            return;
        }
    }
 
    var data = {
        EventID: $('#hdEventID').val(),
        theSubject: $('#txtSubject').val().trim(),
        theStart: $('#txtStart').val().trim(),
        theEnd: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
        theDescription: $('#txtDescription').val(),
        theThemeColor: $('#ddThemeColor').val(),
        theIsFullDay: $('#chkIsFullDay').is(':checked')
    }
    console.log($('#txtSubject'));
    SaveEvent(data);
    // call function for submit data to the server
})
function SaveEvent(data) {
    $.ajax({
        type: "POST",
        url: '/home/SaveEvent',
        data: data,
        success: function (data) {
            if (data.status == true) {
                //Refresh the calender
                FetchEventAndrendarCalendar();
                $('#myModalSave').modal('hide');
            }
        },
        error: function () {
            alert('Failed');
        }
    })
}