How to get clicked event id and navigate to ASPX page with those details? (FullCalendar)

Question

I'm developing hybrid project where I'm using FullCalendar under MVC, but Webforms for all the other pages. When I click an event, it shows the details of it normally. No issues about it. I just added a button 'More Details' in the 'eventClick' modal where I can jump to an ASPX page displaying the details of the event in a more detail form. I've been trying to figure, but I can't seem to find a way. Any suggestion?

Picture of 'eventClick' Modal

@section Scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

<script>
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "GET",
            url: "/home/GetEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        title: v.EquipID,
                        modelno: v.ModelNo,
                        description: v.ModelDesc,
                        caltype: v.CalType,
                        start: moment(v.EquipApprovedDate),
                        end: v.EquipCalDueDate != null ? moment(v.EquipCalDueDate) : null,
                        color: v.ThemeColor,
                        allDay: v.IsFullDay
                    });
                })

                GenerateCalender(events);
            },
            error: function (error) {
                alert('failed');
            }
        })

        function GenerateCalender(events) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                contentHeight: 400,
                defaultDate: moment('@(ViewBag.eqStartDate)'),
                timeFormat: 'h(:mm)a',
                displayEventTime: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,agenda'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: events,
                eventClick: function (calEvent, jsEvent, view) {
                    $('#myModal #eventTitle').text(calEvent.title);
                    var $description = $('<div/>');
                    $description.append($('<p/>').html('<b>Model No: </b>' + calEvent.modelno));
                    $description.append($('<p/>').html('<b>Description: </b>' + calEvent.description));
                    $description.append($('<p/>').html('<b>Cal Type: </b>' + calEvent.caltype));
                    $description.append($('<p/>').html('<b>Start: </b>' + calEvent.start.format("DD-MMM-YYYY")));
                    if (calEvent.end != null) {
                        $description.append($('<p/>').html('<b>End: </b>' + calEvent.end.format("DD-MMM-YYYY")));
                    }
                    $('#myModal #pDetails').empty().html($description);

                    $('#myModal').modal();
                },
                eventRender: function eventRender(events, jsEvent, view) {
                    return ['all', events.title].indexOf($('#type_selector').val()) >= 0
                }
            });
            $('#type_selector').on('change', function () {
                $('#calendar').fullCalendar('removeEventSource', events);
                $('#calendar').fullCalendar('addEventSource', events);
                $('#calendar').fullCalendar('refetchEvents');
            });
        }
    })
</script>}

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><span id="eventTitle"></span></h4>
        </div>
        <div class="modal-body">
            <p id="pDetails"></p>
        </div>
        <div class="modal-footer">
        <a type="button" class="btn btn-default" href="" onclick="this.href = 'EqDetails.aspx?idid=' + document.getElementById('eventTitle').value">More Details</a>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

Answer 1

I made a example for a other scenario but you can also use the same way to read out the value to display data you need. You have to handle the Page_Load part

And then to use the href to go to the page should be

<a type="button" class="btn btn-default" href="javascript:;" onclick="javascript:document.location.href='EqDetails.aspx?id='+document.getElementById('eventTitle').innerHTML">More Details</a>