FullCalendar delete event with button

Question

I would like to start off my question with establishing exactly what I am using. I am using a jquery calendar app devlopped by Adam Shaw called FullCalendar.

Link: arshaw.com/fullcalendar/

I want to be able to add a delete feature, so that I can delete events by clicking a delete button inside each event, and send an ajax POST to tell a mysql database to DELETE where id equals the id of the event I just deleted. However, looking through the doccumentation, I have been unable to find a way to delete an event, yet alone anything to do with that and mysql databases. If anyone would be able to help that would be greatly appreciated! Thanks, in advance.

This is my code:

JAVASCRIPT

<script>
    var height = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 

    var newHeight = parseInt(height)-112;   

    $(document).ready(function() {



        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            allDay : false,
            slotMinutes: <?php echo $tee_inc; ?>,
            minTime: "<?php echo $tee_open; ?>",
            maxTime: "<?php echo $tee_close; ?>",
            height: newHeight,
            disableDragging: true,
            disableResizing: true,          
            defaultView: 'agendaDay',
            editable: true,
            events: [
                <?php
                    $i=-1;
                    foreach( $tee_time_start as $tts )  {
                        $i++;
                        echo '{'; echo "\n";
                        echo "id : '".$tee_time_id[$i]."',"; echo "\n";
                        echo "title : '".$tee_first_name[$i]." ".$tee_last_name[$i]." -- ".$tee_holes[$i]." Holes -- ".$tee_phone_number[$i]." ----- <a href=\"#\" id=\"delete_time_".$tee_time_id[$i]."\">Delete</a> ',"; echo "\n";
                        echo "start : '".$tee_time_start[$i]."',"; echo "\n";
                        echo "end : '".$tee_time_end[$i]."',"; echo "\n";   
                        echo 'allDay : false'; echo "\n"; 
                        echo '},'; echo "\n";
                    }

                ?>
            ],
            eventDrop: function(event, delta) {
                alert(event.title + ' was moved ' + delta + ' days\n' +
                    '(should probably update your database"+delta+")');
            },
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            },



        });

    });

</script>

Khawer Zeshan Khawer Zeshan · Accepted Answer · 2013-06-17T22:21:20

You can use the eventClick function. On click grab the event id and probably show a dialog box and provide delete button.

eventClick: function(calEvent, jsEvent, view) {

            id= calEvent.id;

            $( "#dialog" ).dialog({
                  resizable: false,
                  height:100,
                  width:500,
                  modal: true,
                  title: 'Want you want to do?',
                  buttons: {
                             CLOSE: function() {
                                 $("#dialog").dialog( "close" );
                             },
                             "DELETE": function() {
                                //do the ajax request?
                             }
                           }
             });
       },

Than in the <body> tag write this for dialog

<div id="dialog" title="" style="display:none;">Are you sure want to delete it?</div>

EXAMPLE LINK

FullCalendar delete event with button

3 Answers