FullCalendar不工作MVC 5
FullCalendar不工作MVC 5
提问于 2017-02-12 09:13:48
我试图显示一个完整的日历，但没有运气。我尝试从nuGet下载完整的日历，并包含了文件，但不起作用。
<script src="~/Scripts/lib/jquery.min.js"></script>
<script src="~/Scripts/lib/moment.min.js"></script>
<script src="~/Scripts/fullcalendar.min.js"></script>
<link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
<script src="~/Scripts/gcal.js"></script>
<link href="~/Content/fullcalendar.print.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#calendar').fullCalendar({
});
});
</script>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
此外，我尝试下面的代码，也不起作用。我做错了什么，我如何才能显示完整的日历？
<!DOCTYPE html>
<html>
<head>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
</script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>在Chrome浏览器中检查元素
编辑1:
我修改了脚本中的代码，现在没有错误，但仍然没有显示任何内容。
<script type="text/javascript">
var m = moment('2016-09-19');
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'title',
center: '',
right: 'prev,next'
},
weekends: false,
weekNumbers: true,
defaultView: 'month',
defaultDate: m,
events: [{
start: '2016-09-19',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}, {
start: '2016-09-20',
allDay: true,
rendering: 'background',
backgroundColor: '#F00',
title: 'full',
textColor: '#000',
className: 'event-full'
}],
eventAfterRender: function (event, element, view) {
element.append('FULL');
},
viewRender: function (view, element) {
var start = new Date("2016-09-01");
var end = new Date("2016-11-30");
if (end < view.end) {
$("#calendar .fc-next-button").hide();
return false;
} else {
$("#calendar .fc-next-button").show();
}
if (view.start < start) {
$("#calendar .fc-prev-button").hide();
return false;
} else {
$("#calendar .fc-prev-button").show();
}
}
});
</script> 回答 1
Stack Overflow用户
发布于 2017-02-13 10:49:19
您需要包含fullCalendar CSS文件。从您的示例中，我只能看到fullcalendar.print.css --它只在将日历发送到打印机时才能工作。nuget下载的文件中的某个位置应该是"fullcalendar.css“。确保将其包含在页面中，否则很可能没有任何东西会被正确呈现。
有关所有所需文件的简单示例以及必须包含它们的顺序，请参见https://fullcalendar.io/docs/usage/。显然，如果不匹配解决方案中文件的位置，则更改示例中建议的相对路径。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42185896
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号