I was following a tutorial online implementing Full Calendar into my project.

This is the DeleteEvent:

        public JsonResult GetEvents()
    {
        using (_context)
        {
            var events = _context.CalendarEvents.ToList();
            return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

    [HttpPost]
    public JsonResult SaveEvent(CalendarEvents e)
    {
        var status = false;
        using (_context)
        {
            if (e.CalendarID > 0)
            {
                //Update the event
                var v = _context.CalendarEvents.Where(a => a.CalendarID == e.CalendarID).FirstOrDefault();
                if (v != null)
                {
                    v.CalendarID = e.CalendarID;
                    v.Subject = e.Subject;
                    v.Start = e.Start;
                    v.End = e.End;
                    v.Description = e.Description;
                    v.ThemeColor = e.ThemeColor;
                }
            }
            else
            {
                _context.CalendarEvents.Add(e);
            }

            _context.SaveChanges();
            status = true;

        }
        return new JsonResult { Data = new { status = status } };
    }

    [HttpPost]
    public JsonResult DeleteEvent(int eventID)
    {
        var status = false;
        using (_context)
        {
            var v = _context.CalendarEvents.FirstOrDefault(a => a.CalendarID == eventID);
            if (v != null)
            {
                _context.CalendarEvents.Remove(v);
                _context.SaveChanges();
                status = true;
            }
        }
        return new JsonResult { Data = new { status = status } };
    }

This is the JS:

        $(document).ready(function() {
        var events = [];
        var selectedEvent = null;
        FetchEventAndRenderCalendar();

        function FetchEventAndRenderCalendar() {
            events = [];
            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function(data) {
                    $.each(data,
                        function(i, v) {
                            events.push({
                                eventID: v.EventID,
                                title: v.Subject,
                                description: v.Description,
                                start: moment(v.Start),
                                end: v.End != null ? moment(v.End) : null,
                                color: v.ThemeColor,
                                allDay: v.IsFullDay
                            });
                        })

                    GenerateCalender(events);
                },
                error: function(error) {
                    alert('failed');
                }
            })
        }

        function GenerateCalender(events) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                contentHeight: 680,
                defaultDate: new Date(),
                timeFormat: 'h(:mm)a',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,agenda'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: events,
                eventClick: function(calEvent, jsEvent, view) {
                    selectedEvent = calEvent;
                    $('#myModal #eventTitle').text(calEvent.title);
                    var $description = $('<div/>');
                    $description.append($('<p/>').html('<b>Start:</b>'   calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                    if (calEvent.end != null) {
                        $description.append($('<p/>').html('<b>End:</b>'   calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                    }
                    $description.append($('<p/>').html('<b>Description:</b>'   calEvent.description));
                    $('#myModal #pDetails').empty().html($description);

                    $('#myModal').modal();
                },
                selectable: true,
                select: function(start, end) {
                    selectedEvent = {
                        eventID: 0,
                        title: '',
                        description: '',
                        start: start,
                        end: end,
                        allDay: false,
                        color: ''
                    };
                    openAddEditForm();
                    $('#calendar').fullCalendar('unselect');
                },
                editable: true,
                eventDrop: function(event) {
                    var data = {
                        EventID: event.eventID,
                        Subject: event.title,
                        Start: event.start.format('DD/MM/YYYY'),
                        End: event.end != null ? event.end.format('DD/MM/YYYY') : null,
                        Description: event.description,
                        ThemeColor: event.color,
                        IsFullDay: event.allDay
                    };
                    SaveEvent(data);
                }
            })
        }

        $('#btnEdit').click(function() {
            //Open modal dialog for edit event
            openAddEditForm();
        })
        $('#btnDelete').click(function() {
            console.log(selectedEvent);
            if (selectedEvent != null && confirm('Are you sure?')) {
                $.ajax({
                    type: "POST",
                    url: '/home/DeleteEvent',
                    data: { 'eventID': selectedEvent.eventID },
                    success: function(data) {
                        if (data.status) {
                            //Refresh the calender
                            FetchEventAndRenderCalendar();
                            $('#myModal').modal('hide');
                        }
                    },
                    error: function() {
                        alert('Failed');
                    }
                });
            }
        });

        $('#dtp1,#dtp2').datetimepicker({
            format: 'DD/MM/YYYY HH:mm A'
        });

        $('#chkIsFullDay').change(function() {
            if ($(this).is(':checked')) {
                $('#divEndDate').hide();
            } else {
                $('#divEndDate').show();
            }
        });

        function openAddEditForm() {
            console.log(selectedEvent);
            if (selectedEvent != null) {
                $('#hdEventID').val(selectedEvent.eventID);
                $('#txtSubject').val(selectedEvent.title);
                $('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY'));
                $('#chkIsFullDay').prop("checked", selectedEvent.allDay || false);
                $('#chkIsFullDay').change();
                $('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY') : '');
                $('#txtDescription').val(selectedEvent.description);
                $('#ddThemeColor').val(selectedEvent.color);
            }
            FetchEventAndRenderCalendar();
            $('#myModal').modal('hide');
            $('#myModalSave').modal();
        }

        $('#btnSave').click(function() {
            //Validation/
            if ($('#txtSubject').val().trim() == "") {
                alert('Subject required');
                return;
            }
            if ($('#txtStart').val().trim() == "") {
                alert('Start date required');
                return;
            }
            if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
                alert('End date required');
                return;
            } else {
                var startDate = moment($('#txtStart').val(), "DD/MM/YYYY").toDate();
                var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY").toDate();
                if (startDate > endDate) {
                    alert('Invalid end date');
                    return;
                }
            }

            var data = {
                EventID: $('#hdEventID').val(),
                Subject: $('#txtSubject').val().trim(),
                Start: $('#txtStart').val().trim(),
                End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
                Description: $('#txtDescription').val(),
                ThemeColor: $('#ddThemeColor').val(),
                IsFullDay: $('#chkIsFullDay').is(':checked')
            }
            SaveEvent(data);
            // call function for submit data to the server
        })

        function SaveEvent(data) {
            $.ajax({
                type: "POST",
                url: '/home/SaveEvent',
                data: data,
                success: function(data) {
                    if (data.status) {
                        //Refresh the calender
                        FetchEventAndRenderCalendar();
                        $('#myModalSave').modal('hide');
                    }
                },
                error: function() {
                    alert('Failed');
                }
            })
        }
    })
            

When running I had Fiddler open and it is just running the DeleteEvent but the ID is not there, with console.log(selectedEvent); all the data is there except the ID.

Any help would be great!

Thanks

CodePudding user response：

Looks like I should have just taken a break, the issue eventID needed to be CalendarID. Thanks for taking a look ADyson.