Question

我目前正在使用asp.net mvc 4，我正在尝试将fullcalendar添加到我的项目中。完整日历可在此处找到：http://arshaw.com/fullcalendar/

当我点击我的动作链接时，我的日历将无法加载。我似乎无法找到它为什么不起作用。

以下是代码：

CSHTML

@section JavaScript
{
    <link href="@Url.Content("/Content/fullcalendar.css") " rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui-1.8.11.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.js")"></script>
    @*    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.min.js")"></script>*@
}
@{
    ViewBag.Title = "Tijdregistratie";
}
<script type='text/javascript'>
    $(document).ready(function () {

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

        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            editable: true,
            events: "/TijdRegistratie/GetGeplandeTaken/"
        });
    });
</script>
<div id='calendar'>
</div>

CONTROLLER

private TijdRegistratieService.ITijdRegistratieService _tijdRegistratieClient;

        public TijdRegistratieController()
        {
            _tijdRegistratieClient = new TijdRegistratieService.TijdRegistratieServiceClient();
        }

        public ActionResult TijdRegistratieOverzicht()
        {


            return View("TijdRegistratieOverzicht");
        }

        public JsonResult GetGeplandeTaken(double start, double end)
        {
            String beginDatum = ConvertFromUnixTimestamp(start).ToString();
            String eindDatum = ConvertFromUnixTimestamp(end).ToString();

            int psnID = (int)HttpContext.Session["userPSNID"];

            var geplandeTaken = _tijdRegistratieClient.GetGeregistreerdeTaken(1, beginDatum, eindDatum);

            var eventList = from e in geplandeTaken
                            select new
                            {
                                id = e.taakID,
                                title = e.BeginUur.Substring(0, e.BeginUur.Length - 3) + " - " + e.EindUur.Substring(0, e.EindUur.Length - 3),
                                start = string.Format("{0:u}", e.BeginDatum),
                                end = string.Format("{0:u}", e.EindDatum)
                                //allDay = false
                            };

            var rows = eventList.ToArray();

            return Json(rows, JsonRequestBehavior.AllowGet);
        }

        private static DateTime ConvertFromUnixTimestamp(double timestamp)
        {
            var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);

            return origin.AddSeconds(timestamp);
        }

Layout.cshtml（在每个页面中自动加载）

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/Content/autocomplete.css" type="text/css" media="all" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i8n/jquery.mobile.datebox.i8n.en.js"></script>

    @RenderSection("JavaScript", required: false)
    <script>

所以我现在想知道如何解决这个问题。这是我使用JQuery的第二个项目，如果我错过了一些明显的东西，请原谅我。

编辑：在Firefox中运行时，我在firebug中收到以下错误：fullCalendar不是函数。

Answer 1

=）））））

你没有包含“jquery.js”

从http://jquery.com

下载最新版本

Answer 2

您忘记包含jQuery库，请查看您链接的演示页，其中包括：

<script type='text/javascript' src='/js/fullcalendar-1.5.3/jquery/jquery-1.7.1.min.js'></script>

而你的例子没有。

Answer 3

初看起来，您不需要将2个参数传递给您的方法吗？

GetGeplandeTaken（ double start，double end ）

从视图调用您的方法？如果在方法上设置断点，那么您有该参数的任何值吗？

Answer 4

你必须删除：

@section JavaScript
{
    <link href="@Url.Content("/Content/fullcalendar.css") " rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("/Scripts/jquery-ui-1.8.11.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.js")"></script>
    @*    <script type="text/javascript" src="@Url.Content("/Scripts/fullcalendar.min.js")"></script>*@
}

从您的cshtml页面添加到您的主要加载页面。现在它将加载到每个页面上，它会正常工作。

jquery无法处理页面加载

4 个答案: