Show User Specific Events on FullCalendar

Question

I have an application at the moment that has Appointments that involve one Administrator. I am currently displaying a FullCalendar with all of the appointments listed.

I would like to have it so when an Admin logs in, they can only see their own appointments. Just a note, I have a UserProfile table containing Usernames & Passwords and an Admin table containing details. Their Usernames correspond, I do a LINQ check to show this.

Here is my Server Side Code:

public JsonResult GetEvents()
    {
        string username = Membership.GetUser().UserName;

        var getAdmin = (from a in db.Admins
                        where username == a.AdminUsername
                        select a.AdministrationId).SingleOrDefault();


        var events = (from a in db.Appointments
                      where getAdmin == a.AdministrationId
                      select a).ToList();

        return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

    }

I have debugged this and I am getting the correct values, the Username equals the name in the database and the count of the events = what they should be.

However when I run it, it just gives me every appointment in the database.

Here's my FullCalendar:

$(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,
                        parishAdminName: v.Admins.AdministratorName,
                        parishAdminId: v.Admins.AdministratorId,
                        fee: v.Fee,
                        id: v.AppointmentId
                    });

                })

                GenerateCalender(events);
            },
            error: function (error) {
                alert("failed");
                console.log(error);
            }
        })

        function GenerateCalender(events) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                contentHeight: 500,
                defaultDate: new Date(),
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                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.parishAdminName));
                    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();
                }

            })
        }
    })

I genuinely don't know what to do here as I'm getting nowhere!

Basically `events` array should contain `title`, 'start', 'end` keys. By looking at your example, you are setting none of these keys. https://fullcalendar.io/docs/events-array — Kiran Shinde, Mar 13 '18 at 04:39
How is that relevant @Kenny. That doesn't seem like it will fix my problem — Chloe Finn, Mar 13 '18 at 10:41

score 0 · Answer 1 · answered Mar 13 '18 at 11:21

0

In your ajax request launched when the document is ready, you have to pass the information that allows the server to identify the client. If it is cookie based, it should be passed by ajax, but you can check that in the log of http requests on your browser. If it is not cookie based (eg. http basic authentication), then you should pass the authentication in the ajax header: see e.g. 1

answered Mar 13 '18 at 11:21

Jean-Marc Andreoli

1

So you're telling me that my server side is okay. Also I don't particularly know how to do that – Chloe Finn Mar 13 '18 at 11:42

score 0 · Answer 2 · answered Mar 13 '18 at 13:42

I have no idea how your server side work, but I suspect the instruction

username = Membership.GetUser().UserName

retrieves a user name from the request. So your ajax request must contain the information about the user. It won't have it by default unless 1- user identification is cookie based (typically through a session cookie), 2- the page containing your calendar is delivered by the same server as that processing GetEvents (otherwise the cookie is not forwarded).

I don't have cookies set up – Chloe Finn Mar 13 '18 at 18:10 — Chloe Finn, Mar 13 '18 at 18:10

Show User Specific Events on FullCalendar

2 Answers2