Question

所以我在我的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; }
}

在教程中的这一点上，当我跑步时，我应该看到包含一个条目的完整日历。

我运行如下：

但我只是按如下方式查看事件：

[{
    "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)

Answer 1

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

FullCalendar.io无法正确显示

1 个答案: