Fermer

octobre 17, 2019

Construire un mini planificateur de tâches angulaire avec Kendo UI


Dans ce didacticiel, nous verrons comment utiliser les composants de Kendo UI lors de la construction d’un planificateur d’événements.

Kendo UI est une bibliothèque utilisée pour créer des applications plus rapidement. Kendo UI fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue, et plus de 20 composants permettant de créer des graphiques, des tableaux de données et des pages de glisser-déposer.

Kendo UI est personnalisable. il fournit également un ensemble de thèmes pour Material UI, Bootstrap, etc. et il est livré avec un jeu d'icônes et une palette de couleurs. Les composants de Kendo UI étant distribués sous la forme de plusieurs packages npm, vous ne craignez donc pas de gonfler votre application avec des composants inutiles ni d'augmenter votre offre de construction.

Angular est un framework JavaScript permettant de créer une application Web. Il offre les meilleurs pratiques et outils pour faciliter le développement d'applications. Angular utilise des modèles déclaratifs, une injection de dépendance et Observables pour alimenter des applications pouvant être exécutées sur plusieurs plates-formes.

Nous allons utiliser certains des composants fournis par Kendo UI pour créer une application de planification de tâches simple. L'application permettra aux utilisateurs de créer des tâches en spécifiant les dates de début et de fin ainsi que les descriptions appropriées. L’événement sera affiché sur un composant du planificateur (calendrier).

Pour débuter avec le didacticiel, vous aurez besoin d’une connaissance de base de Angular. Assurez-vous également que Node est installé sur votre ordinateur personnel. Si vous n'avez aucune connaissance préalable de Angular, veuillez suivre le tutoriel officiel ici et téléchargez Node pour votre PC ici si vous ne l'avez pas déjà fait.

Voici une capture d'écran de ce que nous Je construirai:

 Planificateur de tâches angulaire image 1

Initialisation de l'application et installation des dépendances

Pour commencer, nous allons utiliser le CLI (interface de ligne de commande) fourni par l'équipe Angular pour initialiser notre projet.

Installez d'abord le CLI. en exécutant npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des paquets. Il sera disponible sur votre PC si vous avez Node installé; sinon, téléchargez le nœud ici .

Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:

pour créer un nouveau projet Angular --style = scss . ]

Cette commande est utilisée pour initialiser un nouveau projet angulaire. le projet utilisera SCSS comme pré-processeur.

Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:

     Ng add @ progress / kendo-angular-scheduler
     ng add @ progress / kendo-angular-dateinputs

Ouvrez un terminal dans le dossier du projet et démarrez l'application en exécutant ng serve . Si vous ouvrez votre navigateur et visitez le lien http: // localhost: 4200 vous devriez voir la capture d'écran ci-dessous si tout s'est bien passé.

 programmateur de tâches angulaire image 2

Composant de calendrier

Nous allons créer un composant pour contenir le planificateur d’événements. Ce composant rendra le composant du planificateur de l’événement de Kendo UI. Le composant affichera les événements entrés par l'utilisateur. Pour générer le composant, exécutez la commande suivante:

     ng générer un planificateur de composant

Ouvrez le fichier scheduler.component.html nouvellement créé et mettez à jour son contenu avec l'extrait de code ci-dessous:

     < div > 
       < kendo-scheduler 
        [kendoSchedulerBinding] =  " events " 
        [selectedDate] =  " selectedDate " 
         style  = " de hauteur : [19659035] 600  px ;   "
      > 
         < kendo-ordonnanceur-jour-vue  [startTime] = "  début [...] ] " > 
         </  vue du jour du kendo-ordonnanceur > 
         < vue du jour du kendo-ordonnanceur  [startTime] = "  startTime  " > 
         </  vue de la semaine du kendo > 
         < vue du mois de kendo  ]>   </  vue-mois-kendo-vue-mois > 
         < vue-ligne-kendo-calendrier >   </  planificateur kendo -Timel ine-view > 
         < agenda de kendo-agenda-vue >   </  agenda de kendo-agenda-agenda > 
       </  planificateur de kendo > 
     </  div > 

Dans l’extrait ci-dessus, nous présentons le composant du planificateur fourni par Kendo UI. Ce composant recevra un tableau d'événements en entrée. De plus, certains composants de contrôle, tels que les composants de vue du jour de vue de semaine etc. Ces composants agissent comme des commandes pour le planificateur et peuvent être utilisés pour mettre à jour l'affichage actuel du planificateur.

Ensuite, nous mettrons à jour le fichier de composant planificateur pour déclarer les variables que nous avons utilisées dans le fichier de modèle. :

     import   { Composant  OnInit  Input }   de   '@ angular / core' ; 
    
     export   interface   Evénement   {
      Titre :  String ; 
      Description :  Chaîne ; 
      Début :  Date ; 
      Fin :  Date ; 
    } 
    
    @  Composant  ( {
      sélecteur :   'app-ordonnanceur' 
      templateUrl :   './ scheduler.component.html' 
      styleUrls :   [ './ scheduler.component.scss' ] 
    } ) 
     export   classe   SchedulerComponent   implémente [19659075] OnInit   {
       constructeur  ()   { } 
      @  Input  ()  événements :  Evénement  [] ; 
      startTime  =   '7:00' ; 
      selectedDate  =   new   Date  () ; 
       ngOnInit  ()   {
      } 
     de  ; 

Le composant recevra les événements d'un composant parent utilisant les liaisons Input . De plus, nous allons définir la date actuelle sur le planificateur à l'aide de la variable selectedDate . Il en va de même pour la startTime .

Ensuite, nous allons rendre le composant situé dans le fichier app.component.html . Ouvrez le fichier et mettez-le à jour pour qu'il soit similaire à l'extrait ci-dessous:

    
    
     < header > 
      
     </  header > 
     < main  > 
       < div   class  =  " planificateur "  > 
         < app-scheduler  [events]  =  " événements "  >  </  app-ordonnanceur > 
       </  div [19659025]> 
       < div   class  =  " forme d'événement "  > 
        
       </  div [19659025]> 
     </  main > 

Dans l’extrait de code, nous transmettons un tableau d’événements au composant du planificateur . Les événements seront gérés par le composant de l'application.

Nous allons maintenant ajouter quelques styles pour le composant. Copiez l'extrait ci-dessous dans le fichier app.component.scss :

     main  {
       display :  flex ; 
       width . :   90% ; 
       marge :   5%  auto ; 
      
       .scheduler  {
         flex :   ] 1   1 ; 
      } 
       .event-form  {
         flex :   1   1  [
      } 
      }. 19659077]} 

Ensuite, nous mettrons à jour le fichier de composant pour déclarer les variables que nous avons utilisées dans le fichier modèle:

import { Component } de '@ angular / noyau ';
    @ Composant ( {
      sélecteur : 'app-root'
      templateUrl : './ app.component.html'
      styleUrls : [ './ app.component.scss' ]
} )
export class AppComponent 19659069] {
      événements : événement [] = [] ;
surNewEvent ( événement




Source link