0
私は完全なカレンダーを表示しようとしていますが、運はありません。 nuGetからfullcalendarをダウンロードしようとしましたが、ファイルは含まれていましたが、動作しませんでした。FullCalendarが動作しないMVC 5
<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>
また、私は以下のコードを試してみても動作していません。 私は間違って何をしていますか、どのように私はfullcalendarを表示できますか？
<!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ブラウザで検査要素
EDIT 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>