0
.NET을 사용하여 MVC 5.2.2와 부트 스트랩을 사용하여 웹 사이트를 개발합니다. 나는 fullcalendar를 사용하여 사이트에서 사용자 상호 작용없이 이벤트를 표시하려고합니다. 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>
시도했는데 캘린더가 깨져서 아무 것도 표시되지 않습니다. 나는 전체 html을 포함 시켰지만 어쩌면 내가 잘못된 것을 주문 했을까? 모든 것을로드 할 수 있습니다. 콘솔에서 오류가 발생하지만 캘린더에있는 오류는 아닙니다. 연결 하나 (꽤 VS 디버거) 및 "요소를 찾을 수 없습니다". – Kross
오류로 인해 때때로 자바 스크립트 실행이 중지 될 수 있습니다. 그래서 나는 그 사람들의 원인을 찾아 내서 달력을 위해 다른 것을 바꾸려고 시도하기 전에 그들을 고칠 것입니다. 멀리 볼 수 있듯이 최소한로드되어 표시되어야합니다. –
아무런 요소도 발견되지 않은 것 같습니다. 나는 그것의 원인을 알지 못한다. 대부분의 옵션과 콜백을 제거하면 사라진다. 제목을 제거 할 수 있었지만 컨트롤 버튼이나 콜백을 추가하면 다시 끊어집니다. – Kross