Exemples pour partager une expérience de l'utilisation du calendrier de l'interface utilisateur en angulaire

Cet article vous apporte une certaine expérience de l'utilisation du calendrier de l'interface utilisateur en angulaire (recommandé). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

ui Calendar est un plug-in de commande angulaire qui encapsule le calendrier complet

Adresse officielle : http://angular-ui.github.io/ui-calendar/

Je ne présenterai pas l'installation des packages de calendrier complet et de calendrier ui. Téléchargez-le depuis Baidu.

Une fois le package installé, ajoutez la référence du chemin

Cet environnement de développement angulaire1.x

Appelez

<p ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></p>

Configurez les paramètres dans le contrôleur

/* config object */
$scope.uiConfig = {
　　calendar: {
　　　　height:..,//容器高度
　　　　editable:..,//是否可编辑
　　　　header: {
　　　　　　right: '',//右边操作按钮
　　　　　　center: 'title',
　　　　　　left: '',//左边操作按钮

　　　　},

　　}

};

$scope.eventSources = [$scope.events];

Voici quelques configurations de base. Veuillez en configurer d'autres en fonction de vos besoins

Parlons de certains des problèmes que j'ai rencontrés lors de l'utilisation. Commençons par les exigences :

1. Exigences du produit : les événements quotidiens doivent être triés par champ "x".

2. Filtrez les données d'affichage des différents mois en fonction du mois.

Tout d'abord, résolvons le premier problème, vérifions si le calendrier complet a une fonction de tri, j'ai passé beaucoup de temps sur le chinois Baidu, d'accord, j'ai abandonné. . . En effectuant une recherche en anglais, j'ai finalement découvert que la nouvelle version de fullcalendar fournit un champ de tri et que la valeur par défaut est « titre ». J'ai donc réinstallé fullcalendar et défini manuellement la méthode de tri : ajoutez un champ de tri personnalisé à l'ensemble de données, tel que { title:'111', sort:'22'}, puis ajoutez eventOrder:'sort' dans $scope.urConfig.calendar. Je suis très heureux que le premier problème soit résolu !

La deuxième question est d'afficher différentes vues mensuelles en fonction du temps. Ne suffit-il pas de simplement jeter les ensembles de données de différents mois dans eventSources ? Je l'ai essayé, euh, la vue ne change pas. . . Le voyage de recherche anglais a recommencé. . .
Enfin trouvé un message, la méthode est la suivante :

1. Injectez uiCalendarConfig dans le contrôleur, puis uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', CalendarMonth);calendarMonth a besoin à charger et à afficher le mois, mais après avoir appelé uiCalendarConfig.calendars.myCalendar n'est pas défini...

Solution :

$timeout(function(){

　　uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);

});

A cette étape, les fonctions de base requises par le projet ont été mis en œuvre.

Démarrer l'optimisation :

1. Ajustez l'interface d'affichage en chinois, ajoutez lang:'zh-cn' ou locale:'zh-cn' à la configuration, si ce n'est toujours pas le cas. Cela ne fonctionne pas, veuillez mettre à niveau votre package de calendrier d'interface utilisateur

2. La vue se charge très lentement et la recherche en anglais prend beaucoup de temps. . . Plaignez-vous-en. Les Chinois n'ont-ils pas rencontré ce genre de problème ? Je ne le trouve pas du tout dans les recherches chinoises. . . , j'ai finalement vu un message :

Changez $scope.eventSources = [$scope.events]; en $scope.eventSources = [],

$scope.events est reçu via la demande de retour Après uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events) a été chargé, je l'ai essayé. Bien, le problème de lenteur est résolu. . . Mais un nouveau problème arrive. La vue n’effacera pas mes dernières données, ce qui entraînera des données en double !

Finalement changé en $scope.eventSources.push($scope.events); bien que le problème ait été résolu, le problème ci-dessus n'a pas été résolu. . . Les conseils d’experts sont les bienvenus !

Voici quelques-uns des problèmes que j'ai rencontrés lors de l'utilisation. . . J'espère que cela aidera les amis qui ont le même problème ! Enregistrez-le vous-même pour une utilisation ultérieure !

Recommandations associées :

Exemples détaillant les méthodes de transfert de valeur et de communication entre différents composants en angulaire

Affichés en Angular4 Exemple de code de style CSS

Explication détaillée de l'implémentation angulaire de la fonction de planification (peut ajouter et masquer le contenu d'affichage)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!