1
Ich war in den letzten paar Tagen versucht, den Kalender von Mattlewis92, mit keinem Erfolg zu verwenden. Der Kalender zeigt nicht an, was ich versuche. Schaltflächen werden korrekt angezeigt, tun aber nichts.Angular Bootstrap Kalender von Mattlewis92 nicht angezeigt
Ich folgte seinem Hinweis, was ich auf meine hmtl/css/js-Dateien setzen sollte, aber nach einer Woche, in der ich nirgendwohin kam, kam ich und fragte, ob ich ein wenig Hilfe bekommen könnte.
Hier ist meine Javascript-Datei:
'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];
};
});
Hier ist meine HTML-Datei:
<!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>
Ich glaube nicht, dass die CSS-Datei benötigt wird, aber bitte sagen Sie mir, wenn Sie es brauchen.
Und hier ist ein kurzer Screenshot, was meine Projektstruktur ist, denn es könnte sein, was ich falsch mache, da ich den mattewis92-Kalender benutze, bin mir nicht sicher, wo ich meine Dateien ablegen soll und was Abhängigkeiten hinzufügen. so
http://www.hostingpics.net/viewer.php?id=373355574Ev.png
Danke für Ihre Hilfe, wenn anyhting sonst benötigt wird, bitte sagen Sie mir.
Bist du noch auf der Suche nach Antworten darauf ?? –