Composants / cmpCalendar
Composant Power Apps Canvas
Bien plus qu'un simple date picker.
Ce composant a été conçu avec un objectif clair : offrir une personnalisation complète grâce à un large éventail d'options, tout en offrant un rendu professionnel. Multilingue, facilement thémable, avec gestion des horaires et de nombreuses fonctionnalités avancées, il met toute la flexibilité dont vous avez besoin à portée de main.
Aperçu
Concrètement, cmpCalendar affiche le contexte autour de la date
(la semaine, les événements, les jours à éviter) : une véritable lentille de
planning. Côté technique, c'est du Power Apps Canvas pur, validé
sur le schéma pa.yaml v3.0 officiel de Microsoft, sans aucune dépendance aux
contrôles modernes.
Le composant suit un principe simple : on enrichit l'affichage en passant des
tables (Markers, Events,
Languages, Theme) plutôt qu'en multipliant
les booléens. Une seule table Markers remplace ainsi fériés, surbrillances et
blocages.
Fonctionnalités phares
Chaque fonctionnalité correspond à une propriété que vous réglez sur le composant.
Deux systèmes au choix via WeekNumbering : ISO 8601 (méthode du jeudiRègle ISO 8601 : une semaine appartient à l'année où tombe son jeudi. La semaine 1 est donc celle qui contient le premier jeudi de l'année. Résultat : à cheval sur deux années, le numéro reste juste.) ou nord-américain (la semaine 1 est celle qui contient le 1er janvier). Cliquer un numéro sélectionne ou étend toute la semaine.
Simple, plage (range) ou multiple, avec désélection au re-clic via AllowEmptySelection.
Jusqu'à MaxDots (plafond 3) pastilles colorées par jour (table Events) qui s'empilent sous la date.
Une table Markers unique : chaque ligne porte sa couleur, son style (fond plein ou anneau), un libellé et un flag « bloqué ».
Mois/année, chips (semaine, trimestre, jour de l'année), ligne « date sélectionnée » consciente du mode, bouton Aujourd'hui.
Deux mois côte à côte, chacun avec son rail des semaines ; la sélection est partagée et une plage s'étend sur les deux.
La sélection et le rail des semaines passent du cercle au carré arrondi via SelectionRadius et RailRadius.
Un champ HH : MM qui ouvre une galerie heures/minutes en popup - 12 h (AM/PM) ou 24 h, pas des minutes réglable, heure de début et de fin. Les sorties deviennent de vrais DateTime.
20 langues fournies dans la table Languages (EN, FR, DE, ES, IT, PT, NL, RU, et plus), sélectionnables dans le configurateur. Extensible par une simple ligne.
Mode confort ou compact : le compact réduit la taille des cellules, sans jamais masquer de ligne. La hauteur s'adapte au mois affiché (4 à 6 semaines, jamais de semaine vide en trop) ; le composant se dimensionne à partir de ses constantes et expose sa hauteur via ComponentHeight pour ajuster le conteneur hôte.
Elle n'affiche que ce qui est réellement présent à l'écran : la pastille « Sélection » apparaît dès qu'une date est choisie, « Bloqué » seulement s'il y a des jours bloqués visibles. Rien à gérer, et les libellés sont traduisibles.
Bascule clair/sombre via DarkMode, et chaque couleur (fond, texte, sélection, jour actuel, survol, bordures…) se redéfinit dans la table Theme - deux schémas « Light » et « Dark » entièrement personnalisables.
Aperçu interactif
Ajustez les réglages : l'aperçu se met à jour en direct (mois de démonstration : juillet 2026) et le YAML complet du composant est généré sous le configurateur, vos réglages injectés comme valeurs par défaut, prêt à committer ou packer.
Mode d'emploi
Indiquez le nom de votre instance et le séparateur de votre Power Apps Studio : les formules ci-dessous s'adaptent et suivent le mode choisi dans l'aperçu interactif. Copiez, collez dans la propriété indiquée, c'est prêt.
Propriétés du composant
Toutes les valeurs par défaut sont en anglais et entièrement surchargeables. Les types suivent la nomenclature Power Fx.
| Nom | Type | Défaut | Rôle |
|---|---|---|---|
CellW | Number | 41 | Largeur d'une cellule de jour. |
CellH | Number | 40 | Hauteur d'une ligne de semaine. |
WeekColW | Number | 40 | Largeur du rail des numéros de semaine. Mettre 0 pour le masquer. |
HeaderH | Number | 36 | Hauteur de la ligne d'en-tête des jours. |
| Nom | Type | Schéma de ligne | Rôle |
|---|---|---|---|
Markers | Table | { Date, Label, Color, AsBackground, Block } | Jours particuliers colorés sur la grille (jours fériés, mises en avant, dates bloquées). Un même jour peut avoir plusieurs lignes, dont les valeurs Label s'empilent (séparées par un retour à la ligne) dans son infobulle, mais seule la première ligne correspondante détermine la couleur et décide si le jour est dessiné en disque plein ou en simple contour (AsBackground). Le jour devient non sélectionnable dès que Block vaut true sur l'une de ses lignes. Les colonnes sont Date, Label, Color, AsBackground et Block. |
Events | Table | { Date, Color } | Petits points colorés sous le numéro du jour, chaque ligne en ajoutant un. Les lignes tombant sur la même date se cumulent jusqu'à un maximum de trois points ; pousser MaxDots au-delà de 3 ne change donc rien à l'écran. |
| Nom | Type | Champs | Rôle |
|---|---|---|---|
Selection | Record | { DefaultDate, DefaultEndDate, DefaultSelection, MinDate, MaxDate } | Valeurs de sélection par défaut et contraintes de dates. |
Selection ne sert que dans un mode. DefaultDate est
la date pré-sélectionnée en mode simple (et le mois sur lequel le calendrier s'ouvre) ;
DefaultEndDate la fin de plage pré-sélectionnée en mode plage ;
DefaultSelection les dates pré-cochées en mode multiple, sous forme de table de
lignes { Value } (même forme que la sortie SelectedDates).
MinDate et MaxDate bornent les dates atteignables.
DefaultSelection: Table({ Value: Date(1899, 1, 1) }) est une
sentinelle « rien de pré-coché » : une entrée de type table a besoin d'au moins
une ligne pour fixer sa colonne Value, on y met donc une date volontairement
antérieure à MinDate, que le composant ignore partout (elle n'apparaît jamais dans
SelectedDates). Pour vraiment pré-cocher des dates, remplacez-la par de vraies
dates, par exemple Table({ Value: Date(2026, 7, 3) }, { Value: Date(2026, 7, 10) }).
Settings, Record)| Champ | Type | Défaut | Rôle |
|---|---|---|---|
FieldMode | Boolean | false | Affichage réduit à un champ qui ouvre le calendrier si besoin. |
SelectRange | Boolean | false | Mode plage : choisir une date de début et de fin. |
SelectMultiple | Boolean | false | Mode multi-sélection : choisir plusieurs dates isolées. |
AllowEmptySelection | Boolean | true | Recliquer sur le jour sélectionné pour le désélectionner. |
DisableWeekends | Boolean | false | Rend les samedis et dimanches non sélectionnables. |
DualMonth | Boolean | false | Afficher/masquer deux mois consécutifs côte à côte. |
ShowHeader | Boolean | true | Afficher/masquer la ligne d'en-tête (résumé de la sélection + pastilles trimestre/semaine/jour). |
ShowFooter | Boolean | true | Afficher/masquer la barre de pied de page (Réinitialiser / Annuler / OK). |
ShowLegend | Boolean | true | Afficher/masquer la légende des couleurs Sélection / Bloqué. |
ShowWeekNumbers | Boolean | true | Afficher/masquer la colonne des numéros de semaine à gauche. |
WeekNumbering | Text | "iso" | Choix du mode d'année : "iso" (ISO 8601, à partir du lundi) ou "us" (semaine 1 = semaine du 1er janvier). |
FirstDayOfWeek | Text | "Monday" | Jour qui ouvre la semaine, de "Monday" à "Sunday". |
ShowOutsideDays | Boolean | true | Afficher/masquer les jours débordant des mois voisins. |
ShowTodayButton | Boolean | true | Afficher/masquer le bouton de raccourci « Aujourd'hui ». |
ShowWeekChip | Boolean | true | Afficher/masquer la pastille de semaine courante (p. ex. Wk 28) dans l'en-tête. |
ShowQuarterChip | Boolean | true | Afficher/masquer la pastille de trimestre (p. ex. Q3) dans l'en-tête. |
ShowDayChip | Boolean | true | Afficher/masquer la pastille de jour de l'année (p. ex. D 190) dans l'en-tête. |
DateFormat | Text | "ddd dd mmm yyyy" | Choix de l'affichage des dates affichées. |
ShowTime | Boolean | false | Afficher/masquer le sélecteur d'heure hh:mm. |
ShowEndTime | Boolean | false | Afficher/masquer le sélecteur d'heure de fin (visible seulement si ShowTime est actif). |
Use24h | Boolean | true | Choix du mode d'heure : true = format 24 heures, false = format 12 heures AM/PM. |
MinuteStep | Number | 1 | Intervalle entre les minutes proposées dans le sélecteur d'heure (1, 5, 15, …). |
TodayStyle | Text | "ring" | Choix du style d'affichage du marquage d'aujourd'hui : "ring", "fill" ou "bold". |
Density | Text | "comfortable" | Choix affichage : "comfortable" (taille normale) ou "compact". |
MaxDots | Number | 3 | Nombre max de points d'événement par jour (max : 3). |
SelectionRadius | Number | -1 | Rayon des coins du disque de sélection. Négatif = cercle/pilule complet. |
RailRadius | Number | 8 | Rayon des coins du surlignage de la colonne de semaine. Négatif : pilule complète. |
MaxSelectionCount | Number | 0 | Nombre max de dates en multi-sélection (0 : illimité). |
MaxRangeDays | Number | 0 | Longueur max d'une plage en jours (0 : illimité). |
| Nom | Type | Défaut | Rôle |
|---|---|---|---|
ConfirmDisabled | Boolean | false | Désactive le bouton OK. |
| Nom | Type | Défaut | Rôle |
|---|---|---|---|
Language | Text | "en" | Code de langue actif de l'interface. Il doit correspondre à un code de Languages (p. ex. "en", "fr", "es"). S'il est introuvable, on retombe sur la première ligne (anglaise) de Languages. |
Languages | Table | 20 langues | Table de traduction intégrée, chaque langue est représentée par un enregistrement de la table. En prendre en charge une nouvelle revient à copier l'enregistrement, à traduire ses chaînes et à pointer Language sur le nouveau Code. |
Languages : Code,
WeekdayNames ([...], toujours écrit lundi → dimanche, quel que soit
le jour qui ouvre la semaine : c'est Settings.FirstDayOfWeek qui fait pivoter l'affichage
et qui pioche dans cette liste, la réordonner ferait donc pivoter deux fois),
MonthNames ([...]),
Title, Confirm, Cancel,
Reset, Today, Clear, NoSelection,
LabelSelection / LabelRange (préfixe de la ligne de sélection),
WeekColumnHeader, ChipWeek / ChipQuarter / ChipDay
(+ leurs infobulles ChipWeekTip / ChipQuarterTip / ChipDayTip),
LegendSelected / LegendBlocked, TimeStart / TimeEnd,
les infobulles de navigation NavPrev / NavPrevLimit /
NavNext / NavNextLimit, et les libellés
TimeAm / TimePm (12 h).
Settings.DateFormat. Le changer une fois vaut pour toutes les langues, et une
langue ajoutée n'a pas à le redéclarer.
| Nom | Type | Défaut | Rôle |
|---|---|---|---|
DarkMode | Boolean | false | Choix du thème actif. true sélectionne le schéma "Dark", false le schéma "Light". |
Theme | Table | Light, Dark | La palette de couleurs est répartie en deux enregistrements "Dark" et "Light". Les deux doivent être présents car chaque ligne porte l'ensemble des couleurs ainsi que les deux icônes iconPrev et iconNext. |
Theme : Scheme ("Light" / "Dark"), ColourContainer, ColourBackground,
ColourTitle, ColourText, ColourNote,
ColourLine, ColourSelection, ColourOnSelection,
ColourToday, ColourButton, ColourHover,
ColourPress, ColourAdjacent, ColourRange
+ glyphes iconPrev et iconNext.
| Nom | Type | Rôle |
|---|---|---|
SelectedDate | DateAndTime | La date choisie en mode simple. Elle contient l'heure et la minute choisies quand le sélecteur d'heure est actif, sinon minuit. |
SelectedStartDate | DateAndTime | Premier jour de la plage sélectionnée. |
SelectedEndDate | DateAndTime | Fin de la plage sélectionnée. |
SelectedDates | Table | Chaque jour choisi en mode multi-sélection, sous forme de table à une colonne (Value). |
SelectedDateText | Text | Date sélectionnée déjà mise en forme pour l'affichage (mode simple), suivant le motif Settings.DateFormat. |
SelectedStartTime | Text | L'heure de début seule, mise en forme hh:mm et suivant le paramètre Use24h. Les sélections simple, plage et multiple la renseignent toutes, et en mode multiple une seule heure de début couvre tout l'ensemble. Vide quand ShowTime est inactif ou que rien n'est sélectionné. |
SelectedEndTime | Text | L'heure de fin seule, mise en forme hh:mm et suivant le paramètre Use24h. Elle n'apparaît que si ShowTime et ShowEndTime sont tous deux actifs, avec une seule heure de fin partagée pour tout l'ensemble en mode multiple, sinon vide. |
SelectedStartHour | Number | Heure de début sous forme de nombre (0-23), pour les calculs de dates. Vide quand ShowTime est inactif ou que rien n'est sélectionné. Globale en mode multiple. |
SelectedStartMinute | Number | La partie minute de l'heure de début (0-59), qui se vide dans les mêmes conditions que SelectedStartHour. Partagée sur tout l'ensemble en mode multiple. |
SelectedEndHour | Number | Heure de fin sous forme de nombre (0-23). Renseignée uniquement tant que ShowTime et ShowEndTime sont actifs et que quelque chose est sélectionné. Partagée en mode multiple. |
SelectedEndMinute | Number | Minute de fin (0-59), qui suit SelectedEndHour pour savoir quand elle se renseigne et quand elle se vide. Globale en mode multiple. |
DisplayedMonth | Number | Mois actuellement affiché (1-12). |
DisplayedYear | Number | Année actuellement affichée. |
ComponentHeight | Number | Hauteur rendue. La hauteur est dynamique (4 à 6 lignes de semaine + éléments d'habillage activables). |
IsOpen | Boolean | Mode champ uniquement. true tant que le calendrier en popup est ouvert. |
SelectedStartTime (début) et
SelectedEndTime (fin), au format hh:mm et sensibles à
Use24h. En mode multiple, l'heure est globale (une seule pour tout
le lot) et ces sorties sont le seul moyen de la lire, car SelectedDates ne contient
que des dates. En simple et en plage, l'heure est aussi comprise dans SelectedDate /
SelectedStartDate (début) et SelectedEndDate (fin), donc tu peux aussi
l'extraire toi-même avec Text(cmpCalendar_1.SelectedDate, "hh:mm") ou
Hour(...) / Minute(...). Pour composer de vraies dates-heures (date + heure
combinées), quatre sorties numériques existent aussi : SelectedStartHour /
SelectedStartMinute et SelectedEndHour / SelectedEndMinute.
Use24h et MinuteStep ne changent que l'apparence du sélecteur, pas la
valeur renvoyée.
| Événement | Paramètre | Déclenché quand |
|---|---|---|
OnChange | SelectedDate | Se déclenche quand la sélection change. |
OnNavigate | – | Se déclenche quand le mois affiché change. |
OnConfirm | – | Se déclenche quand OK est pressé. |
OnCancel | – | Se déclenche quand Annuler est pressé. |
Versions
Le composant suit le versionnage sémantique (MAJEUR.MINEUR.CORRECTIF). À chaque évolution, cette page et le numéro de version sont mis à jour pour que vous puissiez suivre. Notez la version que vous avez importée.
Events) et dates spéciales pilotées par données (table Markers : surbrillances, échéances, jours bloqués).HH : MM qui ouvre une galerie heures/minutes en popup (12/24 h, début et fin).Settings.FieldMode) : le composant devient un champ compact qui ouvre le calendrier en popup, avec la sortie IsOpen pour piloter la hauteur côté écran.Languages extensible), densité confort / compact, et thème clair / sombre entièrement personnalisable.