个人中心
gpt4 book ai didi

javascript - Node js、Express 和 handlebars 渲染全日历插件不工作

转载 作者：行者123 更新时间：2023-11-30 20:59:10 25 4
gpt4 key购买 nike

我一直无法在我的应用程序中实现全日历，也找不到任何详细说明如何使用 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 应该加载空日历。 

<div id='calendar'></div>

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

// webapp.js

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

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

先谢谢大家。

最佳答案

不确定是否有人会感兴趣，但在尝试和错误(很多错误)上花费了相当长的时间后，我设法与 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 真的很陌生，但在尝试解决这个问题的漫长周末之后，看到日历呈现令人耳目一新。

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

干杯!

关于javascript - Node js、Express 和 handlebars 渲染全日历插件不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47296340/

25 4 0
文章推荐： c - C 中返回结构表的函数
文章推荐： c# - 将多个列表枚举值写入另一个枚举
文章推荐： javascript - 以与 css 边框相同的方式在 Canvas 上绘制虚线和点线矩形 : draw 4 same edges
文章推荐： javascript - PhoneGap 没有运行 Angular JS 代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com