LgCalendar

LgCalendar affiche un calendrier annuel, ou une période couvrant plusieurs mois, avec une ligne par jour. Utilisez-le pour visualiser des périodes, des absences, des disponibilités ou tout indicateur métier réparti sur des dates.

<LgCalendar Indicators="@(Array.Empty<CalendarIndicator>())" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgComponentBase
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Calendrier annuel sans indicateur

Fournissez une collection vide à Indicators lorsque vous utilisez le rendu par défaut sans plage colorée. StartDate et EndDate valent par défaut le premier et le dernier jour de l'année courante.

AnnualCalendarPage.razor
<LgCalendar StartDate="StartDate"
            EndDate="EndDate"
            Indicators="CalendarIndicators"
            OnDayClick="SelectDayAsync" />

AnnualCalendarPage.razor.cs
public partial class AnnualCalendarPage : LgPage
{
    // Date de début affichée par le calendrier annuel.
    private DateTime StartDate { get; set; } = new(DateTime.Today.Year, 1, 1);

    // Date de fin affichée par le calendrier annuel.
    private DateTime EndDate { get; set; } = new(DateTime.Today.Year, 12, 31);

    // Collection vide nécessaire au rendu standard lorsqu'aucun indicateur n'est affiché.
    private IEnumerable<CalendarIndicator> CalendarIndicators { get; set; } = Array.Empty<CalendarIndicator>();

    // Traite le clic sur un jour et réutilise la date fournie par l'événement Lagoon.
    private Task SelectDayAsync(ClickDayEventArgs args)
    {
        ShowInformation("#CalendarDaySelected");
        return Task.CompletedTask;
    }
}

Afficher des périodes colorées

Indicators contient les familles d'indicateurs. Chaque CalendarIndicator définit un libellé de bulle d'aide, une couleur ou une classe CSS, puis une collection de périodes CalendarIndicatorRangeCollection. Un indicateur occupe une colonne dans chaque jour et ses périodes sont évaluées date par date.

LeaveCalendarPage.razor
<LgCalendar CssClass="leave-calendar"
            StartDate="StartDate"
            EndDate="EndDate"
            Indicators="LeaveIndicators"
            OnDayClick="OpenDayAsync" />

LeaveCalendarPage.razor.cs
public partial class LeaveCalendarPage : LgPage
{
    // Borne de début de l'année suivie par l'écran.
    private DateTime StartDate { get; set; } = new(2024, 1, 1);

    // Borne de fin de l'année suivie par l'écran.
    private DateTime EndDate { get; set; } = new(2024, 12, 31);

    // Indicateurs métier affichés dans les cellules du calendrier.
    private List<CalendarIndicator> LeaveIndicators { get; set; } = new();

    // Prépare les périodes colorées avant l'affichage de la page.
    protected override Task OnInitializedAsync()
    {
        CalendarIndicatorRangeCollection schoolRanges = new()
        {
            new CalendarIndicatorRange
            {
                StartDate = new DateTime(2024, 2, 12),
                EndDate = new DateTime(2024, 2, 23)
            },
            new CalendarIndicatorRange
            {
                StartDate = new DateTime(2024, 4, 15),
                EndDate = new DateTime(2024, 4, 26)
            }
        };

        CalendarIndicatorRangeCollection teamRanges = new()
        {
            new CalendarIndicatorRange
            {
                StartDate = new DateTime(2024, 7, 8),
                EndDate = new DateTime(2024, 7, 19)
            }
        };

        LeaveIndicators = new List<CalendarIndicator>
        {
            new CalendarIndicator
            {
                Id = "schoolHolidays",
                Label = "#SchoolHolidays",
                Color = "#e95420",
                Ranges = schoolRanges
            },
            new CalendarIndicator
            {
                Id = "teamLeave",
                Label = "#TeamLeave",
                CssClass = "team-leave-indicator",
                Ranges = teamRanges
            }
        };

        return base.OnInitializedAsync();
    }

    // Ouvre le détail métier associé à la journée sélectionnée.
    private Task OpenDayAsync(ClickDayEventArgs args)
    {
        ShowInformation("#CalendarDayOpened");
        return Task.CompletedTask;
    }
}

Personnaliser le rendu d'un jour

DayContent remplace entièrement le rendu interne de chaque journée. Dans ce mode, le composant transmet la date courante au fragment RenderFragment<DateTime> et vous choisissez le contenu à afficher.

PlanningCalendarPage.razor
<LgCalendar StartDate="StartDate" EndDate="EndDate">
    <DayContent Context="day">
        <LgLabel Text="@(GetDayLabel(day))" />
    </DayContent>
</LgCalendar>

PlanningCalendarPage.razor.cs
public partial class PlanningCalendarPage : LgPage
{
    // Premier jour de la période affichée.
    private DateTime StartDate { get; set; } = new(DateTime.Today.Year, 1, 1);

    // Dernier jour de la période affichée.
    private DateTime EndDate { get; set; } = new(DateTime.Today.Year, 12, 31);

    // Fournit une clé de traduction différente pour les week-ends.
    private static string GetDayLabel(DateTime day)
    {
        return day.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday
            ? "#CalendarWeekendDay"
            : "#CalendarWorkingDay";
    }
}

Types de données associés

CalendarIndicator décrit une famille de plages affichée dans le calendrier.

Nom	Type	Description
`Id`	`string`	Identifiant métier de l'indicateur.
`Label`	`string`	Libellé utilisé dans la bulle d'aide de la plage. Utilisez une clé `#...`.
`Color`	`string`	Couleur CSS appliquée comme couleur de fond de l'indicateur.
`CssClass`	`string`	Classe CSS ajoutée à l'indicateur.
`Ranges`	`CalendarIndicatorRangeCollection`	Périodes rattachées à cet indicateur.

CalendarIndicatorRangeCollection hérite de List<CalendarIndicatorRange>.

Nom	Type	Description
`StartDate`	`DateTime`	Premier jour inclus dans la période.
`EndDate`	`DateTime`	Dernier jour inclus dans la période.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
`Id`	`string`	`"cld" + Guid.NewGuid().ToString("N")`	`LgCalendar`	Identifiant HTML du conteneur du calendrier.
`CssClass`	`string`	`null`	`LgCalendar`	Classes CSS ajoutées au conteneur du calendrier.
`StartDate`	`DateTime`	`new DateTime(DateTime.Now.Year, 1, 1)`	`LgCalendar`	Date de début de la période affichée.
`EndDate`	`DateTime`	`new DateTime(DateTime.Now.Year, 12, 31)`	`LgCalendar`	Date de fin de la période affichée.
`Indicators`	`IEnumerable<CalendarIndicator>`	`null`	`LgCalendar`	Indicateurs colorés affichés dans le rendu standard des jours.
`DayContent`	`RenderFragment<DateTime>`	`null`	`LgCalendar`	Fragment personnalisé recevant la date du jour à rendre.
`OnDayClick`	`EventCallback<ClickDayEventArgs>`	`default`	`LgCalendar`	Gestionnaire appelé lors du clic sur une journée.

Événements

Nom	Type	Description
`OnDayClick`	`EventCallback<ClickDayEventArgs>`	Déclenché quand l'utilisateur clique sur une journée. `ClickDayEventArgs.Date` contient la date sélectionnée.

Accessibilité

Le conteneur généré porte aria-hidden="true" : le calendrier est donc ignoré par les technologies d'assistance. Ne l'utilisez pas comme seul moyen de transmettre une information critique ; ajoutez une synthèse textuelle, une grille de données ou un détail accessible à proximité. Les libellés d'indicateurs sont rendus en attribut title et doivent utiliser des clés de traduction.

Composants liés

LgLabel : affiche un contenu synthétique dans un DayContent personnalisé.
LgGridView : présente la liste accessible des périodes ou événements représentés dans le calendrier.

Utilisation​

Démonstration​

Calendrier annuel sans indicateur​

Afficher des périodes colorées​

Personnaliser le rendu d'un jour​

Types de données associés​

Propriétés​

Événements​

Accessibilité​

Composants liés​