Fullcalendar: Delete event on button click in dayGrid view

Question

I am trying to delete events on button click using:

    eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        },

but it deletes all events in the calendar instead of clicked event. I've tried other solutions provided but they are either with list item view or dayagenda view (timeGrid in v4) while I am using month view (dayGrid) only. My js of fullcalendar is as follows:


    <script src="{{ URL::asset('fullcalendar/packages/core/main.js') }}"></script>
    <script src="{{ URL::asset('fullcalendar/packages/interaction/main.js') }}"></script>
    <script src="{{ URL::asset('fullcalendar/packages/daygrid/main.js') }}"></script>
    <script src="{{ URL::asset('moment/moment.js') }}"></script>
    <script src="{{ URL::asset('js/jQuery.min.js') }}"></script>
    <script>
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'bootstrap' ],
        themeSystem: 'bootstrap',
         header: {
        left: false,
        center: 'title',
        },
        defaultView: 'dayGridMonth',
        validRange: {
          start: '2019-08-26',
          end: '2019-09-26',
        },   
        selectable: true,
        editable  : true,
        droppable : true,
        eventSources: [
          {
            url: '{{"roster/getEvents"}}',
            allDay: false,
            allDayMaintainDuration: false,
            textColor: 'black',

          },
          {
            url: '{{"roster/getGazette"}}',
            editable: false,
            overlap: false,
          },
        ],
      });

    calendar.render();
    });
    </script>

Note: I've also tried using dialog like this:

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?
                             }
                           }
             });
       },

but it gives "typeerror $(...).dialog is not a function" upon click.

I am using fullcalendar in laravel so i dont know if it is possible to create fiddle for it. — Raza Zaidi
Look jsfiddle.net/tpde8Luw/1 button deletes only chosen event — Mat.Now
Ok well firstly you should make sure you only use code samples and documentation relating to version 4, otherwise you will get stuck all the time. Version 3 is very different and most code for it will not work in version 4 without changes. — ADyson
You can add the answer below. Then it helps others with a similar issue, and the rest of us can vote on it (which will get you reputation points) :-) — ADyson

Raza Zaidi Raza Zaidi · Accepted Answer · 2019-09-12T10:32:16

Solution: first i corrected my code, i was using fullCalendar v4 libraries and i was using v3 functions which created conflict. Then i used bootsrap modal in html and called it in JS. At last i used Ajax call to delete events Code is as follows:

        $(document).ready(function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'bootstrap'],
        themeSystem: 'bootstrap',
         header: {
        left: false,
        center: 'title',
          },
        defaultView: 'dayGridMonth',
        validRange: {
          start: '2019-08-26',
          end: '2019-09-26',
          },   
        selectable: true,
        editable  : true,
        droppable : true,
          eventClick: function(info) {
            id = info.event.id;
            $("#myModal").modal();

            window.deleteRecord=function() {
              $.ajax({
                    headers: {
                      'X-CSRF-TOKEN': $('meta[name="edit-token"]').attr('content')
                    },
                    type: "POST",
                    url: "{{route('deleteRecord')}}",
                    data: JSON.stringify(id),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
              }).done( function(data){
                  console.log('Ajax was Successful!');
                  console.log(data); 
                  location.reload(true); 

              }).fail(function(data){
                  console.log('Ajax Failed');
              });
            }
          },
        eventSources: [
              {
                url: '{{"roster/getEvents"}}',
                allDay: false,
                allDayMaintainDuration: false,
                textColor: 'black',
              },
              {
                url: '{{"roster/getGazette"}}',
                editable: false,
                overlap: false,
              },
            ],
          });
        calendar.render();
        });

Fullcalendar: Delete event on button click in dayGrid view

1 Answers