jquery - FullCalendar 不加载事件

Question

我在我的 asp.net mvc 应用程序中使用 FullCalendar。它不加载事件。我通过 ajax 调用获取事件列表。下面是我的代码。这是什么问题？

<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">
                <div id="calendar"></div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript">
    jQuery.extend({
        getValues: function (url) {
            var result = null;
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (data) {
                    result = data;
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            });
            return result;
        }
    });
    var jsonEvents = $.getValues('@Url.Action("GetEvents", "Booking")');
    alert(jsonEvents);

    //var jsonEvents = [{ title: "Dhaval, (4,6), 6", start: "05/21/2016 1:05:00 PM" },
    //    { title: "Mohit, (2), 4", start: "05/21/2016 1:05:00 PM" }]

    $('#calendar').fullCalendar({
        header:
        {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        allDay: true,
        defaultView: 'agendaWeek',
        events: jsonEvents//'@Url.Action("GetEvents", "Booking")'
    });
</script>

**注释中的js只是示例格式。 ** GetEvents/Controller 如下，

public Json GetEvents()
{
    string query = "query to get events";
    // columns in result table are: id, title, date
        try
        {
            SqlConnection connection = new SqlConnection("connectionString");
            connection.Open();
            SqlCommand command = new SqlCommand(query, connection);
            SqlDataReader events = command.ExecuteReader();
            DataTable dt = new DataTable();
            dt.Load(events);
            string result = DataTableToJSONWithStringBuilder(dt);
            connection.Close();
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex) { }
    }
public string DataTableToJSONWithStringBuilder(DataTable table)
    {
        var JSONString = new StringBuilder();
        if (table.Rows.Count > 0)
        {
            JSONString.Append("[");
            for (int i = 0; i < table.Rows.Count; i++)
            {
                JSONString.Append("{");
                for (int j = 0; j < table.Columns.Count; j++)
                {
                    if (j < table.Columns.Count - 1)
                    {
                        JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\",");
                    }
                    else if (j == table.Columns.Count - 1)
                    {
                        JSONString.Append(table.Columns[j].ColumnName.ToString() + ":" + "\"" + table.Rows[i][j].ToString() + "\"");
                    }
                }
                if (i == table.Rows.Count - 1)
                {
                    JSONString.Append("}");
                }
                else
                {
                    JSONString.Append("},");
                }
            }
            JSONString.Append("]");
        }
        return JSONString.ToString();
    }

这就是我想要的格式。[{title:"约翰, (2,1), 6",开始:"13/05/2016 12:00:00 AM"},{title:"奥利维亚, (11,4), 6",开始:"11/05/2016 12:00:00 AM"}]

检查元素时出现以下错误。 :
无法加载资源:服务器响应状态为 400(错误请求):http: localho../ABC/[%7Btitle:%22John,%20(4,6),%206%22,start :%2205/21/2016%201:05:00%20PM%22,结束:%2205/21/2016%201:30:00%20PM%22%7D,%7B标题:%22奥利维亚,%20(2) ,%204%22,开始:%2205/21/2016%201:05:00%20PM%22,结束:%2205/21/2016%201:30:00%20PM%22%7D]?开始=2016 -05-15&end=2016-05-22&_=1463885539445

这里我评论了var jsonEvents = [...]。当我使用预定义的事件时，日历会完美地显示它们。但是当我调用服务器时，出现错误。FULLCALENDAR 仅显示服务器上存储的文件中的事件。因为文档仅显示包含 JSON 数据的文件的 URL。

帮帮我。谢谢。

Answer 1

导致日历不显示的唯一真正问题是:

defaultView: 'agendaweek',

必须是

 defaultView: 'agendaWeek',

是的...大写字母搞乱了你的洞。

而且你不需要所有其他

$("#calendar").fullCalendar(...)

在你的主要的旁边。只保留这个(大写W)

$('#calendar').fullCalendar(
            {
                header:
                {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek',
                selectable: false,
                selectHelper: false,
                events: events
            });

编辑

那是因为您的日期格式不正确。默认值为 MM/dd/YYYY。您正在尝试将日期设置为 13 月。您拥有多个日历的原因是您多次设置它。只需做一次。您可以看到一个工作示例 here与你的 json (我更正了日期)。只需清理所有 javascript 和 HTML，就像 jsFiddle 示例中一样，然后开始添加您自己的内容。