Contrôle de l'affichage et de la sélection dans le calendrier

Le composant Calendrier de Telerik n’est pas limité à l’affichage des mois, il permet également à l’utilisateur de sélectionner des années, des mois ou des jours. Et, avec un peu de code, vous pouvez contrôler le niveau auquel le contrôle fonctionne.

Le composant TelerikCalendar dans Telerik UI for Blazor offre à l'utilisateur de nombreuses options de navigation – et vous n'avez rien à faire. Mais, si vous voulez écrire du code, vous pouvez faciliter la tâche de vos utilisateurs pour trouver la date de leur choix.

Dans mon post précédent je vous ai montré comment utiliser le Composant TelerikCalendar dans une interface utilisateur riche, créé en intégrant plusieurs composants Telerik. Cependant, cette publication couvrira certaines fonctionnalités supplémentaires liées au choix des dates dont j'ai besoin pour mon étude de cas (qui affiche des informations détaillées sur un client).

Navigation vers la date souhaitée

Par défaut, le contrôle de calendrier affiche un seul mois – vous sélectionnez ce mois via l'attribut Value de l'élément . L'affichage d'une date dans le calendrier peut être aussi simple que l'ajout de cet élément à votre page:

Dans mon étude de cas, toutefois, la date que je lie est la date à laquelle le client a rejoint le programme de fidélité de l'entreprise – ce qui pourrait être: quelque temps dans le passé lointain. Il serait cruel de forcer l'utilisateur à parcourir plusieurs mois pour obtenir la date souhaitée.

Heureusement, le composant TelerikCalendar s'en occupe. Si l'utilisateur clique sur le mois et l'année affichés dans le coin supérieur gauche du calendrier, le TelerikCalendar bascule automatiquement dans une vue qui affiche les mois de l'année (et la date indiquée dans les commutateurs du coin supérieur gauche montrer seulement l'année). L'utilisateur peut ensuite cliquer sur le «mois de son choix» pour revenir à l'affichage des jours du mois. Alternativement, l'utilisateur peut cliquer sur l'année dans le coin supérieur gauche et obtenir un affichage des années, ce qui lui permet de se déplacer rapidement dans le chemin lointain ou dans le futur.

Mais attendez, il y a plus!

Sélection du mois ou de l'année Vous voulez

L'élément de calendrier a également un attribut BottomView qui vous permet de contrôler la sélection de l'utilisateur. Si vous définissez BottomView sur CalendarView.Month alors, dans la vue répertoriant tous les mois, cliquer sur un nom de mois n'affiche pas les dates du mois. mois. Au lieu de cela, il permet à l'utilisateur de sélectionner ce mois. De même, si vous définissez BottomView sur CalendarView.Year lorsque l'agenda affiche une liste d'années, l'utilisateur peut sélectionner une année.

si vous souhaitez tirer parti de l'attribut BottomView vous devez également contrôler l'affichage du calendrier actuellement utilisé: jour, mois ou année. Vous pouvez contrôler cet affichage via l'attribut View . En regroupant ces deux attributs, cet élément afficherait une liste des mois de l'année et permettrait à l'utilisateur de sélectionner un mois:

Ainsi, en gérant les vues et de fond Attributs, vous pouvez créer une interface utilisateur avec plusieurs composants de calendrier liés permettant à l'utilisateur de sélectionner:

1. une année dans le premier composant
2. un mois dans le deuxième composant pour l'année
3. une date spécifique dans un troisième composant pour l'année et le mois

La ​​meilleure partie est que vous n'avez même pas besoin de trois copies du composant: à l'aide de la méthode Navigate () du composant vous pouvez définir la vue du composant dans une ligne de code et utilisez une autre ligne de code pour définir le BottomView ce qui permet à l'utilisateur de définir le niveau de sélection souhaité.

Pour cela, vous devez d'abord accéder à la composant calendar de code pour que vous puissiez appeler sa méthode Navigate () . Pour cela, vous devez réécrire votre élément afin de le lier à un champ ou à une propriété de votre code avec l’attribut Blazor ref . Vous devez également lier BottomView à un champ ou à une propriété

L’élément résultant, qui affiche la liste initiale des années, devrait ressembler à ceci:

Ensuite, vous avez besoin de trois boutons pour laisser le bouton choix de l'utilisateur entre les années, les mois ou les jours:

 Sélectionnez l'année 
 Sélectionnez le mois 
 Sélectionnez le jour 

Dans votre section de code, vous devez configurer les champs ou les propriétés pour contenir les références que vous utilisez. votre calendrier (y compris l'initialisation du champ ou de la propriété qui gère le BottomView ). Dans mon cas, j'ai décidé d'utiliser des champs afin que mon code ressemble à ceci:

 @code {
  calendrier privé TelerikCalendar;
  private CalendarView selectionMode = CalendarView.Decade;

  // ...
} 

Les trois méthodes appelées à partir de mes boutons se ressemblent beaucoup: elles utilisent la méthode Navigate () pour modifier l'affichage en cours, puis définissent le BottomView à ce niveau. Le seul problème intéressant est que la méthode Navigate () nécessite que vous passiez une date qui deviendra la date actuellement sélectionnée du calendrier. Dans mon scénario, je ne souhaite pas remplacer la date sélectionnée par l'utilisateur, je passe donc simplement la date dans la propriété Value de l'agenda, qui sera la dernière date sélectionnée par l'utilisateur.

trois méthodes ressemblent à ceci (et sont suffisamment similaires pour être probablement regroupées en une seule méthode qui accepte un paramètre):

 private void SetViewToShowYears ()
{
  calendar.Navigate (calendar.Value, Telerik.Blazor.CalendarView.Decade);
  selectionLevel = CalendarView.Decade;
}

voView privé SetViewToShowMonths ()
{
  calendar.Navigate (calendar.Value, Telerik.Blazor.CalendarView.Year);
  selectionLevel = CalendarView.Year;
}

SetViewToShowDays ()
{
  calendar.Navigate (calendar.Value, Telerik.Blazor.CalendarView.Month);
  selectionLevel = CalendarView.Month;
} 

En passant, comme je l'ai mentionné dans mon post précédent le composant TelerikCalendar a attributs qui laissent vous contrôlez dans quelle mesure, dans le passé ou dans l'avenir, l'utilisateur est autorisé à sélectionner des dates. Toutes ces vues respectent ces limites en ne laissant pas la page utilisateur dépasser les limites et en désactivant les dates en dehors de la plage si la vue les affiche.

Une mise en garde cependant: cette colonne est écrite avec l'un des aperçus Blazor ainsi (comme avec technologie de prévisualisation), les choses peuvent être «bizarres» et elles vont presque certainement changer avant de passer à la production. Personnellement, je ne peux pas attendre.