Comment implanter un calendrier AngularJS

Salut,

j'aurais peut etre une piste mais je ne sais pas si cela peut convenir,
Il est possible d'utiliser le date picker de Bootstrap UI pour angular, puis après tu récupère la date du plug dans ton controleur angularJs(une fois que l'utilisateur a cliqué sur une date), enfin, tu crées un filtre avec la variable date récupérée, qui filtre ton modèle en temps réel.

Pour exemple, voici ma fonction de filtrage par date, si mes souvenirs sont bons, $scope.dt est la date qui provient du plug in BootstrapUi date picker pour Angular :

Code:

1
2
3
4
5
6
<!--  FILTRE LE MODELE PAR DATE -->
			  $scope.filtreDate = function(candidat) {
					var date = $scope.dt ; 
					var date = $filter('date')(date,'dd-MM-yyyy'); 
					return candidat.dateRdv === date;
				};

Cette fonction qui filtre le modèle par date s'applique ensuite automatiquement dans le ng-repeat, comme ceci (on la reconnait, car elle s'appelle filtreDate):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table class="CSSTableGenerator " >	
				<tr >
					<th>id</th>
					<th>Photo</th>
					<th>Prénom</th>
					<th>Nom</th>
					<th>Heure</th>
					<th>Evaluer</th>
				</tr>
				<tr ng-repeat="candidat in candidats | filter:query | filter:isActive |filter:filtreDate| orderBy:'heure'" >
					<td>{{candidat.id}}</td>
					<td><img src="{{candidat.photo}}" class="miniphoto"></img></td>
					<td>{{candidat.prenom}}</td>
					<td>{{candidat.nom.toUpperCase()}}</td>
					<td>{{candidat.heure}}</td>
					<td><button ng-click="getCandidat(candidat.id)">Evaluer</button></td>
				</tr>
			</table>

Attention, en l'occurence, la variable candidat.dateRdv présente dans le modèle doit avoir le format "compris" par BootstrapUi Angular date picker, c'est à dire que
si ton format de date est par exemple dd/mm/yyyy, alors tout doit être identique, mais si BootstrapUi Angular date picker te fournit une variable au format de date du style yyyy-mm-dd,
alors faut pas se planter, le top c'est qu'on peut le paramétrer pour qu'il soit en Français et qu'il fournisse une variable en Français.

Et voici une petite appli pas terrible que j'ai faite qui l'utilise :

http://nicolash.org/angular/app7.html#/

Clique sur "selectionner un candidat" puis choisit le 21 Avril 2015 pour voir le filtrage du modèle par date en action en temps réel (pas d'ajax).

Ah, j'oubliais, voici mon modèle de données avec les dates :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
 
 
{"id":"1","photo":"man.jpg",	"prenom":"Theodore", 	"nom":"Juvet","heure":"17:30",	"dateRdv":"21-04-2015", 		"evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"2","photo":"man.jpg",	"prenom":"Axel", 		"nom":"Chavert","heure":"08:30",	"dateRdv":"21-04-2015", 	"evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test2","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"3","photo":"candidat.jpg",	"prenom":"Mohammed", 	"nom":"Fata","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test3","rdvEffectue":"0","emploi":"","idmetier":"4","resultat":"","noteMoyenne":""},
{"id":"4","photo":"candidat.jpg",	"prenom":"Chavez", 		"nom":"Williams","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"10","cv":"5","orthographe":"5","etudes":"16","experience":"5","disponibilite":"2","communication":"12","maths":"4","lettres":"4","creativite":"10","sportivite":"5"},"notes":"Test4","rdvEffectue":"1","emploi":"Plombier","idmetier":"1","resultat":"78","noteMoyenne":"7.09"},
{"id":"5","photo":"candidat.jpg",	"prenom":"Phillipe", 	"nom":"Andrieux","heure":"17:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test8","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"6","photo":"candidat.jpg",	"prenom":"Axel", 		"nom":"Dubourg","heure":"08:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test7","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"7","photo":"candidat.jpg",	"prenom":"Trisha", 		"nom":"Ravel","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test40","rdvEffectue":"0","emploi":"","idmetier":"3","resultat":"","noteMoyenne":""},
{"id":"8","photo":"candidat.jpg",	"prenom":"Robert", 		"nom":"Zarinas","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"9","photo":"candidat.jpg",	"prenom":"Abdel", 		"nom":"Silias","heure":"17:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"2","cv":"18","orthographe":"14","etudes":"9","experience":"11","disponibilite":"12","communication":"13","maths":"3","lettres":"12","creativite":"5","sportivite":"11"},"notes":"Test","rdvEffectue":"1","emploi":"Plaquiste","idmetier":"2","resultat":"110","noteMoyenne":"10.00"},
{"id":"10","photo":"candidat.jpg",	"prenom":"Patrick", 	"nom":"Gonzales","heure":"08:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"0","resultat":"","noteMoyenne":""},
{"id":"11","photo":"candidat.jpg",	"prenom":"Thierry",		"nom":"Roc","heure":"10:30",		"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"4","resultat":"","noteMoyenne":""},
{"id":"12","photo":"candidat.jpg",	"prenom":"Ursula", 		"nom":"Hembert","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"1","resultat":"","noteMoyenne":""},
{"id":"13","photo":"personne.gif",	"prenom":"William", 	"nom":"Cindrocik","heure":"15:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"0","cv":"0","orthographe":"0","etudes":"0","experience":"0","disponibilite":"0","communication":"0","maths":"0","lettres":"0","creativite":"0","sportivite":"0"},"notes":"Test","rdvEffectue":"0","emploi":"","idmetier":"2","resultat":"","noteMoyenne":""},
{"id":"14","photo":"candidat.jpg",	"prenom":"Hammed", 		"nom":"Chaverto","heure":"11:30",	"dateRdv":"21-04-2015", "evaluation" : {"motivation":"18","cv":"5","orthographe":"15","etudes":"7","experience":"2","disponibilite":"2","communication":"3","maths":"4","lettres":"4","creativite":"5","sportivite":"3"},"notes":"Test","rdvEffectue":"1","emploi":"Commercial","idmetier":"5","resultat":"68","noteMoyenne":"6.18"},
{"id":"15","photo":"personne.gif",	"prenom":"Grondin", 	"nom":"Kirckpatrick","heure":"15:30","dateRdv":"21-04-2015", "evaluation" : {"motivation":"5","cv":"15","orthographe":"5","etudes":"3","experience":"12","disponibilite":"19","communication":"13","maths":"5","lettres":"15","creativite":"16","sportivite":"10"},"notes":"Test","rdvEffectue":"1","emploi":"Commercial","idmetier":"5","resultat":"118","noteMoyenne":"10.73"}
 
 
 
]