stackoom
  简体   繁体   中英

Angular bootstrap calendar by mattlewis92 not displaying

 原文  2016-05-19 08:47:08  4   1    javascript/ html/ angularjs/ calendar

Question

I've been for the last few days trying to use the calendar made by mattlewis92, with no success. 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.

Here is my javascript file : 

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

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

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.

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

Thanks for your help, if anyhting else is needed please tell me so.

1 answers

solution1
 0 ACCPTED  2016-05-19 09:29:07

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

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)

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question angular bootstrap calendar not displaying Angular bootstrap calendar Angular Bootstrap Calendar Delete/Edit events angular-bootstrap-calendar dependency issues Angular Bootstrap calendar default templates not loading Bootstrap datetimepicker / date picker not displaying calendar. Cannot pick a date Displaying bootstrap alert using angular2 Angular UI calendar integration - Events from resource not displaying Angular UI Bootstrap Datepicker - show specific date on Calendar open Pass additional data to cell data function with Angular Bootstrap Calendar
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM