Question

我无法在我的应用程序中实现fullcalendar，也找不到任何详细说明如何使用node，express和handlebar实现它的信息。我已经尝试过多种方式添加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');
});

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

提前感谢你们。

Answer 1

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

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

Answer 2

不确定是否有人会对此感兴趣，但经过相当长的一段时间花在试用期间错误（很多错误），我设法与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文件，它们在主Handlebars模板上链接。

我确信这不是集成它的最佳方式，因为我对NodeJS和整体Javascript都不熟悉，但经过漫长的周末试图解决这个问题后，看到日历呈现令人耳目一新。

希望这有助于任何人。

喝彩！

节点js，Express和把手呈现fullcalendar插件不起作用

2 个答案: