CODEWITHSUNDEEP
javascript
MarAja
MarAja

Reputation: 1597

Embed a calendar in my website

I want to embed this calendar in my website. I installed it through:

bower install --save angular-bootstrap-calendar

I add the following scripts/links in the head tag of my html

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

I then added the specified tag in the body tag of my HTML:

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

When I go to the console in Chrome I get a:

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)

I am not really familiar with Angular, can someone help?

Upvotes: 1

Views: 1184

Answers (1)

MarAja
MarAja

Reputation: 1597

I finally solved my problem. Here is the full working code:

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

Some explanations: I forgot to write the mycalendar app and associated controller to set parameters of the calendar (and generate it I guess).

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

Upvotes: 2

Related Questions