fullcalendar.io无法正确显示

因此，我在我的ASP.NET MVC应用程序中的完整日历上遵循了一个教程。

我的日历控制器：

    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 };
            }
        }
    }
}

日历控制器的索引视图：

<!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>

最后我的Events.cs文件：

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; }
}

在跑步时的这一点上，我应该看到一个条目的完整日历。

我运行如下：http：//localhost：35080/calendar/getevents

，但我只是在观看事件如下：

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

我做错了什么明显的？

有人说这可能是因为我在加载日历视图之前没有登录应用程序，但是登录时也一样。

我在调试窗口中收到的错误是：

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)

是的，如上所述，似乎错误地拼写了两次函数名称'generatecalendar'。这就是导致日历不在索引视图中生成的原因。

相关内容

最新更新

热门标签：