Node js、Express 和车把渲染 fullcalendar 插件不起作用答案

【问题标题】：Node js, Express and handlebars rendering fullcalendar plugin not workingNode js、Express 和车把渲染 fullcalendar 插件不起作用
【发布时间】：2017-11-14 22:31:28
【问题描述】：

我无法在我的应用程序中实现 fullcalendar，也找不到任何详细说明如何使用 node、express 和 handlebars 实现它的信息。我尝试了多种添加全日历的方法，但没有任何运气。我的应用程序中的其他网页正在工作并呈现它们的信息，所以我不知道为什么在按照网站上的说明操作后 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 应该加载空日历。

&lt;div id='calendar'&gt;&lt;/div&gt;

我已按照 fullcalendar 网站上的说明进行操作，但它并未在 schedule.handlebars 页面上呈现日历。

// webapp.js

//App schedules route
router.get('/schedules', ensureAuthenticated, (req, res) =>{
  res.render('webapp/schedules');
});

这是我实现应用程序的所有代码。任何帮助将不胜感激，因为这是我在大学的最后一年项目。

提前谢谢大家。

【问题讨论】：

标签： javascript node.js express fullcalendar handlebars.js

【解决方案1】：

不确定是否有人会感兴趣，但在花了相当长的时间进行试验和错误（很多错误）之后，我设法将这项工作与 Handlebars 结合使用。

首先，我必须为 $(document).ready 函数编写一个单独的 .js 文件 (calendar.js)：

$(document).ready(function() {
  // Let's make sure that this 2 little critters get loaded, otherwise fullcalendar wont work.
  $.when (
    $.getScript("/s/js/moment.min.js"),
    $.getScript("/s/calendar/fullcalendar.min.js"))
    .done(function() 
    {
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'listDay,listWeek,month'
        },

        // customize the button names,
        // otherwise they'd all just say "list"
        views: {
          listDay: { buttonText: 'list day' },
          listWeek: { buttonText: 'list week' }
        },

        defaultView: 'listWeek',
        defaultDate: '2018-03-12',
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
          {
            title: 'All Day Event',
            start: '2018-03-01'
          },
          {
            title: 'Long Event',
            start: '2018-03-07',
            end: '2018-03-10'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2018-03-09T16:00:00'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2018-03-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2018-03-11',
            end: '2018-03-13'
          },
          {
            title: 'Meeting',
            start: '2018-03-12T10:30:00',
            end: '2018-03-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2018-03-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2018-03-12T14:30:00'
          },
          {
            title: 'Happy Hour',
            start: '2018-03-12T17:30:00'
          },
          {
            title: 'Dinner',
            start: '2018-03-12T20:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2018-03-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2018-03-28'
          }
        ]
      }
    );
  }
  );
});

然后进入 Handlebars 模板：

<section>
<style>
    #calendar {
        max-width: 800px;
        margin: 0 auto;
    }
</style>
<div id='calendar'></div>

最后我的 app.jes 文件看起来像这样：

app.get("/", async(req, res, next) => {
try {
    let projectid = '2188'
    let users = await req.app.locals.db.getRate(projectid);
    res.render("listview", {
        title: "Calendar",
        rows: users,
        scripts: ["/js/views/calendar.js"]
    });
} catch (ex) {
    return next(ex);
}

});

有几个必需的 css 文件，它们链接在主把手模板上。

我确信这不是集成它的最佳方式，因为我对 NodeJS 和整体 Javascript 真的很陌生，但是在一个漫长的周末试图弄清楚这一点之后，看到日历渲染令人耳目一新。

希望这对任何人都有帮助。

干杯！

【讨论】：

【解决方案2】：

我可以看到两个潜在的问题。您正在包括一些这样的本地脚本：

<!-- 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>

您是否通过 express 公开 node_modules 目录以便能够提供这些文件？看看这里： https://expressjs.com/en/starter/static-files.html

虽然公开 node_modules 目录并不是一个好习惯，但如果你有一个应用程序的构建步骤，它将把所有库复制到一个专用的 dist 目录中，并且理想情况下也会缩小和丑化它们，那就更好了。

可能有问题的第二件事是包含脚本的位置。将正文中的所有 js 导入就在正文结束标记 () 之前移动是一种很好的做法。你已经在那里定义了一些。文档准备功能将运行，但带有 id 日历的 div 将不存在。更多细节在这里：Where should I put <script> tags in HTML markup?

更新 1

您需要能够像这样在 node_modules 中提供文件（虽然这不是一个好习惯）：

app.use('/modules', express.static(path.join(__dirname, 'node_modules')))

然后像这样包含您的脚本路径：

<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>

【讨论】：

我已经有一个静态的“公共”文件，我已经尝试使用这种方法来实现它，但它也不能那样工作。此外，我已将
你能把你的webapp.js的静态公共线路发到这里吗？
app.use(express.static(path.join(__dirname, 'public')));
@LeventArslan 我更新了，请看上面
我已经尝试过这样做，但它仍然没有出现，你能看看这个应用程序吗？ github.com/Leventarsenal/Workmate这是我在大学的最后一年的项目，所以任何帮助将不胜感激