Fullcalendar忽略初始化的所有选项？
我使用.NET与MVC 5.2.2和bootstrap开发网站。我想使用fullcalendar在网站上显示事件（没有用户交互）。经过很多努力才能获得fullcalendar显示，我设法让它工作。但它忽略了我在初始化程序中放入的所有内容。我想摆脱标题，只留下日历与一些控件。但我得到的只是标题。我甚至无法添加事件或回调。
这是我到目前为止所得到的：
脚本和css是捆绑的，我试图让它从实际视图中运行，但目前它们在布局页面中。这是呈现的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - NNT</title>
<link href="/Content/cerulean.bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/multileveldd.css" rel="stylesheet"/>
<link href="/Scripts/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/Scripts/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="nnt-header">
<img src="/images/logo-clear.png" class="nnt-logo" />
<div class="nnt-caption">
<span id="nnt-caption-title">NNT Caption Title</span><br />
<span id="nnt-caption-body">NNT Caption Body</span>
</div>
</div>
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NNT</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Tasks <span class="badge">1,337</span></a></li>
<li><a href="#">Menu Item</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="glyphicon glyphicon-tint"></b></a>
<ul class="dropdown-menu">
<li><a href="/Home/Index/default">Default</a></li>
<li class="divider"></li>
<li><a href="/Home/Index/cerulean">Cerulean</a></li>
<li><a href="/Home/Index/cosmo">Cosmo</a></li>
<li><a href="/Home/Index/cyborg">Cyborg</a></li>
<li><a href="/Home/Index/darkly">Darkly</a></li>
<li><a href="/Home/Index/flatly">Flatly</a></li>
<li><a href="/Home/Index/journal">Journal</a></li>
<li><a href="/Home/Index/lumen">Lumen</a></li>
<li><a href="/Home/Index/paper">Paper</a></li>
<li><a href="/Home/Index/readable">Readable</a></li>
<li><a href="/Home/Index/sandstone">Sandstone</a></li>
<li><a href="/Home/Index/simplex">Simplex</a></li>
<li><a href="/Home/Index/slate">Slate</a></li>
<li><a href="/Home/Index/spacelab">Spacelab</a></li>
<li><a href="/Home/Index/superhero">Superhero</a></li>
<li><a href="/Home/Index/united">United</a></li>
<li><a href="/Home/Index/yeti">Yeti</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Username <b class="glyphicon glyphicon-user"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</li>
<li><a href="#"><b class="glyphicon glyphicon-bell"></b></a></li>
<li><a href="#"><b class="glyphicon glyphicon-question-sign"></b></a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm1" data-toggle="dropdown" aria-expanded="true">DDM 1<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddm1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm2" data-toggle="dropdown" aria-expanded="true">DDM 2<b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu" aria-labelledby="ddm2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 6</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm3"" data-toggle="dropdown" aria-expanded="true">DDM 3<b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu" aria-labelledby="ddm3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 7</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 8</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm4" data-toggle="dropdown" aria-expanded="true">DDM 4<b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu" aria-labelledby="ddm4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 9</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm5" data-toggle="dropdown" aria-expanded="true">DDM 5<b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu" aria-labelledby="ddm5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 10</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 11</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 12</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 13</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" id="ddm6" data-toggle="dropdown" aria-expanded="true">DDM 6<b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu" aria-labelledby="ddm6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 14</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu Item 15</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9">
<div class="container body-content">
<div id="carousel-nnt" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-nnt" data-slide-to="0" class="active"></li>
<li data-target="#carousel-nnt" data-slide-to="1"></li>
<li data-target="#carousel-nnt" data-slide-to="2"></li>
<li data-target="#carousel-nnt" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="nnt-slide">
<h2>Lorem Ipsum</h2>
<div class="nnt-slide-content">
<ul>
<li>In egestas lorem at erat ultrices, at consectetur lorem condimentum.</li>
<li>Suspendisse faucibus augue at arcu rutrum, porta porta nunc dapibus.</li>
<li>Nullam mattis lectus eu ultricies venenatis.</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="nnt-slide">
<h2>Lorem Ipsum</h2>
<div class="nnt-slide-content">
<ul>
<li>In egestas lorem at erat ultrices, at consectetur lorem condimentum.</li>
<li>Suspendisse faucibus augue at arcu rutrum, porta porta nunc dapibus.</li>
<li>Nullam mattis lectus eu ultricies venenatis.</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="nnt-slide">
<h2>Lorem Ipsum</h2>
<div class="nnt-slide-content">
<ul>
<li>In egestas lorem at erat ultrices, at consectetur lorem condimentum.</li>
<li>Suspendisse faucibus augue at arcu rutrum, porta porta nunc dapibus.</li>
<li>Nullam mattis lectus eu ultricies venenatis.</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="nnt-slide">
<h2>Lorem Ipsum</h2>
<div class="nnt-slide-content">
<ul>
<li>In egestas lorem at erat ultrices, at consectetur lorem condimentum.</li>
<li>Suspendisse faucibus augue at arcu rutrum, porta porta nunc dapibus.</li>
<li>Nullam mattis lectus eu ultricies venenatis.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-nnt" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-nnt" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col-md-6">
<h2>Calendar</h2>
<div id="calendar"></div>
</div>
<div class="col-md-6">
<h2>Graph</h2>
<div id="graph"></div>
</div>
</div>
<hr />
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/fullcalendar/lib/moment.min.js"></script>
<script src="/Scripts/fullcalendar/fullcalendar.js"></script>
<script src="/Scripts/flot/jquery.flot.js"></script>
<script type="text/javascript">
$.plot($("#graph"), [[[0, 0], [1, 1]]], { yaxis: { max: 1 } });
$(document).ready(function () {
// page is now ready, initialize the calendar...
$("#calendar").fullCalendar({
dayClick: function () {
alert('a day has been clicked!');
}
// put your options and callbacks here
})
});
</script>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
不确定这是否重要，但试试这个：
$('document').ready(function () {
// page is now ready, initialize the calendar...
$("#calendar").fullCalendar({
dayClick: function (date, jsEvent, view) {
alert('a day has been clicked!');
}
// put your options and callbacks here
});
};
也可能对我们这些不使用MS的人有用，可以看到渲染页面的完整html（即jquery等脚本是否正确加载）。 你说你的日历现在正在加载，但是dayClick还没有工作？
答案 1 :(得分：0)
似乎我的错误包括样式表“fullcalendar.print.css”而没有指定媒体属性（我不知道如何，因为我正在使用捆绑包来应用样式表）。这会通过覆盖默认样式来打破按钮。我不确定它是如何打破javascript或回调的事件。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？