FullCalendar failing after many to many relationship

Question

I have a FullCalendar calendar in my C# ASP.NET MVC application.

It keeps track of ceremonies on this calendar. My problem comes when I introduce a Many-Many relationship in the form of Volunteers. Firstly, I create a Ceremony and when it is created, a Volunteer can apply to be part of this. This then sets up the Many-Many relationship. I have a collection of Ceremonies/Appointments in my Volunteer entity and a collection of Volunteers in my Ceremonies/Appointments entity.

I am using AJAX to make a call and then generate my Calendar using jQuery. It all works fine until a Volunteer is put in the Ceremony. It hits the "failed" exception.

Here's the ajax and jQuery:

 $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "GET",
            url: "/home/GetEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        details: v.DetailsOfAppointment,
                        date: moment(v.DateOfAppointment),
                        room: v.RoomType,
                        confirmed: v.Confirmed,
                        colour: v.ThemeColour,
                        church: v.Church.Name,
                        parishAdmin: v.Admins.AdministratorName,
                        fee: v.Fee,
                        volunteers: v.Volunteers,
                        id: v.AppointmentId
                    });
                })

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

        function GenerateCalender(events) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                contentHeight: 400,
                defaultDate: new Date(),
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,agenda'
                },

                timeFormat: 'HH:mm',
                eventLimit: true,
                eventColor: events.ThemeColour,
                events: events,
                eventRender: function (event, element) {
                    if (event.fee == null) {
                        if (event.confirmed == false) {
                            element.css('background-color', '#FF0000');
                            element.css('border-color', '#FF0000');
                        }
                        else {
                            element.css('background-color', '#008000');
                            element.css('border-color', '#008000');
                        }
                    }
                    else
                    {
                        element.css('background-color', '#0000FF');
                        element.css('border-color', '#0000FF');

                    }
                },
                eventClick: function (calEvent, jsEvent, view) {
                    $('#myModal #details').text(calEvent.details);
                    var $details = $('<div/>');

                    if (calEvent.fee != null) {
                        $details.append($('<p/>').html('<b>Date of Ceremony : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    else {
                        $details.append($('<p/>').html('<b>Date of Appointment : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    if (calEvent.end != null) {
                        $details.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                    }
                    $details.append($('<p/>').html('<b>Details : </b>' + calEvent.details));
                    $details.append($('<p/>').html('<b>Church Name : </b>' + calEvent.church));
                    if (calEvent.fee == null) {
                        if (calEvent.room != null) {
                            $details.append($('<p/>').html('<b>Room : </b>' + calEvent.room));
                        }
                        else {
                            $details.append($('<p/>').html('<b>Room Not Confirmed'));
                        }
                    }


                    $details.append($('<p/>').html('<b>Parish Admin : </b>' + calEvent.parishAdmin));
                    if (calEvent.confirmed == true)
                    {
                        $details.append($('<p/>').html('<b>Status : Confirmed </b>'));
                    }
                    else
                    {
                        $details.append($('<p/>').html('<b>Status : Not Confirmed </b>'));
                    }
                    $('#myModal #pDetails').empty().html($details);

                    $('#myModal').modal();
                }

            })

And my Controller method:

public ActionResult Calendar()
    {
        return View();
    }

    public JsonResult GetEvents()
    {
        var events = db.Appointments.ToList();
        return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

I really am at a loss at why this doesn't work when the Many-Many is implemented.

EDIT I followed a comment and it said to put down "console.log(error)".

The following error is
System.InvalidOperationException: A circular reference was detected while serializing an object of type 'System.Data.Entity.DynamicProxies.Appointments_DD2BA60022298BD962BA42C10070838837448B4D4CB6D1E87C726B5CA59FCD7B'.

I have changed the ToList() method in my controller to

    var events = db.Appointments.AsNoTracking().ToList();
  return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };`