Understanding Fullcalendar Event Deletion

I am using fullcalendar v3.9.0.

move
·You can add an event from the schedule list on the left and drag and drop it to the date.
·You can delete the schedule by double-clicking on the schedule you put in the date

What's troubling you
·You can delete the schedule by double clicking, but if you drag and drop other plans after they disappear, the schedule that should have disappeared will be restored.
Example: Delete the schedule for January 7th → Add an event to a different date → Include an event for January 7th that should have been deleted at the same time as the event you put in.

add
I changed the code for deletion to the one below, but this time even if I added a new schedule, it still disappeared.
When I deleted it, all other plans that I didn't select disappeared...

Additional code↓

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// Double-click to delete schedule (not complete)
				eventRender: function(event, element) {
    				(element).bind('dblclick', function(){
						if(!confirm('Are you sure you want to delete it?')){
							return false;
						} else {
      						$('#calendar').fullCalendar("removeEvents", event.id);
						}
   				 });
				},

Original Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).ready(function(){

    // Initialize external events
    // -----------------------------------------------------------------
    $('#external-events.fc-event').each(function(){
        // Save data so that the calendar can render events when dropped.
        $(this).data('event',{
            title: $.trim($(this).text()) , // Use element text as event title
            stick : true // maintained when the user navigates (see renderEvent method)
        });

        // Use the jQuery UI to Make Events Dragable
        $(this).draggable({
            zIndex: 999,
            revert —Returns the true, // event to its original state.
            revertDuration: 0 // Original location after dragging
        });
    });

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

        // Double-click to delete schedule (not complete)
        eventRender: function(event, element) {
            (element).bind('dblclick', function(){
                if(!confirm('Are you sure you want to delete it?')){
                    return false;
                } else {
                    $(this).remove();
                }
            });
        },

        height:550,
            firstDay: 1,
        lang: "ja",
        selectable: true,
        selectHelper: true,
        select:function(start,end){
            var title=prompt("Expected Title:");
            variable eventData;
            if(title){
                eventData={
                    title: title,
                    start —Start,
                    end —end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true);//stick?=true
            }
            $('#calendar').fullCalendar('unselect');
        },
        dropable —true, // This allows you to drop things into the calendar
        editable: true,
        eventLimit: true, 

    });

});

jquery fullcalendar

2022-09-30 19:45

2 Answers

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

			// Double-click to delete schedule (not complete)
				eventRender:function(calEvent,jsEvent,view){
    				(jsEvent).bind('dblclick', function(){
						if(!confirm('Are you sure you want to delete it?')){
							return false;
						} else {
      						$('#calendar') .fullCalendar("removeEvents", calEvent._id);
						}
   				 });
				},

2022-09-30 19:45

https://fullcalendar.io/docs/v3/removeEvents

.fullCalendar('removeEvents' [,idOrFilter])

To delete the specified event, you can delete it by adding id or filter to the second argument.

First of all, I recommend that you check the official reference.

2022-09-30 19:45

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656