0

I'm trying to implement fullcalender but I can't get the exemple data to show. I have been following this guide.

I get no errors but the events doesn't show in the calendar. I have tried different solutions but I can't get it to work, also my experience with json is very limited and i would appreciate some help.

    public class CalendarController : BaseController
    {

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

    public ActionResult GetMeetings(double start, double end)
    {
        using (var db = new ApplicationDbContext())
        {
            var fromDate = ConvertFromUnixTimestamp(start);
            var toDate = ConvertFromUnixTimestamp(end);

            var eventList = GetEvents();

            var rows = eventList.ToArray();
            return Json(rows, JsonRequestBehavior.AllowGet);
        }
    }

    private static DateTime ConvertFromUnixTimestamp(double timestamp)
    {
        var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
        return origin.AddSeconds(timestamp);
    }
            private List<Events> GetEvents()
    {
        List<Events> eventList = new List<Events>();

        Events newEvent = new Events
        {
            id = "1",
            title = "Event 1",
            start = DateTime.Now.AddDays(1).ToString("s"),
            end = DateTime.Now.AddDays(1).ToString("s"),
            allDay = false
        };

        eventList.Add(newEvent);

        newEvent = new Events
        {
            id = "1",
            title = "Event 3",
            start = DateTime.Now.AddDays(2).ToString("s"),
            end = DateTime.Now.AddDays(3).ToString("s"),
            allDay = false
        };

        eventList.Add(newEvent);

        return eventList;
    }


<head>

    @section scripts{
        <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
        <script src='lib/jquery.min.js'></script>
        <script src='lib/moment.min.js'></script>
        <script src='fullcalendar/fullcalendar.js'></script>
        <script type="text/javascript">

            $(document).ready(function () {
                $('#calendar').fullCalendar({
                    theme: true,
                    header: {
                        left: 'prev, next, today',
                        center: 'title',
                        right: 'month, agendaWeek, agendaDay'
                    },
                    buttonText: {
                        prev: '<',
                        next: '>'
                    },
                    defaultView: 'month',
                    editable: false,
                    weekMode: 'liquid',
                    //allDaySlot: false,
                    selectTable: true,
                    //slotMinutes: 15,
                    events: function (start, end, timezone, callback) {
                        $.ajax({
                            url: "/calendar/getmeetings/",
                            type: 'GET',
                            dataType: 'json',
                            success: function (start, end, timezone, callback) {
                                alert('success');
                            },
                            error: function (start, end, timezone, callback) {
                                alert('there was an error while fetching events!');
                            },
                            data: {
                                // our hypothetical feed requires UNIX timestamps
                                start: start.unix(),
                                end: end.unix()
                            }

                        });
                    }
                });
            });

        </script>
    }
</head>
<br />
<div class="jumbotron">
    <h1>Event Calendar</h1>
    <div id="calendar"></div>
</div>

Improve this question

2 Answers 2

Reset to default
2

You are not following the tutorial particularly closely, I note, and are using a different methodology to fetch the events.

Within that, you simply forgot to pass the event list back to fullCalendar. You need to execute the callback function which fullCalendar provided to you, and supply your events to it.

Your definition of "success" and "error"'s callback parameters are nonsense, btw - you need to check the jQuery $.ajax documentation (http://api.jquery.com/jquery.ajax/) to see what is provided:

success: function (response) { //response will contain the JSON data from the server
  callback(response); //pass the data to fullCalendar. You can pass "response" directly, assuming the response directly contains a JSON array of events
},
error: function(jqXHR) {
  alert(jqXHR.responseText);
}

See https://fullcalendar.io/docs/event_data/events_function/ for more details.

Improve this answer
0

You are not passing the events in a right way try passing the events my way its simple.If in case u still didn't get the calendar u need to check the console for some exception. Before passing the events u need the push the data to events.

event_array.push({
                                            userid: v.UserId,
                                            start: moment(v.LoginTime),
                                            //end: moment(v.LogoutTime)

                                            //start: moment(v.start),
                                            end: v.LogoutTime != null ? moment(v.LogoutTime) : null
                                            //color: v.themecolor,
                                            //allday: v.isfullday
                                        });

and then u need to call that in calender id for example

function GenerateCalender(event_array) {
                            debugger;
                            //$('#calender').fullCalendar('destroy');
                            $('#calender').fullCalendar({

                                events: event_array

                            });
                        }

This is my full code-

var event_array = [];

               var event_array = [];

                    var selectedEvent = null;
                    FetchEventAndRenderCalendar();
                    function FetchEventAndRenderCalendar() {
                        events = [];
                        $.ajax({
                            url: "/Home/GetEvents",
                            data: "",
                            type: "GET",
                            dataType: "json",
                            async: false,
                            cache: false,
                            success: function (data) {
                                alert("success");

                                $.each(data, function (i, v) {
                                    event_array.push({
                                        userid: v.UserId,
                                        start: moment(v.LoginTime),
                                        //end: moment(v.LogoutTime)

                                        //start: moment(v.start),
                                        end: v.LogoutTime != null ? moment(v.LogoutTime) : null
                                        //color: v.themecolor,
                                        //allday: v.isfullday
                                    });

                                })

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

                    function GenerateCalender(event_array) {
                        debugger;
                        //$('#calender').fullCalendar('destroy');
                        $('#calender').fullCalendar({

                            events: event_array

                        });
                    }
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.