Get data from jQuery Fullcalendar and pass it to controller

Question

I need to get the value of the id of the event chosen, when it's clicked. Once the dialog box is open, I have a link that will redirect to another page. I need to pass the eventid to the controller to use it to the redirected page.

I can't seem to resolve this issue, got it going for a week already.

Here's my script:

<script type='text/javascript'>
$(document).ready(function(){
    $('#calendar').fullCalendar({
        header : {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        allDay: false,
        events: "<?php echo site_url('home/calendarList') ?>",
    eventClick:  function(event, jsEvent, view) {
    //set the values and open the modal
    $("#startTime").html(moment(event.start));
    $("#startTime").html(moment(event.start).format('h:mm A'));
    $("#endTime").html(moment(event.start).add('hours',1).format('h:mm A'));
    $("#eventInfo").html(event.description);
    $("#eventIssue").html(event.issue);
    $("#eventrefid").html(event.id); //i need to pass the value of this 
                                     //to my controller and 
                                     //which will be used in another page
                                     //(no ajax needed if possible)
    $("#eventID").html(event.issue);
    $("#eventLink").attr('href', event.url);
    $("#eventContent").dialog({ modal: true, title: event.title });
    $(this).css('border-color', 'red');
    }
   });
});
</script>

And here is my HTML code:

<section>

    <div class="content" id="eventContent" title="Event Details" style="display:none;">

        <?= form_open('home/accomplish_appointment');?>

            <span style="font-weight: bold;">From:</span> <span id="startTime"></span><br>

            <span style="font-weight: bold;">To: <span id="endTime"></span>

            <hr>

            <span style="font-weight: bold;">Issue: <span id="eventIssue"></span><br>

            <span style="font-weight: bold;">Special Instruction: <span id="eventInfo"></span><br><br>

            <button class="fr submit small" type="submit" id="eventLink">Accomplish Appointment</button>

        <?= form_close();?>

    </div>

</section>

Answer 1

try to pass the eventid using the code bellow. It submits the form which sends the eventid to home/accomplish_appointment :

in jquery code add this to assign the event id to the hidden input of the form:

$("#eventID").val($("#eventrefid").html(event.id));

and in the html:

<?= form_open('home/accomplish_appointment');?>
<input type="hidden" id="eventID" name="eventid" />
<span style="font-weight: bold;">From:</span> <span id="startTime"></span><br>
<span style="font-weight: bold;">To: <span id="endTime"></span>
<hr>
<span style="font-weight: bold;">Issue: <span id="eventIssue"></span><br>
<span style="font-weight: bold;">Special Instruction: <span id="eventInfo"></span><br><br>
<button class="fr submit small" type="submit" id="eventLink">Accomplish Appointment</button>
<?= form_close();?>