Javascript Can'；无法正确显示引导年份日历，并且日期选择器出现故障
我试图在我的网站上实现，但是我在Javascript Can'；无法正确显示引导年份日历，并且日期选择器出现故障,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我试图在我的网站上实现，但是我在JavaScript功能以及日历在我的网站上的显示方面遇到了一些问题 我想水平显示日历，就像之前链接上显示的示例一样，但我所能做的就是垂直显示日历，所以我需要向下滚动查看几个月 检查它在我的网站上的显示方式 我遇到的另一个问题是，在创建新事件时，当我尝试选择日期时，会出现以下错误： 此外，当尝试更新或删除现有事件时，js可以工作，但不执行任何操作 您可以在此处查看我的所有html： <!DOCTYPE html> <html> &
JavaScript我遇到的另一个问题是，在创建新事件时，当我尝试选择日期时，会出现以下错误：
此外，当尝试更新或删除现有事件时，js可以工作，但不执行任何操作 您可以在此处查看我的所有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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>BIMMS - Homepage</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<link href="css/sb-admin.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/bootstrap-year-calendar/bootstrap-year-calendar.css">
<link rel="stylesheet" href="vendor/bootstrap-year-calendar/bootstrap-year-calendar.min.css">
<script src="vendor/chart.js/Chart.min.js"></script>
<script src='vendor/fullcalendar/moment.min.js'></script>
<script src='vendor/fullcalendar/jquery.min.js'></script>
<script src="vendor/bootstrap-year-calendar/bootstrap-year-calendar.js"></script>
<script src="vendor/bootstrap-year-calendar/bootstrap-year-calendar.min.js"></script>
<script src="js/calendar.js"></script>
</head>
<body id="page-top">
<nav class="navbar navbar-expand navbar-light static-top" style="background-color:#e9ecef;">
<a class="navbar-brand mr-1" href="index.html"><img src="img/bimms.png" width="190" class="d-inline-block align-top"></a>
<button class="btn btn-link btn-sm text-black-50 order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>
<!-- Navbar Search -->
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Navbar -->
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<span class="badge badge-danger">9+</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<span class="badge badge-danger">7</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="usersettings.html">Settings</a>
<a class="dropdown-item" href="#">Activity Log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
</div>
</li>
</ul>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item">
<a class="nav-link" href="loggedin.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-fw fa-folder"></i>
<span>Projects</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<h6 class="dropdown-header">Active Projects</h6>
<a class="dropdown-item" href="project.html">Data Center</a>
<a class="dropdown-item" href="#">Ulster University</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Manage Projects</h6>
<a class="dropdown-item" href="newproject.html">New Project</a>
<a class="dropdown-item" href="newsubproject.html">New Sub-project</a>
<a class="dropdown-item" href="#">Edit Project</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-fw fa-chart-area"></i>
<span>Project Analysis</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<h6 class="dropdown-header">Active Projects</h6>
<a class="dropdown-item" href="charts.html">Data Center</a>
<a class="dropdown-item" href="#">Ulster University</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-database"></i>
<span>Database</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="tasks.html">
<i class="fas fa-fw fa-tasks"></i>
<span>Tasks</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="calendar.html">
<i class="fas fa-fw fa-calendar"></i>
<span>Calendar</span></a>
</li>
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">Calendar</li>
</ol>
<!--Content-->
<div class="container">
<div class='calendar' id="calendar"></div>
</div>
<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © BIMMS 2018</span>
</div>
</div>
</footer>
</div>
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/datatables-demo.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
</body>
</html>
BIMMS-主页
-
-
-
-
-
活动项目
管理项目
-
活动项目
-
-
-
日历
版权所有©BIMMS 2018
准备好离开了吗？
×
如果您准备结束当前会话，请选择下面的“注销”。
取消
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
$('#event-modal').modal();
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').setDataSource(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if (event.id) {
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
} else {
var newId = 0;
for (var i in dataSource) {
if (dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
contextMenuItems: [{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if (e.events.length > 0) {
var content = '';
for (var i in e.events) {
content += '<div class="event-tooltip-content">' +
'<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' +
'<div class="event-location">' + e.events[i].location + '</div>' +
'</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html: true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if (e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: [{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19)
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1)
},
{
id: 3,
name: 'Apple Special Event',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 1),
endDate: new Date(currentYear, 8, 1)
},
{
id: 4,
name: 'Apple Keynote',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 9),
endDate: new Date(currentYear, 8, 9)
},
{
id: 5,
name: 'Chrome Developer Summit',
location: 'Mountain View, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 18)
},
{
id: 6,
name: 'F8 2015',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 2, 25),
endDate: new Date(currentYear, 2, 26)
},
{
id: 7,
name: 'Yahoo Mobile Developer Conference',
location: 'New York',
startDate: new Date(currentYear, 7, 25),
endDate: new Date(currentYear, 7, 26)
},
{
id: 8,
name: 'Android Developer Conference',
location: 'Santa Clara, CA',
startDate: new Date(currentYear, 11, 1),
endDate: new Date(currentYear, 11, 4)
},
{
id: 9,
name: 'LA Tech Summit',
location: 'Los Angeles, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 17)
}
]
});
$('#save-event').click(function() {
saveEvent();
});
});
函数editEvent（事件）{
$（'#事件模式输入[name=“event index”]'）.val（事件？event.id:''）；
$（'#事件模式输入[name=“event name”]'）.val（event？event.name:''）；
$（'#事件模式输入[name=“event location”]'）.val（事件？event.location:''）；
$（“#事件模式输入[name=“事件开始日期”]”）。日期选择器（'update'，event？event.startDate:''）；
$（“#事件模式输入[name=“event end date”]”）。日期选择器（'update'，event？event.endDate:''）；
$（“#事件模式”）.modal（）；
}
函数deleteEvent（事件）{
var dataSource=$（'#calendar'）.data（'calendar'）.getDataSource（）；
for（数据源中的var i）{
if（数据源[i].id==event.id）{
数据源.拼接（i，1）；
打破
}
}
$（'日历'）.data（'日历'）.setDataSource（数据源）；
}
函数saveEvent（）{
var事件={
id:$（'#事件模式输入[name=“event index”]”）。val（），
名称：$（'#事件模式输入[name=“event name”]”）。val（），
位置：$（'#事件模式输入[name=“event location”]”）。val（），
startDate:$（“#事件模式输入[name=“event start date”]”）。日期选择器（'getDate'），
endDate:$（'#事件模式输入[name=“event end date”]”）。日期选择器（'getDate'）
}
var dataSource=$（'#calendar'）.data（'calendar'）.getDataSource（）；
if（event.id）{
for（数据源中的var i）{
if（数据源[i].id==event.id）{
数据源[i].name=event.name；
数据源[i].location=event.location；
数据源[i].startDate=event.startDate；
数据源[i].endDate=event.endDate；
}
}
}否则{
var-newId=0；
for（数据源中的var i）{
if（数据源[i].id>newId）{
newId=dataSource[i].id；
}
}
newId++；
event.id=newId；
push（事件）；
}
$（'日历'）.data（'日历'）.setDataSource（数据源）；
$（“#事件模式”）.model（'hide'）；
}
$（函数（）{
var currentYear=新日期（）.getFullYear（）；
$（“#日历”）。日历({
enableContextMenu:true，
enableRangeSelection:true，
.wrapper-class {
display: flex;
flex-direction: row;
}
TypeError: null is not an object (evaluating 't.length')