0

我想通过 arshaw 将 fullcalendar 绑定到我的 MVC 3 应用程序中，并将事件保存到我的 App_Data 文件夹中的 SQL Server 数据库中。但我有几个问题。在我的操作视图中，日历未呈现，但我看到来自控制器的 JSON 结果。我查看了stackoverflow上处理这个问题的每个线程，但没有一个对我有帮助。

这是代码：

数据库

Name    Datatype        AllowNullValues
id      int             False   
title   varchar(MAX)    False   
start   varchar(MAX)    False   
end     varchar(MAX)    True    
allday  bit             True

ADO.NET 自动生成的日历模型

namespace MvcApplication5.Models
{
using System;
using System.Collections.Generic;

public partial class Calendar
{
    public int id { get; set; }
    public string title { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public Nullable<bool> allday { get; set; }
}
}

家庭控制器.cs

    public ActionResult GetEvents()
    {
        IList<Calendar> taskList = new List<Calendar>();

        taskList.Add(new Calendar
        {
            id = 1,
            title = "Google Search",
            start = DateTime.Now.ToString("MM-dd-yyyy"),
            end = DateTime.Now.AddDays(1).ToString("MM-dd-yyyy"),
            allday = false
        });
        taskList.Add(new Calendar
        {
            id = 2,
            title = "Bing Search",
            start = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy"),
            end = DateTime.Now.AddDays(3).ToString("MM-dd-yyyy"),
            allday = false
        });

        return Json(taskList, JsonRequestBehavior.AllowGet);
    }

获取事件.cshtml

<!DOCTYPE html>

<html>
<head>
    <title>GetEvents</title>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-1.9.1.min.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-ui-1.10.2.custom.min.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js")"></script>
    <link href="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.css")" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                eventSources: '/Home/GetEvents'
            });

        });
   </script>
    <style>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 900px;
        margin: 0 auto;
        }

</style>
    <div id ="calendar">
    </div>
</body>
</html>

这就是我在我的观点中得到的

[{"id":1,"title":"Google Search","start":"06-18-2013","end":"06-19-2013","allday":false},{"id":2,"title":"Bing Search","start":"06-20-2013","end":"06-21-2013","allday":false}]

当我返回 View() 时，日历会正确呈现。有人可以帮帮我吗？这让我失去了神经！提前致谢 ：）

4

1 回答 1

1

您的日历设置不正确。最简单的更改是将 eventSources 更改为事件

events: '/Home/GetEvents'

否则（如果你想使用eventSources）你需要像这样设置

eventSources: [{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}}

编辑：为了帮助调试尝试成功和错误回调：

$('#calendar').fullCalendar({

events: {
    url: '/myfeed.php',
    type: 'POST',
    success: function(a, b, c) {
        alert('success');
    },
    error: function(a, b, c) {
        alert('there was an error while fetching events!');
    }
}

});

于 2013-06-19T08:06:17.593 回答