Full calendar, a button to update events

I'm trying to make full calendar refresh the data by a button, I enter the records in a separate form, but when I enter the calendar I have to press F5 in the browser to show the Last events entered, I tried with this code javascript but it does not work:

 $('#refresh_cal').puibutton();
        $("#zdk_cal_act .bt-refresh_cal").click(function () {

             $("#calendar").fullCalendar("refetchEvents");
        });

Any suggestions? I enter the events by json .

I have the code as shown below:

<script>
    $(document).ready(function () {

        $('#calendar').fullCalendar({

            header: {

                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },

            defaultDate: '<?php echo date('Y-m-d'); ?>',
            defaultView:'listMonth',
            editable: false,
            navLinks: true,
            timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
            weekNumbers: true,
            weekNumbersWithinDays: true,
            weekNumberCalculation: 'ISO',
            businessHours: true,
            eventLimit: true, // allow "more" link when too many events
            events: <?php echo json_encode($thejson); ?>

        });

    });

</script>

<script>
    $('#refresh_cal').puibutton();
    $("#zdk_cal_act .bt-refresh_cal").click(function () {
        $("#calendar").fullCalendar("refetchEvents");

    });
</script>
<div class="card-content table-responsive" id="zdk_cal_act" >
    <button class="bt-refresh_cal" id="refresh_cal">Actualizar</button>
    <div id="calendar"></div>
</div>

Greetings