Temps maître avec l'interface de Kendo pour le planificateur angulaire

Le planificateur pour Kendo UI pour Angular est arrivé. Découvrez tout ce que vous pouvez faire avec ce nouveau composant aujourd'hui et dites-nous où vous souhaitez le voir passer ensuite.

Je suis plus qu'heureux de pouvoir écrire ces mots: The Kendo UI for Angular Le composant du planificateur est enfin arrivé! Je sais que vous êtes nombreux à attendre ce composant et que le jour est venu où vous pouvez commencer à développer des capacités de planification pour vos applications Angular!

Il y a beaucoup de sujets à aborder avec ce composant. Je souhaitais donc vous présenter le planificateur de manière à vous donner une idée de ce qu'il est possible de faire avec le composant et de ce que nous cherchons à ajouter ultérieurement. [

Liaison des données de base

Il existe plusieurs méthodes vous pouvez vous lier au planificateur, mais la classe SchedulerEvent est au cœur de tout. Comme les composants traitent des dates assez facilement, nous avons besoin de plus d'informations sur les événements que de simplement fournir un tableau de dates JavaScript. C'est pourquoi nous avons créé la classe SchedulerEvent . Discutons un peu de cette classe avant d’en faire plus sur la liaison.

La classe SchedulerEvent

La classe SchedulerEvent est une classe auxiliaire qui nous permet d’interfacer avec quelque chose d’aussi avancé que le planificateur. SchedulerEvent est simplement un ensemble de champs conçus pour garantir le bon fonctionnement du planificateur.

Remarque: Pour ceux d'entre vous qui ont utilisé le Scheduler de notre jQuery bibliothèque de composants cela semblera assez familier car nous avions aussi une classe prête pour la planification d’événements.

Je recommande de consulter la documentation pour plus de détails, mais voici un bref aperçu des champs. disponible:

Requis

Non requis

• description
• endTimezone
• id
• recurrenceExceptions
• recurrenceId
• recurrenceId
• 19659021] Les noms des champs indiquent en quelque sorte leur fonction, mais il est assez facile de voir comment le construire par vous-même lorsque vous suivez les SchedulerEvent API docs .

  itération future du planificateur, nous aurons une option f ou des champs de modèle de mappage dans la configuration du composant, mais avec cette version initiale, vous devrez configurer vos événements de manière plus manuelle.

  Comme astuce rapide, si vous avez un modèle existant que vous souhaitez utiliser pour vous lier au planificateur, vous pouvez simplement mapper votre modèle à un tableau d’événements tels que extrait de notre documentation :

   importer {SchedulerEvent} à partir de '@ progress / kendo-angular-scheduler';
  
  const events = model.map (dataItem => (
     {
      id: dataItem.TaskID,
      démarrer: dataItem.Start,
      end: dataItem.End,
      isAllDay: dataItem.IsAllDay,
      titre: dataItem.Title,
      // champs optionnels
      startTimezone: dataItem.startTimezone,
      endTimezone: dataItem.endTimezone,
      description: dataItem.Description,
      recurrenceRule: dataItem.RecurrenceRule,
      recurrenceId: dataItem.RecurrenceID,
      recurrenceException: dataItem.RecurrenceException
    }
  )); 

  Liaison

  Une fois que nous sommes familiarisés avec la configuration d’événements individuels, allons de l'avant et établissons une liaison avec le planificateur! Il y a actuellement deux façons d'utiliser la directive incorporée ou la reliure manuelle .

  La ​​directive incorporée

   import {Component} from '@ angular / core' ;
  importer {SchedulerEvent} depuis '@ progress / kendo-angular-scheduler';
  
  @Composant({
    sélecteur: 'my-app',
    modèle: `
      
        
        
      
    
  })
  
  classe d'exportation AppComponent {
    public selectedDate: Date = new Date ('2018-10-22');
    événements publics: SchedulerEvent [] = [{
      id: 1,
      title: 'Breakfast',
      start: new Date('2018-10-22T09:00:00'),
      end: new Date('2018-10-22T09:30:00'),
      recurrenceRule: 'FREQ=DAILY;COUNT=5;'
    }];
  } 

  C'est assez facile à configurer. Une fois que nous avons défini notre tableau d'objets SchedulerEvent nous utilisons ensuite l'attribut [kendoSchedulerBinding] et passons nos événements à cette propriété. Cette approche filtre les événements en dehors de la plage pour la vue actuelle et étend la série récurrente en mémoire.

  Manual Binding

   import {Component} from '@ angular / core';
  importer {SchedulerEvent} depuis '@ progress / kendo-angular-scheduler';
  
  @Composant({
    sélecteur: 'my-app',
    modèle: `
      
        
        
      
    
  })
  
  classe d'exportation AppComponent {
    public selectedDate: Date = new Date ('2018-10-22');
    événements publics: SchedulerEvent [] = [{
      id: 1,
      title: 'Breakfast',
      start: new Date('2018-10-22T09:00:00'),
      end: new Date('2018-10-22T09:30:00'),
    }];
  } 

  Avec la liaison manuelle, nous utilisons plutôt l'attribut [events] lors de la liaison à nos événements. Comme mentionné, vous devez effectuer un peu plus de travail sur les jambes ici et le moteur de récurrence intégré ne sera pas utilisé, mais cela vous donne une certaine flexibilité pour vous assurer que le planificateur s'intègre parfaitement à votre application.

  Modification

  l'édition est faite en utilisant la directive réactive, kendoSchedulerReactiveEditing . Il s'agit d'un formulaire réactif piloté par un modèle qui est le seul moyen pris en charge de modifier ces éléments à la date de rédaction de cet article de blog (novembre 2018). Cependant, à l'avenir, nous ajouterons également un support pour Forms-Driven Forms . L’édition est également gérée par un utilisateur qui double-clique sur un événement, car le déplacement / redimensionnement d’un événement n’est pas (encore) disponible. En passant, il s’agit de l’un des premiers éléments que nous souhaitons aborder au cours des deux prochaines semaines. Il sera donc ajouté dès qu’il sera disponible dans une future version du composant!

  l’article de documentation sur l’édition automatique pour voir exactement comment activer l’édition dans votre propre implémentation du planificateur.

  Vues

  En tant que partie Angular Scheduler prend en charge les vues suivantes:

  Vue jours et semaines

  Vue mensuelle [19659047] 004-ordonnanceur-vues-mois "title =" 004-ordonnanceur-vues-mois "/>

  Vue chronologique

  comme décrit ici . Tout ce que vous faites est de définir la propriété timezone une fois que le code est entré, ce qui en fait une importation rapide et vous êtes prêt pour les courses!

  Comme indiqué ci-dessus, les événements peuvent également avoir leurs propres informations de fuseau horaire, ce qui donne Encore une autre façon de gérer les ressources situées dans différents fuseaux horaires.

  En parlant de fuseaux horaires, vous aurez probablement besoin d’organiser des planificateurs pour divers scénarios d’internationalisation et de mondialisation en raison de la présence de personnes dans différents pays. Heureusement, cela est assez facile, car Angular Scheduler prend en charge l'internationalisation par le biais du paquet Kendo UI kendo-intl et vous permet également de créer des messages personnalisés ] et remplacez toutes les chaînes pouvant être restituées par défaut.

  Mais attendez, il y en a plus!

  Ce que je viens de décrire vous donne un aperçu général de ce qu'il est possible de faire avec la nouvelle interface utilisateur Kendo pour Angular Scheduler, mais il y en a certainement plus. travailler avec dans le composant! Consultez la documentation du planificateur pour obtenir davantage d'échantillons de code et de références d'API.

  L'avenir

  Comme vous pouvez le voir dans nos pages de documentation, nous considérons cette version initiale comme une version bêta en raison de: ne pas avoir l'ensemble des fonctionnalités que nous voyons dans l'équivalent jQuery. Cela étant dit, je voulais donner à chacun une idée de ce sur quoi nous travaillons pour une future version du Kendo UI pour Angular . Parmi les principales fonctionnalités sur lesquelles nous allons travailler, citons:

  • Utilisation de ressources
  • Redimensionnement et réorganisation des événements

  Notre objectif ultime est de faire en sorte que le planificateur chevauche le jeu de fonctionnalités disponible dans la bibliothèque. Édition jQuery, il ne reste donc plus qu'à concevoir ce composant!

  Merci de nous faire savoir ce que vous pensez du composant! Je suis ravi de pouvoir enfin apporter cet énorme composant à la communauté des développeurs Angular et je suis sûr que vous disposez de nombreux endroits où vous pouvez utiliser un planificateur et l'utiliser déjà! ?

  Nous sommes impatients d'entendre vos pensées. Si vous trouvez quelque chose qui manque que vous aimeriez voir dans une version future du composant, vous pouvez envoyer vos commentaires à notre portail de commentaires publics ou laisser un commentaire ci-dessous.

  Bien sûr, si vous n'avez pas encore essayé la Kendo UI pour Angular, vous pouvez vous amuser avec le planificateur et bien plus encore aujourd'hui en commençant un essai gratuit aujourd'hui.

  ---