由mattlewis92显示的Angular bootstrap日历

Question

I've been for the last few days trying to use the calendar made by mattlewis92, with no success. 我过去几天一直试图使用mattlewis92制作的日历，但没有成功。 The calendar does not display whatever I try. 日历不会显示我尝试的任何内容。 Buttons are displaying correctly, but don't do a thing. 按钮显示正确，但不做任何事情。

I followed his indication on what to put on my hmtl/css/js files, but after a week of not getting anywhere I came to ask if I could get a little help. 我按照他的指示放了我的hmtl / css / js文件，但在一周没有到达任何地方后，我来问我是否可以得到一点帮助。

Here is my javascript file : 这是我的javascript文件：

'use strict';

angular
  .module('myApp', ['mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate', 'oc.lazyLoad', 'hljs'])
  .config(function(calendarConfig) {
calendarConfig.dateFormatter = 'moment';
})
  .controller('KitchenSinkCtrl', function($http, $rootScope, $compile, $q, $location, $ocLazyLoad, plunkGenerator, moment, alert) {

var vm = this;

vm.calendarView = 'month';
vm.viewDate = new Date();
vm.events = [
  {
    title: 'Un event',
    type: 'warning',
    startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
    endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
    draggable: true, 
    resizable: true 
  }
];

vm.isCellOpen = true;

vm.eventClicked = function(event) {
  alert.show('Clicked', event);
};

vm.eventEdited = function(event) {
  alert.show('Edited', event);
};

vm.eventDeleted = function(event) {
  alert.show('Deleted', event);
};

vm.eventTimesChanged = function(event) {
  alert.show('Dropped or resized', event);
};

vm.toggle = function($event, field, event) {
  $event.preventDefault();
  $event.stopPropagation();
  event[field] = !event[field];
};

});

Here is my HTML file : 这是我的HTML文件：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Calendrier</title>
  <meta name="description" content="Calendrier">
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
    [ng-cloak] {
  display: none;
}
  </style>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="bower_components/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
  <script src="bower_components/angular-bootstrap-calendar/docs/examples/kitchen-sink/javascript.js" src=""></script>
  <script src="bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/styles/github.min.css" rel="stylesheet">
  <link href="app.css" rel="stylesheet">
</head>


<div>
<h2 class="text-center ng-binding">{{ vm.calendarTitle }}</h2>
<div class="row">

  <div class="col-md-6 text-center">
    <div class="btn-group">

      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="vm.viewDate"
        decrement="vm.calendarView">
        Précédent
      </button>
      <button
        class="btn btn-default"
        mwl-date-modifier
        date="vm.viewDate"
        set-to-today>
        Aujourd'hui
      </button>
      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="vm.viewDate"
        increment="vm.calendarView">
        Suivant
      </button>
    </div>
  </div>

  <br class="visible-xs visible-sm">

  <div class="col-md-6 text-center">
    <div class="btn-group">
      <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Année</label>
      <label class="btn btn-primary "ng-model="vm.calendarView" uib-btn-radio="'month'">Mois</label>
      <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Semaine</label>
      <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Jour</label>
    </div>
  </div>

</div>

<br>

<mwl-calendar
  events="vm.events"
  view="vm.calendarView"
  view-title="vm.calendarTitle"
  view-date="vm.viewDate"
  on-event-click="vm.eventClicked(calendarEvent)"
  on-event-times-changed="vm.eventTimesChanged(calendarEvent); 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="vm.eventEdited(calendarEvent)"
  on-delete-event-click="vm.eventDeleted(calendarEvent)"
  cell-is-open="vm.isCellOpen"
  day-view-start="06:00"
  day-view-end="22:00"
  day-view-split="30"
  cell-modifier="vm.modifyCell(calendarCell)"
  class="ng-isolate-scope">
</mwl-calendar>

<br><br><br>

<h3 id="event-editor">
  Modifier les events
  <button
    class="btn btn-primary pull-right"
    ng-click="vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true})">
    Ajouter
  </button>
  <div class="clearfix"></div>
</h3>

<table class="table table-bordered">

  <thead>
    <tr>
      <th>Libellé</th>
      <th>Type</th>
      <th>Date</th>
      <th>Durée</th>
      <th>Annuler</th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="event in vm.events track by $index">
      <td>
        <input
          type="text"
          class="form-control"
          ng-model="event.title">
      </td>
      <td>
        <select ng-model="event.type" class="form-control">
          <option value="important">Réunion</option>
          <option value="warning">Evènement</option>
          <option value="info">Visite</option>
        </select>
      </td>
      <td>
        <p class="input-group" style="max-width: 250px">
          <input
            type="text"
            class="form-control"
            readonly
            uib-datepicker-popup="dd MMMM yyyy"
            ng-model="event.startsAt"
            is-open="event.startOpen"
            close-text="Close" >
          <span class="input-group-btn">
            <button
              type="button"
              class="btn btn-default"
              ng-click="vm.toggle($event, 'startOpen', event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>
        <uib-timepicker
          ng-model="event.startsAt"
          hour-step="1"
          minute-step="15"
          show-meridian="true">
        </uib-timepicker>
      </td>
      <td>
        <p class="input-group" style="max-width: 250px">
          <input
            type="text"
            class="form-control"
            readonly
            uib-datepicker-popup="dd MMMM yyyy"
            ng-model="event.endsAt"
            is-open="event.endOpen"
            close-text="Close">
          <span class="input-group-btn">
            <button
              type="button"
              class="btn btn-default"
              ng-click="vm.toggle($event, 'endOpen', event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>
        <uib-timepicker
          ng-model="event.endsAt"
          hour-step="1"
          minute-step="15"
          show-meridian="true">
        </uib-timepicker>
      </td>
      <td>
        <button
          class="btn btn-danger"
          ng-click="vm.events.splice($index, 1)">
          Supprimer
        </button>
      </td>
    </tr>
  </tbody>

</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.rawgit.com/ocombe/ocLazyLoad/1.0.9/dist/ocLazyLoad.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js"></script>
<script src="//cdn.rawgit.com/pc035860/angular-highlightjs/v0.6.1/build/angular-highlightjs.min.js"></script>
<script src="bower_components/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="bower_components/angular-bootstrap-calendar/docs/docs.js"></script>
<script src="bower_components/angular-bootstrap-calendar/docs/examples/helpers.js"></script>

</html>

I don't think the css file is needed but please tell me if you need it. 我认为不需要css文件但请告诉我你是否需要它。

And here is a quick screenshot of what my project structure is, because it might be what I'm doing wrong, since I'm using mattewis92 calendar, I'm not sure of where to put my files, and what dependencies to add. 这里是我的项目结构的快速截图，因为它可能是我做错了，因为我使用mattewis92日历，我不知道在哪里放置我的文件，以及要添加的依赖项。

http://www.hostingpics.net/viewer.php?id=373355574Ev.png http://www.hostingpics.net/viewer.php?id=373355574Ev.png

Thanks for your help, if anyhting else is needed please tell me so. 感谢您的帮助，如果有任何其他需要请告诉我。

Answer 1

Well, after looking at the demo code in the plunker edit, something I should have done way earlier, I found that the problem was that I was referring to "myApp", in both my html and js files, instead of "mwl.calendar.docs". 好吧，看完plunker编辑中的演示代码后，我应该早点做的事情，我发现问题是我在html和js文件中都指的是“myApp”，而不是“mwl.calendar” .docs”。

Now I found some other issues, like the buttons to display a small calendar to chose a date when wyou create an event that doesn't work, or that the default date when I open it is not set, so nothing displays until I try to change the date, but I should be able to solve those by myself. 现在我发现了一些其他问题，比如按钮显示一个小日历来选择一个日期，当你创建一个不起作用的事件，或者我打开它的默认日期没有设置，所以没有任何显示，直到我尝试改变日期，但我应该能够自己解决这些问题。

(even so I don't mind receiving advices on what I've done so far, I know it's a lot of copy paste in the end, but since I'm only a beginner, I might have done some mistakes even by simply doing that) （即使如此，我也不介意接受有关我迄今为止所做的事情的建议，我知道最后有很多复制粘贴，但由于我只是一个初学者，我甚至可能做了一些错误那）

由mattlewis92显示的Angular bootstrap日历

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-05-19 09:29:07

由mattlewis92显示的Angular bootstrap日历

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-19 09:29:07

解决方案1
0 已采纳 2016-05-19 09:29:07