javascript - fullCalendar:从 Controller JSON 获取数据

Question

我在 Visual Studio 2015 中使用 fullCalendar 库。我无法通过 AJAX 命令填充事件。日历上没有填充任何事件。如果我只传递一个日期时间并设置 allDay = true，它将填充事件。我也需要它与时间一起工作，并且每天要处理多个事件。

JS代码:

$(document).ready(function () {

$(".calendar").fullCalendar
    ({
        header: {
            left: 'month,basicWeek,basicDay,today',
            center: 'title',
            right: 'prev,next'
        },
        weekends: false,
        eventLimit: true,
        theme: true,
        editable: false,
        fixedWeekCount: false,
        events: function(start, end, timezone, callback)
        {$.ajax
            ({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Calendar/GetCalendarEvents",
                dataType: 'json',
                success: function (data)
                {

                    var events = [];
                    $.each(data, function (index, value) {

                        events.push({
                            id: value['id'],
                            title: value['title'],
                            date: value['date']
                            //all data
                        });
                        console.log(value)
                    });
                    callback(events);
                },
                error: function (xhr, err) {
                    alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
                }
            });

        }   });})

注意:上面的代码是让它工作的可能尝试之一。我以前试过用不同的方式编码。

Controller 代码:

public ActionResult GetCalendarEvents()
    {
        var events = new List<VMCalendarEvents>();
        var db_events = db.PatientVisits.ToList();
        foreach(var e in db_events)
        {
            DateTime visit_start = Convert.ToDateTime(e.VisitStart);
            DateTime visit_end = Convert.ToDateTime(e.VisitEnd);

            var calEvent = new VMCalendarEvents
            {
                id = e.PatientVisitID.ToString(),
                title = "Placeholder Title" + e.PatientVisitID.ToString(),
                date = visit_start.ToShortDateString(),
                start = visit_start.ToString(),
                end = visit_end.ToString(),
                editable = true,
                allDay = false

            };
            events.Add(calEvent);
        }

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

Controller Code Output

JS Objects from Controller

编辑:问题已解决

所以经过一些调查，我决定在 MVC 中使用 Razor 来解决这个问题。我没有将它写入单独的 JS 文件，而是将其放入 html 文件的标题中。通过实现下面的代码，我能够以 (yyyy-MM-ddTHH:dd & MM/dd/yyyy hh:mm tt) 的日期格式获取对象:

    $(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2017-06-12',
        editable: true,
        events: '@Url.Action("GetCalendarEvents", "Calendar")',

    });

});

我使用 URL Action 命令调用了 Controller ，并将 JSON 数据作为 ActionResult 返回。

Answer 1

Fullcalendar 可能不喜欢您在日期字段中使用的斜杠“/”。请尝试使用连字符“-”。文档 ( https://fullcalendar.io/docs/utilities/Moment/ ) 更详细地介绍了日期/时间工作的格式。

作为引用，这是我使用来自 AJAX 的 JSON 的完整日历代码(请注意，我的事件没有结束时间，但这是我自己选择的):

{
    $.ajax({
        url: 'example.json',
        dataType: 'json',
        success: function(doc) {
            var events = [];
            $.each(doc, function(index, element) {
                events.push({
                    title: element.title,
                    start: element.time,
        url: element.url,

                });
            });
            callback(events);
        }
    }) //ajax
    }

和 JSON 文件(example.json):

    [
{"time": "2017-06-06 09:00:00", "title": "Get It Done in June ", "url": "http://example.org"},
{"time": "2017-06-07 14:00:00", "title": "Fighting Imposter Syndrome for Dissertating Students ", "url": "http://example.com"},
{"time": "2017-06-14 14:00:00", "title": "Entering into the Academic Conversation", "url": "http://example.biz"}
]