Comprendre et adapter l’écran calendrier au format français

Nombreux sont les cas où l’on a besoin d’un calendrier. Celui proposé dans le bouton « Nouvel écran » est un très bon début mais n’est pas au format français, c’est selon moi l’un des éléments les plus complexes à prendre en main.

Voici son fonctionnement et comment l’adapter.

1. Son fonctionnement

If(IsBlank(_userDomain); // Permet de définir les variables suivantes si elles ne l'ont pas déjà été.
         
	UpdateContext({_showLoading: true});; // Permet d'afficher un loader ou autre élément permettant d'afficher un message de chargement.
         
	Set(_userDomain; Right(User().Email; Len(User().Email) - Find("@"; User().Email)));; // Ajoute dans une variable le domaine de l'utilisateur connecté.
        
	Set(_dateSelected; Today());; // Ajoute dans une variable la date du jour 
         
	Set(_firstDayOfMonth; DateAdd(Today(); 1 - Day(Today()); Days));; // Ajoute dans une variable le premier jour du mois    

	Set(_firstDayInView; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth) - 2 + 1); Days));; // Définit dans une variable le premier jour à afficher dans la gallery de date 
        
	Set(_lastDayOfMonth; DateAdd(DateAdd(_firstDayOfMonth; 1; Months); -1; Days)));;   // Définit dans une variable le dernier jour à afficher dans la gallery de date 
        
       
Set(_calendarVisible; false);;  // Permet de masquer la gallery calendrier pendant le chargement.  
     
UpdateContext({_showLoading: true});; // Affiche l'élément de chargement et masque la gallery de date
     
Set(_myCalendar; Self.Selected);;   // Place le choix effectué dans la liste  
     
Set(_minDate; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth) - 2 + 1); Days));; // Sert de mémoire tampon en définissant la date de début pour éviter les doublons

Set(_maxDate; DateAdd(DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth) - 2 + 1); Days); 40; Days));;  // Sert de mémoire tampon en définissant la date de fin pour éviter les doublons       

ClearCollect(MyCalendarEvents; Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name; Text(_minDate; UTC); Text(_maxDate; UTC)).value);; // Place dans une collection les évènements du mois en cours du calendrier sélectionné     
   
UpdateContext({_showLoading: false});; // Masque l'élément de chargement pour afficher la gallery de date
      
Set(_calendarVisible; true) // Permet d'afficher la gallery calendrier une fois le chargement terminé

Le calendrier est composé de 5 éléments :

• Un texte affichant le mois et l’année
• Un bouton pour charger le mois précédent
• Un bouton pour charger le mois suivant
• Une gallery de semaine
• Une gallery de date

Les deux boutons modifient les variables initialisées dans la liste déroulante pour charger les éléments du mois suivant ou précédent.

La gallery de date a pour « Items » un tableau de chiffres allants de 0 à 41, soit 42 éléments, soit 6 semaines. Divisée en 7 colonnes, elle permet d’afficher une ligne par semaine et se compose de 3 éléments :

• Un label affichant le numéro du jour. Sa propriété « OnSelect » définit la variable _dateSelected avec le jour sélectionné. Le numéro affiché est l’adition de la variable _firstDayInView et de la valeur de l’élément. Ainsi on aurait pour un début de mois commençant en début de semaine :
  Lundi : 1 + 0 = 1
  Mardi : 1 + 1 = 2
  Mercredi 1 + 2 = 3 etc…
  Sa propriété « Visible » permet d’être masquée si la semaine complète n’est pas dans le mois en cours. On évite ainsi du « bruit ».
• Un cercle permettant d’afficher la sélection de l’utilisateur (Subcircle). Il se rend visible lorsque la date sélectionnée est égale au jour de la gallery.
• Un cercle signalant qu’un évènement est présent dans le calendrier (Circle). Il se rend visible quand un élément dans la collection MyCalendarEvents correspond au jour de la gallery.
  

2) L’adapter au format français

Le principe sera de positionner le lundi en première colonne de la gallery et d’indiquer dans les différentes variables que le premier jour de la semaine n’est pas le dimanche mais le lundi.

Voici les différents espaces à configurer et le code à remplacer :

• La propriété « Items » de la gallery de semaine :

["lun";"mar";"mer";"jeu";"ven";"sam";"dim"]

• La propriété « OnSelect » du menu déroulant :

If(IsBlank(_userDomain);         
	UpdateContext({_showLoading: true});;         
	Set(_userDomain; Right(User().Email; Len(User().Email) - Find("@"; User().Email)));;         
    Set(_dateSelected;Today());;
    Set(_firstDayOfMonth;DateAdd(Today();1-Day(Today());Days));;
    Set(_firstDayInView;DateAdd(_firstDayOfMonth;-(Weekday(_firstDayOfMonth;StartOfWeek.Monday)-2+1);Days));;
    Set(_lastDayOfMonth;DateAdd(DateAdd(_firstDayOfMonth;1;Months);-1;Days));;   
);;   
      
Set(_calendarVisible; false);;         
UpdateContext({_showLoading: true});;         
Set(_myCalendar; Self.Selected);;         
Set(_minDate;DateAdd(_firstDayOfMonth;-(Weekday(_firstDayOfMonth)-2+1);Days));;
Set(_maxDate;DateAdd(DateAdd(_firstDayOfMonth;-(Weekday(_firstDayOfMonth)-2+1);Days);40;Days));;        
ClearCollect(MyCalendarEvents; Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name; Text(_minDate; UTC); Text(_maxDate; UTC)).value);;         
UpdateContext({_showLoading: false});;         
Set(_calendarVisible; true)

• La propriété « OnSelect » du bouton de gauche

/*Change les variables avec le mois précédant*/
Set(_firstDayOfMonth; DateAdd(_firstDayOfMonth; -1; Months));;
Set(_firstDayInView; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth;Monday) - 2 + 1); Days));;
Set(_lastDayOfMonth; DateAdd(DateAdd(_firstDayOfMonth; 1; Months); -1; Days));;

/*Collecte les évènnement du calendrier du mois précédent. Met à jour _minDate pour éviter les doublons si l'utilisateur reviens sur ce mois*/
If(_lastDayOfMonth > _maxDate; Set(_maxDate; _lastDayOfMonth);; 
Collect(MyCalendarEvents; Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name; Text(_minDate; UTC); Text(_lastDayOfMonth; UTC)).value))

• La propriété « OnSelect » du bouton de droite

/*Modifie les variables pour afficher le mois précedant*/
Set(_firstDayOfMonth; DateAdd(_firstDayOfMonth; 1; Months));;
Set(_firstDayInView; DateAdd(_firstDayOfMonth; -(Weekday(_firstDayOfMonth;Monday) - 2 + 1); Days));;
/*Collecte les évènement du calendrier du mois suivant. Met à jour _maxDate pour éviter les doublons si 'utilisateur reviens sur ce mois.*/
Set(_lastDayOfMonth; DateAdd(DateAdd(_firstDayOfMonth; 1; Months); -1; Days));;
If(_lastDayOfMonth > _maxDate; Set(_maxDate; _lastDayOfMonth);;
 Collect(MyCalendarEvents; Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name; Text(_firstDayOfMonth; UTC); Text(_maxDate; UTC)).value))

• La propriété « Visible » du label de la gallery de date

 !(DateAdd(_firstDayInView;ThisItem.Value;Days) - Weekday(DateAdd(_firstDayInView;ThisItem.Value;Days);StartOfWeek.Monday) +1  > _lastDayOfMonth)

Vous pouvez télécharger une application via ce lien dont les changements ci-dessus ont déjà été réalisés.

---

Bonus

Griser les évènements antérieur à aujourd’hui. Dans la propriété « Fill » du cercle d’évènement :

If(DateAdd(_firstDayInView;ThisItem.Value;Days)>=Today();RGBA(186; 202; 226; 1);
RGBA(128; 128; 128; 1))

---

J’espère que cet article vous aidera à y voir plus clair et vous aidera dans votre développement.

Si vous avez des idées d’optimisation, n’hésitez pas à les partager en commentaire.