xxxxcmpCalendar : composant Power Apps (date picker & lentille de planning)

Aperçu

Bien plus qu'un sélecteur de date

cmpCalendar est un composant Power Apps Canvas unique : un sélecteur de date qui devient une véritable lentille de planning. Aucune logique propre à un pays ou à une langue n'est figée, tout est alimenté par le consommateur via les entrées. Le composant valide le schéma pa.yaml v3.0 officiel de Microsoft et n'embarque aucune dépendance de contrôles modernes.

Une table = une fonctionnalité

Le composant suit un principe simple : on enrichit l'affichage en passant des tables (Markers, DayValues, Events, Languages, Theme) plutôt qu'en multipliant les booléens. Une seule table Markers remplace ainsi fériés, surbrillances et blocages.

Aperçu interactif

Essayez les paramètres

Ajustez les réglages : l'aperçu se met à jour en direct (mois de démonstration : juillet 2026) et le code Power Fx correspondant est généré sous le configurateur, prêt à coller dans votre instance.

Fonctionnalités phares

Ce que cmpCalendar sait faire

Chaque fonctionnalité est pilotée par une entrée du contrat de propriétés.

Rail des semaines ISO

Numérotation par la méthode du jeudi, correcte aux changements d'année. Cliquer un numéro sélectionne ou étend toute la semaine.

3 modes de sélection

Simple, plage (range) ou multiple, avec désélection au re-clic via AllowEmptySelection.

Heatmap

Teinte chaque jour selon un scalaire (table DayValues), normalisée automatiquement ou sur une échelle fixe (HeatmapMax).

Pastilles d'événements

Jusqu'à MaxDots (plafond 5) pastilles colorées par jour (table Events) qui s'empilent sous la date.

Dates spéciales data-driven

Une table Markers unique : chaque ligne porte sa couleur, son style (fond plein ou anneau), un libellé et un flag « bloqué ».

En-tête contextuel

Mois/année, chips (semaine ISO, trimestre, jour de l'année), ligne « date sélectionnée » consciente du mode, boutons Aujourd'hui et ✕.

Double-mois

Deux mois côte à côte, chacun avec son rail ISO ; la sélection est partagée et une plage s'étend sur les deux.

Forme des indicateurs

La sélection, la tuile de heatmap et le rail des semaines passent du cercle au carré arrondi via SelectionRadius, HeatRadius et RailRadius.

Sélection d'heure

Pickers heure:minute (dropdowns), 12 h/24 h configurable, heure de début + de fin ; les sorties deviennent de vrais DateTime.

Multilingue intégré

Table Languages (EN/FR/ES fournis, extensible par une simple ligne) + paramètre Language.

Densité & responsive

Comfortable/compact, 4 à 6 lignes dynamiques (jamais de ligne vide), dimensionnement piloté par le conteneur.

Légende automatique

Dérivée de ce qui est actif : marqueurs, heatmap, sélection, blocages. Thème clair/sombre intégré (DarkMode).

Installation

C'est du source YAML

cmpCalendar n'est pas au format « copier/coller » de Power Apps. C'est du source YAML (celui de pac canvas unpack/pack et de Power Platform Git integration). Deux façons de l'intégrer :

Git integration

Committez src/Components/cmpCalendar.yaml dans un dépôt de solution relié à Power Platform Git integration, puis synchronisez depuis Power Apps Studio.

Packer en `.msapp`

Empaquetez le source en .msapp avec la CLI Power Platform, puis importez le fichier dans Studio.

Empaqueter le source en .msapp

pac canvas pack --sources ./src --msapp ./cmpCalendar.msapp

Les types de contrôles sont écrits sans suffixe de version (GroupContainer, Gallery, Label, Classic/Button, Rectangle, Circle) afin que Power Apps utilise la version courante de chaque contrôle, pas d'avertissement PA2105, et le composant reste compatible avec les futures versions.

Contrat de propriétés

Entrées, sorties & événements

Toutes les valeurs par défaut sont en anglais et entièrement surchargeables. Les types suivent la nomenclature Power Fx.

Entrées : disposition (seule source de dimensionnement)

Disposition
Nom	Type	Défaut	Rôle
`CellW`	Number	`40`	Largeur d'une cellule jour (px).
`CellH`	Number	`40`	Hauteur d'une ligne de semaine (px).
`WeekColW`	Number	`40`	Largeur du rail des semaines (px). `0` le masque.
`HeaderH`	Number	`36`	Hauteur de la ligne d'en-tête des jours (px).

Entrées : données

Données
Nom	Type	Schéma de ligne	Rôle
`Markers`	Table	`{ Date, Label, Color, AsBackground, Block }`	Dates spéciales. `AsBackground` = disque plein vs anneau coloré ; `Block` = non sélectionnable + barré.
`DayValues`	Table	`{ Date, Value }`	Scalaire par jour pour la heatmap.
`Events`	Table	`{ Date, Color }`	Pastilles d'événements ; plusieurs lignes pour une même date s'empilent.

Entrées : sélection

Sélection
Nom	Type	Champs	Rôle
`Selection`	Record	`{ DefaultDate, DefaultEndDate, DefaultSelection, MinDate, MaxDate }`	Valeurs par défaut + fenêtre de dates. Défauts : `Today()`, `Today()+7`, table multi, `Date(1900,1,1)`, `Date(2100,12,31)`.

Entrées : comportement / affichage (`Settings`, Record)

Champs de `Settings`
Champ	Type	Défaut	Rôle
`SelectRange`	Boolean	`false`	Active la sélection par plage.
`SelectMultiple`	Boolean	`false`	Active la sélection multiple.
`AllowEmptySelection`	Boolean	`true`	Autorise la désélection (re-clic).
`DisableWeekends`	Boolean	`false`	Bloque samedi/dimanche (non sélectionnables + barrés).
`DualMonth`	Boolean	`false`	Affiche deux mois côte à côte.
`ShowHeader`	Boolean	`true`	Affiche l'en-tête contextuel.
`ShowFooter`	Boolean	`true`	Affiche le pied (OK / Annuler).
`ShowLegend`	Boolean	`true`	Affiche la légende automatique.
`ShowWeekNumbers`	Boolean	`true`	Affiche le rail des semaines ISO.
`ShowPadding`	Boolean	`true`	Affiche les jours des mois adjacents.
`ShowTodayButton`	Boolean	`true`	Bouton « Aujourd'hui ».
`ShowCloseButton`	Boolean	`true`	Bouton ✕ de l'en-tête.
`ShowQuarterChip`	Boolean	`true`	Affiche la pastille du trimestre (`T3` / `Q3`). Masquée, la pastille « jour de l'année » se décale pour combler l'espace.
`ShowTime`	Boolean	`false`	Ajoute les pickers heure:minute.
`Use24h`	Boolean	`true`	24 h (sinon 12 h AM/PM).
`TodayStyle`	Text	`"ring"`	Style du jour courant : `"ring" \| "fill" \| "bold" \| "none"`.
`Density`	Text	`"comfortable"`	Densité du contenu : `"comfortable" \| "compact"`.
`HeatmapMax`	Number	`0`	Échelle de la heatmap. `0` = auto (pic visible).
`MaxDots`	Number	`3`	Pastilles max par jour (plafond visuel 5).
`SelectionRadius`	Number	`-1`	Rayon (px) de l'indicateur de sélection. `-1` = cercle plein, `0` = carré net, `>0` = carré arrondi (borné à un cercle).
`HeatRadius`	Number	`8`	Rayon (px) de la tuile de heatmap (« Charge »). Mêmes règles que `SelectionRadius`.
`RailRadius`	Number	`8`	Rayon (px) de la tuile du rail des semaines. Mêmes règles que `SelectionRadius`.

Entrées : localisation

Localisation
Nom	Type	Défaut	Rôle
`Language`	Text	`"en"`	Code de langue actif ; doit correspondre à un `Code` de `Languages`. Code inconnu → repli sur la 1re ligne (« en »).
`Languages`	Table	`en, fr, es`	Dictionnaire intégré, une ligne plate par langue. Ajouter une langue = ajouter une ligne.

Colonnes d'une ligne Languages : Code, FirstDayOfWeek, WeekdayNames ([...]), MonthNames ([...]), DateFormat, Title, Confirm, Cancel, Today, NoSelection, WeekColumnHeader, LegendHeatmap / LegendSelected / LegendBlocked, LabelSelection / LabelRange (préfixe de la ligne de sélection), ChipWeek / ChipQuarter / ChipDay (préfixes des trois pastilles de contexte).

Entrées : thème

Thème
Nom	Type	Défaut	Rôle
`DarkMode`	Boolean	`false`	Sélectionne la ligne de thème Dark vs Light.
`Theme`	Table	`Light, Dark`	2 lignes : couleurs + glyphes d'icônes.

Chaque ligne Theme : mode ("Light" / "Dark"), containerFill, backgroundFill, titleColour, textColour, noteColour, lineColour, selectionFill, selectionColour, todayBorderColour, buttonColour, hoverFill, pressFill, adjacentColour, rangeFill, heatColour + glyphes iconPrev, iconNext, iconClose, iconPicker, iconClock.

Sorties

Sorties
Nom	Type	Rôle
`SelectedDate`	DateAndTime	Date sélectionnée (mode simple ; porte l'heure si `ShowTime`).
`SelectedStartDate`	DateAndTime	Début de la plage (avec heure de début).
`SelectedEndDate`	DateAndTime	Fin de la plage (avec heure de fin).
`SelectedDates`	Table	Toutes les dates sélectionnées (mode multiple), lignes `{ Value }`.
`DisplayedMonth`	Number	Mois actuellement affiché (1–12).
`DisplayedYear`	Number	Année actuellement affichée.
`ComponentHeight`	Number	Hauteur rendue (px), utile car la hauteur est dynamique (4 à 6 lignes).

Événements

Événements
Événement	Paramètre	Déclenché quand
`OnChange`	SelectedDate	À chaque changement de sélection.
`OnNavigate`	–	Au changement de mois affiché.
`OnConfirm`	–	Bouton OK (pied).
`OnCancel`	–	Bouton Annuler (pied).
`OnClose`	–	Bouton ✕ (en-tête).

Exemples d'usage

Power Fx : syntaxe invariante

Formules écrites en syntaxe invariante (virgules) ; collez-les dans la propriété correspondante de votre instance de composant sur l'écran. Astuce : l'aperçu interactif génère ce code automatiquement.

Mode simple

cmpCalendar1.Settings : sélecteur de date simple

{
    SelectRange: false, SelectMultiple: false, AllowEmptySelection: true,
    DualMonth: false, ShowHeader: true, ShowFooter: true, ShowLegend: true,
    ShowWeekNumbers: true, ShowPadding: true, ShowTodayButton: true, ShowQuarterChip: true,
    TodayStyle: "ring", Density: "comfortable", HeatmapMax: 0, MaxDots: 3,
    SelectionRadius: -1, HeatRadius: 8, RailRadius: 8
}

cmpCalendar1.OnChange : réagir à la sélection

Notify("Date : " & Text(cmpCalendar1.SelectedDate, "dd/mm/yyyy"))

Mode plage + double-mois + heure

cmpCalendar1.Settings

{
    SelectRange: true, SelectMultiple: false, AllowEmptySelection: true,
    DualMonth: true, ShowTime: true, Use24h: true,
    ShowHeader: true, ShowFooter: true, ShowLegend: true, ShowWeekNumbers: true,
    ShowPadding: true, ShowTodayButton: true, ShowQuarterChip: true, TodayStyle: "ring",
    Density: "comfortable", HeatmapMax: 0, MaxDots: 3,
    SelectionRadius: -1, HeatRadius: 8, RailRadius: 8
}
// puis lire : cmpCalendar1.SelectedStartDate ... cmpCalendar1.SelectedEndDate

Passer le composant en français

cmpCalendar1.Language

"fr"      // "en" | "fr" | "es" ; fr et es sont intégrés à la table Languages

Alimenter Markers / DayValues / Events

cmpCalendar1.Markers : fériés, surbrillances, blocages

Table(
    // surbrillance pleine (ex. un jour férié)
    { Date: Date(2026, 7, 21), Label: "Fête nationale", Color: RGBA(239, 68, 68, 1), AsBackground: true,  Block: false },
    // anneau (ex. une échéance)
    { Date: Date(2026, 7, 15), Label: "Échéance",       Color: RGBA(59, 130, 246, 1), AsBackground: false, Block: false },
    // blocage (non sélectionnable, barré)
    { Date: Date(2026, 7, 24), Label: "Fermé",          Color: RGBA(148, 163, 184, 1), AsBackground: false, Block: true  }
)

cmpCalendar1.DayValues : heatmap

Table(
    { Date: Date(2026, 7, 6), Value: 2 },
    { Date: Date(2026, 7, 7), Value: 5 },
    { Date: Date(2026, 7, 8), Value: 9 }
)
// échelle fixe pour comparer les mois : cmpCalendar1.Settings.HeatmapMax = 10

cmpCalendar1.Events : pastilles

Table(
    { Date: Date(2026, 7, 6), Color: RGBA(59, 130, 246, 1) },
    { Date: Date(2026, 7, 6), Color: RGBA(16, 185, 129, 1) },
    { Date: Date(2026, 7, 9), Color: RGBA(239, 68, 68, 1) }
)

Responsive : remplir le conteneur

Liez les constantes de taille au conteneur hôte

// cmpCalendar1.CellW
Round(Parent.Width / If(cmpCalendar1.Settings.DualMonth, 14, 7), 0)
// cmpCalendar1.CellH
cmpCalendar1.CellW

Limite connue

Mono-instance par écran

Une seule instance de cmpCalendar par écran

L'état du composant vit dans des variables app-scope (varCalendar*) et une collection (colCalendarSelected). Deux instances sur le même écran entreraient en collision.

C'est un choix de conception connu, accepté et temporaire (Power Fx dans les composants n'a pas de variables de contexte). Utilisez une seule cmpCalendar par écran pour l'instant. Un futur refactor en composant contrôlé (le consommateur tient le mois + la sélection, le composant lève des événements) lèvera cette restriction.

Versions

Historique & changelog

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.

v1.0.0 25 juin 2026 Version actuelle

AjoutPremière publication : sélecteur de date complet (simple / plage / multiple) servant de lentille de planning.
AjoutRail des semaines ISO, heatmap (DayValues), pastilles d'événements (Events) et dates spéciales data-driven (Markers).
AjoutEn-tête contextuel, double-mois, presets de plage et sélection d'heure (heure:minute, 12/24 h).
AjoutMultilingue intégré (EN / FR / ES, table Languages extensible) et thème clair/sombre.
QualitéSource YAML validée contre le schéma pa.yaml v3.0 ; entièrement en contrôles classiques (aucune dépendance « contrôles modernes »).

Compatibilité (SemVer). Un changement MAJEUR (ex. 2.0.0) peut casser un contrat de propriété existant ; MINEUR (ex. 1.1.0) ajoute des capacités rétro-compatibles ; CORRECTIF (ex. 1.0.1) corrige sans changer le contrat.