Question

我想将此calendar嵌入我的网站。我通过以下方式安装了它：

bower install --save angular-bootstrap-calendar

我在html

的head标签中添加了以下脚本/链接

<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- Angular -->
<script src="{% static "students/bower_components/angular/angular.min.js" %}"></script>
<!-- Moment -->
<script src="{% static "students/bower_components/moment/moment.js" %}"></script>
<!-- Calendar -->
<script src="{% static "students/bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js" %}"></script>
<link href="{% static "students/bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" %}" rel="stylesheet">

然后我在HTML的body标签中添加了指定的标记：

<div ng-app="mycalendar">
  <mwl-calendar
    view="calendarView"
    view-date="calendarDate"
    events="events"
    view-title="calendarTitle"
    on-event-click="eventClicked(calendarEvent)"
    on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
    edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
    delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
    on-edit-event-click="eventEdited(calendarEvent)"
    on-delete-event-click="eventDeleted(calendarEvent)"
    cell-is-open="true">
  </mwl-calendar>
</div>

当我在Chrome中使用控制台时，我得到了一个：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=mycalendar&p1=Error…Fstatic%2Fstudents%2Fbower_components%2Fangular%2Fangular.min.js%3A21%3A19)

我对Angular并不熟悉，有人可以帮忙吗？

Answer 1

我终于解决了我的问题。以下是完整的工作代码：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap 3+ -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  <script src="{% static "students/bower_components/angular/angular.min.js" %}"></script>
  <script src="{% static "students/bower_components/moment/moment.js" %}"></script>
  <script src="{% static "students/bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js" %}"></script>
  <link href="{% static "students/bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" %}" rel="stylesheet">
  <script>
    mycalendar = angular.module('mycalendar', ['mwl.calendar']);
    mycalendar.controller('mycalendarctrl', function($scope) {
      $scope.calendarView = 'month';
      $scope.calendarDate = new Date();
    })
  </script>
</head>

<body>
  <div ng-app="mycalendar" ng-controller="mycalendarctrl" class="ng-scope">
    <mwl-calendar
      view="calendarView"
      view-date="calendarDate"
      events="events"
      view-title="calendarTitle"
      on-event-click="eventClicked(calendarEvent)"
      on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
      edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
      delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
      on-edit-event-click="eventEdited(calendarEvent)"
      on-delete-event-click="eventDeleted(calendarEvent)"
      cell-is-open="true">
    </mwl-calendar>
  </div>

一些解释：我忘记编写mycalendar应用程序和相关控制器来设置日历的参数（并且我猜测它会生成）。

<script>
  mycalendar = angular.module('mycalendar', ['mwl.calendar']);
  mycalendar.controller('mycalendarctrl', function($scope) {
    $scope.calendarView = 'month';
    $scope.calendarDate = new Date();
  })
</script>

在我的网站上嵌入日历

1 个答案: