节点js，Express和句柄渲染fullcalendar插件无法正常工作
我一直无法实现fullcalendar到我的应用程序，并找不到任何信息详细说明如何实现它使用节点，快递和句柄。 我已经尝试了多种方式来添加fullcalendar没有任何运气。 在我的应用程序的其他网页正在工作，并提供他们的信息，所以我不知道为什么fullcalendar后按照网站上的说明不起作用。
<!-- main.handlebars --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- Page level plugin CSS--> <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> <!-- Custom styles for this template--> <link href="css/sb-admin.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- Link and script for calendar --> <link rel='stylesheet' href='../../node_modules/fullcalendar/dist/fullcalendar.css' /> <script src='../../node_modules/jquery/dist/jquery.min.js'></script> <script src='../../node_modules/moment/min/moment.min.js'></script> <script src='../../node_modules/fullcalendar/dist/fullcalendar.js'></script> <script> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here header: { left: 'prev, next, today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, timezone: "local", defaultView: "month", firstHour: "7", weekMode: "liquid" }); }); </script> <title>Workmate</title> </head> <body> {{#if user}} {{> _appNavbar}} {{else}} {{> _navbar}} {{/if}} <div class="container"> {{> _msg}} {{> _errors}} {{{body}}} </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html> 在main.handlebars后，我有schedule.handlebars应该加载空的日历。
<div id='calendar'></div>
我按照fullcalendar网站上的说明进行操作，并且它不会在schedule.handlebars页面上显示日历。
// webapp.js //App schedules route router.get('/schedules', ensureAuthenticated, (req, res) =>{ res.render('webapp/schedules'); });
这是我必须实现应用程序的所有代码。 任何帮助将不胜感激，因为这是我在大学的最后一年的项目。
提前感谢你们。
我可以看到两个潜在的问题。 你正在包括一些像这样的本地脚本：
<!-- Link and script for calendar --> <link rel='stylesheet' href='../../node_modules/fullcalendar/dist/fullcalendar.css' /> <script src='../../node_modules/jquery/dist/jquery.min.js'></script> <script src='../../node_modules/moment/min/moment.min.js'></script> <script src='../../node_modules/fullcalendar/dist/fullcalendar.js'></script>
你是否直接暴露了node_modules目录以便能够提供这些文件？ 看看这里： https ： //expressjs.com/en/starter/static-files.html
尽pipe公开node_modules目录并不是一个好的做法，但是如果你的应用程序有一个构build步骤，将所有的库复制到一个专用的dist目录中，最好是将它们缩小和丑化。
第二件可能会有问题的地方就是包含脚本的地方。 在身体closures标记（）之前移动所有的js导入是一个好习惯。 你已经在那里定义了一些。 文件就绪function将运行，但具有ID日历的div不会在那里。 更多细节在这里： 我应该在HTML标记中放置<script>标记？
更新1
您需要能够服务node_modules中的文件（这不是一个好习惯），就像那样：
app.use('/modules', express.static(path.join(__dirname, 'node_modules')))
然后包含你的脚本path：
<link rel='stylesheet' href='/modules/fullcalendar/dist/fullcalendar.css' /> <script src='/modules/jquery/dist/jquery.min.js'></script> <script src='/modules/moment/min/moment.min.js'></script> <script src='/modules/fullcalendar/dist/fullcalendar.js'></script>