FullCalendar.io not displaying correctly

Question

So I've followed a tutorial on full calendar within my asp.net mvc application.

My Calendar controller:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace Bookings.Controllers
    {
        public class CalendarController : Controller
        {
            BookingsModel.ModelBookings db = new BookingsModel.ModelBookings();
            // GET: Calendar
            public ActionResult Index()
            {
                return View();
            }

            public JsonResult GetEvents() {
                using (BookingsModel.ModelBookings db = new BookingsModel.ModelBookings()) {


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

The index view of the calendar controller:

<!DOCTYPE html>
<html>
<head>
    @{
        ViewBag.Title = "Index";
    }

    <h2>Index</h2>
    <div id="calendar"></div>


    <link href="~/Content/fullcalendar-3.9.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar-3.9.0/fullcalendar.print.css" rel="stylesheet" media="print" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <!-- qTip -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" />

    <!-- Full Calendar -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print" />

    @section scripts{
        <script src="~/Content/fullcalendar-3.9.0/moment.min.js"></script>
        <script src="~/Content/fullcalendar-3.9.0/fullcalendar.min.js"></script>

        <script>

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

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

                function FenerateCalendar(events) {
                    $('#calendar').fullCalendar('destroy');
                    $('#calendar').fullCalendar({
                        contentHeight: 400,
                        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
                    })
                }
            })
        </script>
    }
    </head>
</html>

and finally my Events.cs file:

public class Events
{
    [Key]
    public int EventID { get; set; }
    public String Subject { get; set; }
    public String Description { get; set; }
    public DateTime start { get; set; }
    public DateTime End { get; set; }
    public String ThemeColor { get; set; }
    public bool? IsFullDay { get; set; }
}

At this point in the tutorial when ran I should see the full calendar with one entry.

I run as follows: http://localhost:35080/Calendar/GetEvents

but I simply get the event viewing as follows:

[{
    "EventID": 1,
    "Subject": "Birthday of a friend",
    "Description": "Birthday",
    "start": "\/Date(1498456800000)\/",
    "End": "\/Date(1498467600000)\/",
    "ThemeColor": "green",
    "IsFullDay": true
}]

Is there anything obvious that I'm doing wrong?

Someone said it may be because i was not logging into my application before loading the calendar view, however its the same when logged in.

The error I'm receiving in the debug window is:

Index:103 Uncaught ReferenceError: Generatealendar is not defined
    at Object.success (Index:103)
    at i (VM52 jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (VM52 jquery-3.2.1.min.js:2)
    at A (VM52 jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (VM52 jquery-3.2.1.min.js:4)

Answer 1

Yes, As said above it appears that the function name 'GenerateCalendar' is spelled incorrectly twice. This is what caused the calendar not to be generated within the index view.

FullCalendar.io not displaying correctly

Question

1 answers

solution1
0 ACCPTED 2018-03-28 12:15:35

FullCalendar.io not displaying correctly

Question

1 answers

solution1 0 ACCPTED 2018-03-28 12:15:35

solution1
0 ACCPTED 2018-03-28 12:15:35