FullCalendar错误 - Microsoft JScript运行时错误:对象不支持此属性或方法

时间:2011-05-13 12:05:21

标签: javascript json asp.net-mvc-3 fullcalendar

我正试图将FullCalendar作为试用版进入启动ASP.NET MVC3网站,并收到错误消息“Microsoft JScript运行时错误:对象不支持此属性或方法”。生成网页的代码是

<!DOCTYPE html>
<html>
  <head>
<link rel='stylesheet' type='text/css' href='~/Content/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='~/Content/fullcalendar.print.css' media='print' />

<script type='text/javascript' src='~/Scripts/fullcalendar.js'></script>
<script type='text/javascript' src='~/Scripts/gcal.js'></script>
<style type='text/css'>

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

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

</style>


<title>Event Calendar</title>

<link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
</head>

<body>
<div class="page">

    <div id="header">
        <div id="title">
            <h1>My MVC Application</h1>
        </div>

        <div id="logindisplay">

    [ <a href="/Account/LogOn">Log On</a> ]

        </div> 

        <div id="menucontainer">

            <ul id="menu">
                <li><a href="/Club/EventCalendar">Event Calendar</a></li>
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
            </ul>

        </div>
    </div>

    <div id="main">
        <div id="pageContent">

<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,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            editable: true,
            events: [
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                }
            ]
        });
    });    
</script>
<div id="calendar">
</div>

        </div>
        <div id="linkContent" >
        </div>

    </div>

    <div id="footer">
    </div>
</div>
</body>
</html>

运行javascript代码创建日历时失败。据我所知,代码如许多网站所示。任何想法可能有什么不妥。

3 个答案:

答案 0 :(得分:3)

您需要在插件之前导入jQuery 。将加载jQuery的<script>标记放在<head>

的顶部

答案 1 :(得分:0)

Ya man ..就像@pointy说.. fullCalnder需要jQuery才能发挥它的魔力..

    <!DOCTYPE html>
    <html>
      <head>

<link href="../Content/Site.css" rel="stylesheet" type="text/css" />
    <link rel='stylesheet' type='text/css' href='~/Content/fullcalendar.css' />
    <link rel='stylesheet' type='text/css' href='~/Content/fullcalendar.print.css' media='print' />

<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script type='text/javascript' src='~/Scripts/fullcalendar.js'></script>
    <script type='text/javascript' src='~/Scripts/gcal.js'></script>

保持所有进口最重要 - 订单很重要!然后组CSS然后Sctipts例如。以后更容易阅读


修改

图片胜过千言万语!我得到了你制作的迷你网站

enter image description here enter image description here

好像根本找不到脚本。!

答案 2 :(得分:0)

Pointy对于订单是正确的,并确保在引用完整日历之前引用了Jquery。在我的情况下,我已经正确地完成了这一点,但另外我在标题之后添加了部分视图。部分视图再次引用了Jquery,然后在执行时抛出了同样的错误。

我只是觉得我会把它作为一个答案添加,因为它让我找了一会儿然后才知道发生了什么(因为我的头部确实有正确的顺序 - 就像尖尖的anser暗示你应该有的那样) 。

同样,不要试图从正确的其他答案中拿走任何东西。只是添加具体的错误显示给我 - 当我似乎已经做了一切正确 - 仍然得到错误。

我的解决方案是从局部视图中取出jquery引用。 (它不需要,因为主视图已经有参考)